发布日期：2023-09-04 17:08    点击次数：68

本文主要先容咱们的常识小集小秩序在适配 iPhone X 屏幕时际遇的一些问题以及回首，但愿对你的小秩序拓荒能有所匡助。

iPhone X 屏幕数据

在前年 9 月份 iPhone X 悠闲发布后，激勉了一波 iOS App 适配 iPhone X 的振作和期间著述。咱们这里先浅近回首一下 iPhone X 屏幕的基础数据，便捷后续在小秩序拓荒中进行适配。

屏幕尺寸：5.8 英寸(对角线) 屏幕物理分辨率：1125px × 2436px，458 ppi 实质拓荒适配尺寸：375pt × 812pt，@3x

此外，由于在 iPhone X 屏幕顶部现象栏区域有“皆刘海”，以及在屏幕底部加多了“操作条”，如下图所示，因此，咱们在拓荒中需要瞩目安全区域的问题。 

[[238031]]

把柄苹果官方的文档，iPhone X 顶部现象栏的适配安全区域的高度为 44pt，底部操作条区域的高度为 34pt。另外，在 iPhone X 中，一些系统 Bar 的默许高度比拟于之前的建立也发生了变化，如下表所示。 

是以在 iOS App 拓荒中，淌若咱们使用系统默许的 UINavigationController 和 UITabBarController 时，则无需稀奇的适配责任，iOS 系统会自动适配好干系 Bar 的安全区域问题。淌若咱们使用了自界说的导航栏和标签栏，则需要瞩目把柄建立类型别离建树这些 Bar 的不同高度。

小秩序的尺寸单元

为了处罚不同屏幕尺寸的适配问题，小秩序我方定了一个尺寸单元：rpx(responsive pixel)，它不错把柄屏幕宽度进行自稳当。小秩序中规定，所有这个词建立的屏幕宽度都为 750rpx，把柄建立屏幕实质宽度的不同，1rpx 所代表的实质像素值也不通常。

把柄微信拓荒文档，在 4.7 英寸的 iPhone 建立上(iPhone 6/7/8)，屏幕宽度为 375px(此处应该雄厚为 375 point)，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1物理像素。 

小秩序中若何判断建立为 iPhone X

上头咱们简要先容了 iPhone X 的屏幕数据和小秩序中的尺寸单元四肢铺垫，当今终于要切入正题了，要在小秩序中适配 iPhone X 屏幕，当先咱们需要知说念若何判断建立类型。

微信的小秩序 API 中提供了一个 wx.getSystemInfo(OBJECT) 步地用于得回用户手机的系统信息和建立信息，包含如下数据： 

上述每个字段的含义详见文档，咱们不再逐个赘述。

因此，咱们不错把柄该步地复返的手机型号字段 model 是否包含 iPhone X 字符串来判断建立是否为 iPhone X，也不错把柄 screenHeight 的高度是否就是 812 来判断。

NOTE: 这里有一个小坑需要瞩目，在微信拓荒者器用中的模拟器，淌若采用为 iPhone X，此时得回到的 model 值为 iPhone X，导致我觉得真机亦然这个值，于是平直用 if (model == 'iPhone X') 来判断，但其实真机下 model 的值为这种局势： iPhone X (GSM+CDMA)，因此咱们需要用字符串检索匹配进行判断。

综上，咱们不错在 app.js 的 globalData 中添加一个字段 isIPX 用于秀气现时建立是否为 iPhone X，然后在小秩序运转时 onLaunch 中调用 wx.getSystemInfo(OBJECT) 步地并在其 success 回调中读取 model 字段进行分析，代码大概如下：

