本文主要介绍我们知识收集小程序在适配iPhoneX屏幕时遇到的一些问题和总结。希望对大家的小程序开发有所帮助。去年9月iPhoneX屏幕数据正式发布后，引发了一波iOSApp适配iPhoneX的热潮和技术文章。这里简单总结一下iPhoneX屏幕的基本数据，方便后续在小程序开发中进行适配。屏幕尺寸：5.8英寸（对角线）屏幕物理分辨率：1125px×2436px，458ppi实际开发适配尺寸：375pt×812pt，@3x另外，由于iPhone顶部状态栏区域的“Qi缺口”X屏幕，并且在屏幕底部增加了“操作栏”，如下图所示，所以我们在开发的时候需要注意安全区域的问题。根据苹果官方文档，iPhoneX顶部状态栏的自适应安全区域高度为44pt，底部操作栏区域高度为34pt。此外，在iPhoneX中，部分系统Bars的默认高度相比之前的设备也发生了变化，如下表所示。因此在iOSApp开发中，如果我们使用系统默认的UINavigationController和UITabBarController，不需要额外的适配工作，iOS系统会自动适配相关Bar的安全区域。如果我们使用自定义的导航栏和标签栏，需要注意根据设备类型设置这些栏的不同高度。小程序的尺寸单位为了解决不同屏幕尺寸的适配问题，小程序设置了一个尺寸单位：rpx（responsivepixel），可以根据屏幕宽度进行自适应。小程序规定所有设备的屏幕宽度为750rpx，1rpx所代表的实际像素值根据设备的实际屏幕宽度而有所不同。根据微信开发文档，在4.7英寸的iPhone设备（iPhone6/7/8）上，屏幕宽度为375px（这里应该理解为375点），总共有750个物理像素，那么750rpx=375px=750个物理像素，1rpx=0.5px=1个物理像素。小程序中如何判断设备为iPhoneX以上我们简单介绍了iPhoneX的屏幕数据和小程序中的尺寸单位，作为铺垫。现在我们终于进入正题了。在小程序中适配iPhoneX屏幕，我们首先需要知道如何判断设备类型。微信小程序API提供了wx.getSystemInfo(OBJECT)方法获取用户手机的系统信息和设备信息，包括以下数据：以上各字段含义请参考文档，我们不再一一赘述。因此，我们可以根据该方法返回的手机型号字段model是否包含iPhoneX字符串，或者screenHeight的高度是否等于812来判断设备是否为iPhoneX。注意：这里有个小坑需要注意。如果微信开发者工具中的模拟器选择的是iPhoneX，此时获取到的型号值为iPhoneX，导致我以为真机也是同样的值，所以直接用if(model=='iPhoneX')来判断，但实际上真机下model的值是这样的格式：iPhoneX(GSM+CDMA)，所以我们需要使用字符串搜索匹配来判断。综上所述，我们可以在app.js的globalData中增加一个字段isIPX来识别当前设备是否为iPhoneX，然后在小程序启动时调用onLaunch中的wx.getSystemInfo(OBJECT)方法，在其中读取successcallback分析model字段，代码大致如下：app({//全局数据globalData:{//其他数据定义...isIPX:false,//当前设备是否为iPhoneX},//小程序启动入口onLaunch:function(options){//其他启动代码...//判断设备是否为iPhoneXthis.checkIsIPhoneX()},checkIsIPhoneX:function(){constself=thiswx.getSystemInfo({success:function(res){//根据机型判断if(res.model.search('iPhoneX')!=-1){self.globalData.isIPX=true}//或根据screenHeight判断//if(res.screenHeight==812){//self.globalData.isIPX=true//}}})},}如果需要在小程序启动时立即获取设备相关信息，也可以调用wx.getSystemInfoSync()方法，该方法将获得数据同步nously并立即返回。实际的页面适配在小程序页面开发中，需要适配iPhoneX的地方主要有：导航栏（NavigationBar）、标签栏（TabBar）和底部的吸盘按钮页面的。导航栏和标签栏的适配如果我们使用微信小程序官方组件开发，没有自定义，在app.json文件中设置tabBar页面，window的navigationStyle值为默认，那么我们不需要修改导航在iPhoneX中Bar和tabbar适配，微信会自动帮我们适配，下图是知识采集小程序首页：但是如果我们自定义导航栏（在app.json中设置窗??口的navigationStylefiletocustom，此时只保留右上角的胶囊状按钮，需要开发者自行绘制导航栏样式）和标签栏。然后我们需要判断每个页面中的设备类型，并在iPhoneX屏幕的安全区域进行布局，并修改关联Bar的高度值（见上表）。以自定义导航栏适配为例，步骤如下：(1)首先在每个页面的page.js中读取app.js中的isIPX值，如下：constapp=getApp()Page({data:{//页面其他数据...isIPX:app.globalData.isIPX,},//其他代码}(2)然后为页面中的一个视图View写两个样式.wxss样式文件，分别为普通屏和iPhoneXscreen，如下：.navi-bar-view{height:64px;/*其他样式值*/}.navi-bar-view-IPX{height:88px;/*其他样式值*/}(3)***在page.wxml页面结构布局中，根据isIPX的值给View设置不同的class样式，如下：
