小程序的屏幕适配：自定义导航样式

• 使用了自定义导航条样式&＃xff0c;即在app.json中增加配置&＃xff1a;

"window": {"navigationStyle": "custom"
},


• 经过上面配置&＃xff0c;就没有导航条了&＃xff0c;整个界面直接是天气预报页面的背景图&＃xff0c;现在遇见了小程序的屏幕适配问题&＃xff0c;标题是部分跟小程序的胶囊操作区域对齐&＃xff0c;

• 但是如果只是简单的使用 rpx&＃xff0c;在 iPhone 6 的视觉稿

这个值是计算之后的 px 值&＃xff0c;所以单位是 px&＃xff01;这个值在 iPhone 6 手机中是32px&＃xff08;iPhone 6 屏幕宽度为375px&＃xff0c;所以750rpx &＃61; 375px&＃xff09;

// iphone6 的宽度是375 所以转化为px 为32
<!--pages/weather/index.wxml-->
<view class&＃61;"container" id&＃61;"canvas-wrapper" style&＃61;"padding-top: 64rpx">


• 上面直接使用 rpx 来布局&＃xff0c;由于不同手机的屏幕尺寸不同&＃xff0c;实际产生的效果是&＃xff1a;
  
  
  
• 要做好屏幕适配&＃xff0c;需要用到 rpx 的基础知识和wx.getSystemInfo()方法。

wx.getSystemInfo({success: (res) &＃61;> {// 状态栏高度和屏幕宽度&＃xff0c;单位都是pxconsole.log(res.statusBarHeight, res.windowWidth,res.screenWidth)let val &＃61; res.statusBarHeight*2 &＃43;24this.setData({paddingTop:val})}})