适应iPhone X的微信小程序总结

本文主要介绍我们的知识收集小程序在适应iPhone X屏幕时的一些问题和总结，希望对你的小程序开发有所帮助。

iPhone X 屏幕数据

去年9月iPhone X正式发布后，引发了一波iOS App适配iPhone X的热潮和技术文章，详情请参考掘金科技社区本期话题《iPhone X 适配实践》。

这里先简单总结一下iPhone X屏幕的基本数据，方便后续小程序开发中的适配。

屏幕尺寸：5.8英寸(对角线)

屏幕物理分辨率：1125px 2436px，458 ppi

实际开发适合尺寸：375pt 812pt，@3x

另外，由于iPhone X屏幕顶部状态栏区域的“刘琦海”和屏幕底部增加的“操作栏”，如下图所示，我们在开发中需要注意安全区域的问题。

根据苹果官方文件显示，iPhone X顶部状态栏自适应安全区高度为44pt，底部操作栏区域高度为34pt。此外，在iPhone X中，某些系统中Bar的默认高度与之前的设备相比发生了变化，如下表所示。

所以在iOS App的开发中，如果我们使用默认的UINavigationController和UITabBarController，就不需要额外的适配，iOS系统会自动适配相关条的安全区域问题。如果使用自定义导航栏和标签栏，需要注意根据设备类型设置这些栏的不同高度。

小程序的尺寸单位

为了解决不同屏幕尺寸的适配问题，小程序设置了自己的尺寸单位：rpx(响应式像素)，可以根据屏幕宽度进行自适应。小程序规定所有设备的屏幕宽度为750rpx，1rpx表示的实际像素值根据设备屏幕的实际宽度不同而不同。

根据微信的开发文档，在一台4.7英寸的iPhone设备(iPhone 6/7/8)上，屏幕宽度为375px(这里应该理解为375点)，有750个物理像素，那么750rpx=375px=750个物理像素，1rpx=0.5px=1个物理像素。

小程序中如何判断设备为 iPhone X

以上，我们简单介绍了iPhone X的屏幕数据和小程序中的尺寸单位作为铺垫。现在我们终于要说重点了。要在小程序中适配iPhone X屏幕，首先需要知道如何判断设备类型。

微信小程序API提供了一种wx.getSystemInfo(OBJECT)方法来获取用户手机的系统信息和设备信息，包括以下数据：

以上每个字段的含义在文档中都有详细说明，我们就不一一赘述了。

因此，我们可以根据该方法返回的手机型号字段是否包含iPhone X字符串，或者screenHeight的高度是否等于812来判断该设备是否为iPhone X。

注：这里有一个小坑。如果微信开发者工具中的模拟器是iPhone X，那么此时得到的型号值就是iPhone X，这就导致我认为真机也是这个值，所以我直接用if (model=='iPhone X ')来判断，但实际上真机中的型号值是这样的格式：iPhone X (GSM CDMA)iPhone10，3，所以我们需要用字符串。

综上所述，我们可以在app.js的globalData中添加一个字段isIPX来标识当前设备是否为iPhone X，然后在小程序启动时调用onLaunch中的wx.getSystemInfo(OBJECT)方法，读取其成功回调中的模型字段进行分析。代码大致如下：

App({ //全局数据globalData: { //其他数据定义.isIPX:假，//当前设备是否为iPhone X }，//小程序启动入口onLaunch:函数（选项){ //其他启动代码.//判断设备是否为iPhone X this.checkIsIPhoneX() }，checkisiphonex : function(){ const self=this wx。getsystem info({ success : function(RES){//根据模型进行判断if (res.model.search('iPhone X ')！=-1){ self。全球数据。ISIPx=true }//或者根据屏幕高度进行判断//if(RES . screen height==812){//self。全球数据。ISIPx=true//} } })}，}