开发微信小程序--适配 iPhone X 总结

一、展示效果

这是正常的样式效果：
在这里插入图片描述
这是不正常的效果：

二、原因分析：

在iPhone 6/7/8型号下是正常的，但在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.vue文件中：

 //全局数据
globalData: {// 其他数据定义 ...isIPX: false, // 当前设备是否为 iPhone X
},// 小程序启动入口
onLaunch: function (options) {// 其他启动代码...// 判断设备是否为 iPhone Xthis.checkIsIPhoneX()
},methods: {// 判断设备是否为 iPhone XcheckIsIPhoneX: function() {const that = thiswx.getSystemInfo({success: function(res) {console.log('测试打印', res)// 根据 model 进行判断if (res.model.search('iPhone X') != -1 || res.model.search('iPhone XR') != -1 ||res.model.search('iPhone 12/13 mini') != -1 || res.model.search('iPhone 12/13 (Pro)') != -1 || res.model.search('iPhone 14 Pro Max') != -1 ||res.screenHeight == 844) {that.globalData.isIPX = true}// 或者根据 screenHeight 进行判断// if (res.screenHeight == 812) {// that.globalData.isIPX = true// }}})
},

//在具体页面中判断使用（根据不同的手机型号，使用不同的样式）

	<view :class="isIPX == true ? 'index_my_content iphoneCSS':'index_my_content'">页面内容</view>data() {return {isIPX: app.globalData.isIPX, // 判断设备是否为 iPhone X};},