App({   // 全局数据   globalData: {     // 其他数据界说 ...          isIPX: false, // 现时建立是否为 iPhone X   },      // 小秩序运转进口   onLaunch: function (options) {     // 其他运转代码...          // 判断建立是否为 iPhone X     this.checkIsIPhoneX()   },      checkIsIPhoneX: function() {     const self = this     wx.getSystemInfo({       success: function (res) {         // 把柄 model 进行判断         if (res.model.search('iPhone X') != -1) {           self.globalData.isIPX = true         }         // 或者把柄 screenHeight 进行判断         // if (res.screenHeight == 812) {         //   self.globalData.isIPX = true         // }       }     })   }, } 

淌若需要小秩序运转时立即得回建立干系信息，也不错调 wx.getSystemInfoSync() 步地，它会同步得回数据独立即复返。

页面适配实战

在小秩序页面拓荒中，波及到需要适配 iPhone X 的场田主要有：导航栏(NavigationBar)，标签栏(TabBar)以及页面底部的吸底按钮。

导航栏和标签栏适配

淌若咱们使用微信小秩序官方组件进行拓荒，莫得进行自界说，在 app.json 文献中建树 tabBar 页面，且 window 的 navigationStyle 值为 default，那么咱们无需在 iPhone X 中对导航栏和标签栏进行适配，微信会自动帮咱们适配好，如下图为常识小集小秩序的首页： 

关联词咱们淌若是自界说导航栏(在 app.json 文献中建树 window 的 navigationStyle 为 custom，此时只保留右上角胶囊状的按钮，需要拓荒者我方画导航栏形势)和标签栏，则咱们需要在每个页面中判断建立类型，并针对 iPhone X 屏幕在安全区域内进行布局，并修改干系 Bar 的高度值(见上述表格)。

以自界说导航栏适配为例，要领如下：

(1)在每个页面的 page.js 中先读取 app.js 中的 isIPX 值，如下：

const app = getApp()  Page({   data: {     // 页面其他数据...          isIPX: app.globalData.isIPX,   },      // 其他代码 } 

(2)然后在 page.wxss 形势文献中对某一个视图 View 分别为庸俗屏幕和 iPhone X 屏幕写两种形势，如下：

.navi-bar-view {   height: 64px;   /* 其他形势值 */ } .navi-bar-view-IPX {   height: 88px;   /* 其他形势值 */ } 

(3)***在 page.wxml 页面结构布局中把柄 isIPX 的值给 View 建树不同的 class 形势，如下：

<view class="{{isIPX ? 'navi-bar-view-IPX' : 'navi-bar-view'}}"> </view> 

此外，关于自界说导航栏和标签栏，我提议也曾要治服 iPhone UI 的筹商模范，形势不错参考苹果官方的渲染图： 

吸底按钮适配

在小秩序页面中，吸底按钮是很常见的一种筹商，咱们一般会把一些紧迫的按钮放在页面底部悬浮不动，举例咱们常识小集小秩序的“小集笃定页”底部的“保藏”和“转发”按钮： 

在 iPhone X 中咱们需要把吸底按钮往上偏移 34 像素，可通过在 CSS 形势中建树 padding-bottom 为 34px 竣事，参考代码如下：

.feed-bottom-view {   width: 100%;   height: 48px; /* 吸底按钮的高度 */   bottom: 0;   opacity: 0.95;   position: fixed;   border-top-style: solid;   border-top-width: 0.5px; /* 分割线的高度 */   border-color: lightgrey;   background-color: #F8F8F8; } .feed-bottom-view-IPX {   /* iPhone X 内容往上偏移 34px */   padding-bottom: 34px; }  <view class="{{isIPX ? 'feed-bottom-view feed-bottom-view-IPX' : 'feed-bottom-view'}}"> <!-- 底部吸底按区域 --> </view> 

备注：如前边所述，关于不同建立宽度，1rpx 所代表的实质像素值也不通常，而在不同尺寸的 iPhone 建立(3.5/4.0/4.7/5.5 英寸)中，天然它们的宽度不同，但其导航栏+现象栏的高度都为 64pt(iPhone X 为 88pt)，标签栏 TabBar 的高度都为 49pt(iPhone X 为 83pt)。是以在小秩序拓荒中，当咱们需要自界说导航栏、标签栏，或者适配 iPhone X 顶部和底部安全区域时，我提议此处的单元平直使用 px(在小秩序中对应 iOS 拓荒中的点 pt)而不使用 rpx(天然页面的其他元素的尺寸刻画也曾保举使用 rpx)，以确保最终渲染流露的高度与 iOS 系统默许的一致。

回首

本文简要先容了在小秩序拓荒中若何适配 iPhone X 屏幕，更多细节请查阅咱们在 GitHub 上开源的常识小集小秩序的代码：awesome-tips-wx-app

---