微信小程序适配原理我的理解

微信小程序适配原理我的理解

1.微信规定

小程序rpx单位自适应宽度，rpx单位并没有做到高度的适配。规定屏幕宽度为750rpx，在iphone6(375*667)中，750rpx=375px --> 1rpx=375/750=0.5px 另外1rpx在所有手机中占屏幕1/750；

2.100rpx在iphone6和iphoneXR中占各屏幕宽度和高度的百分比

通过纯计算来做

iphone6(375*667) 100rpx*0.5=50px 所以100rpx在iphone6中占屏幕宽度为 50px/375px=0.133333占屏幕高度为 50px/667px=0.074962

iphoneXR(414*896) 750rpx=414px–>1rpx=414/750=0.552px 100rpx*0.552=55.2px 所以100rpx在iphoneXR中占屏幕宽度为 55.2px/414px=0.1333333 占屏幕高度为55.2px/896px=0.061607

所以rpx单位实现了宽度自适应，高度并没有做到自适应

3.实现高度自适应的单位vh

vh为屏幕视口单位，对应还有vw,规定屏幕宽度为100vw,屏幕高度为100vh,1vh就是就占掉1/100。

给在iphone6中给定height=150px，问在iphoneXR中如何实现适配？

前面知道rpx单位不能实现高度自适应，所以rpx单位抛弃。故这里选择vh单位。在iphone6中，150px/667px是该高度占屏幕的百分比，故应在iphone6中将height=150px改为height=150px/667px*100vh即可实现适配。而在iphoneXR中，height=150/667*100vh ，而1vh为896/100px,实际的高度给定为150/667*100*(896/100)px=150*896/667px,占屏幕的百分比为150*896/667/896=150/667,与iphone6中占比一致，实现适配。

4.微信小程序顶部导航栏自定义，根据不同手机自适应距离状态栏高度

在app.json中添加"navigationStyle"=“custom” 自定义导航栏

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black",
    "navigationStyle":"custom"
  },

通过js动态获取顶部状态栏高度,globalData中设置全局变量statusBarHeight存储

wx.getSystemInfo({
    sucess:(result)=>{
        this.globalData.statusBarHeight=result.statusBarHeight;
    }
})

在具体页面中获得全局变量statusBarHeight的值 如在index页面里，则在index.js中设置

data:{
    statusBarHeight:getApp().globalData.statusBarHeight,
}

在index.wxml中设置

<view class="statusBar" style="height:{{statusBarHeight}}px;"></view>
<view class="navbar" style="height:44px;">标题</view>

在index.wxss里设置 实现标题水平垂直居中

.navbar{
  width:200rpx;
  margin:0 auto;
  display:flex;
  justify-content: center;
  align-items: center;
}  

iphone6中效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SQa2PNo3-1605974067319)(C:\Users\椰菜\AppData\Roaming\Typora\typora-user-images\image-20201116010148005.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XWM41QRB-1605974067323)(C:\Users\椰菜\AppData\Roaming\Typora\typora-user-images\image-20201116005424455.png)]

iphoneXR中效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-quvF2Ka4-1605974067326)(C:\Users\椰菜\AppData\Roaming\Typora\typora-user-images\image-20201116005555738.png)]

看一下iphone6中getSystemInfo里的内容

{errMsg: "getSystemInfo:ok", model: "iPhone 6/7/8", pixelRatio: 2, windowWidth: 375, windowHeight: 667, …}
SDKVersion: "2.14.0"
batteryLevel: 100
benchmarkLevel: 1
brand: "devtools"
deviceOrientation: "portrait"
devicePixelRatio: 2
errMsg: "getSystemInfo:ok"
fontSizeSetting: 16
language: "zh_CN"
model: "iPhone 6/7/8"
pixelRatio: 2
platform: "devtools"
safeArea: {right: 375, bottom: 667, left: 0, top: 20, width: 375, …}
screenHeight: 667
screenWidth: 375
statusBarHeight: 20
system: "iOS 10.0.1"
version: "7.0.4"
windowHeight: 667
windowWidth: 375
__proto__: Object

20
system: “iOS 10.0.1”
version: “7.0.4”
windowHeight: 667
windowWidth: 375
proto: Object