• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

uni-app爬坑之旅_开发一个自己的app_day09_分享学习笔记(解决H5和小程序的页面兼容问 ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、解决H5和小程序的页面兼容问题

1.问题简述

在设计页面的时候,H5页面通常不考虑手机最上方的状态栏(包含信号类型、信号强弱、时间、电量等),只需要专注页面内容的实现,但是在微信小程序的页面,需要考虑最上方这个信息显示区的高度及胶囊的位置,因为这两个区域都是系统自带的,且不同机型的用户两个区域的位置不同,这就需要一个方法,来让页面适配所有机型的设备,不然原本想要展示的内容就有可能被状态栏和胶囊遮挡

2.解决思路

获取用户机型的数据,根据状态栏所占用区域的高度,以及胶囊的相对位置,提前预留出空白区域,避免页面内容被占用

3.代码实现

需要用到一个uni-app的自带函数:uni.getSystemInfoSync(),作用是获取用户当前设备和小程序挂钩的数据,以下是该函数的打印信息

关键字解释:

  • language:语言
  • model:型号
  • pixelRatio:像素密度(像素密度越高,显示效果越清晰,像素密度影响我们发送给设备的图片分辨率,例如普通设备像素密度低,需要的图片分辨率也小;高清设备像素密度高,需要的图片分辨率也高)
  • platform:平台
  • safeArea:距离屏幕四个边的间距(貌似只有ios系统的有)
  • safeAreaInsets:控件可见区域距离屏幕四个边的距离(可以参考大佬的这篇博客:iOS safeAreaInsets安全区域相关知识
  • screenHeight:设备屏幕高度
  • screenWidth:设备屏幕宽度
  • statusBarHeight:状态栏高度
  • system:系统版本号
  • windowButtom/Height/Top/Width:用于区分底部的navbar

相关代码:

<template>
	<view :style="{height: statusBarHeight + 'px;'}"></view>
</template>
<script>
	export default {
		data() {
			return {
				statusBarHeight: 20
			};
		},
		created(){
			// 获取手机系统信息
			const info = uni.getSystemInfoSync()
			// 设置状态栏高度
			this.statusBarHeight = info.statusBarHeight
		}
	}
</script>

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序一键登录获取手机号发布时间:2022-07-18
下一篇:
小程序日期时间段选择发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap