小程序适配iPhone X

iPhone X来好久了，最近改版微信小程序，遇到需要适配iPhone X，遂到网上查资料，查到两篇介绍https://juejin.im/post/5a1d396551882546d71f157b 和 http://www.aiyingli.com/54107.html（感谢作者分享）

第一位作者并没有介绍打印出的model具体是什么，另一位作者也不知道打印出的是什么但是提出了解决办法，本来问题解决了，但是想查看model会打印出什么以防止未知的bug，遂问土豪老大借了他的iPhone X，发现打印出来的是"iPhone X"还有其他一些信息如"iPhone X 10.0.3"（X和数字间还有很多字符，具体忘记了），为了防止"iPhone X"后边再次出现"X"字符，用 indexOf() 方法代替了第二位作者 lastIndexOf() 方法，所以在小程序app.js里面采用了下图的方式

在其他页面如下代码获取isIpx的值

let app = getApp();
Page({
   data:{
       isIpx: app.globalData.isIpx //判断是否为iPhone X 默认为值false，iPhone X 值为true
   }
})

然后在wxml文件中class里面写上三目运算符，在wxss里面给iPhone X写上独立的样式

<view class=" {{isIpx ? '写上iPhone X单独的类' : ''}}"></view>

之所以在app.js里面判断是否为iPhone X，是因为需要适配的页面可能不是一个，这样就可以共用了

下面附上代码，需要的可以复制（时间过久，下边代码可能出现问题，）

App({
    onLaunch: function (options) {
        let that = this;
        // 将获取的场景值保存到全局变量
        that.globalData.sceneNum = options.scene;
        //调用API从本地缓存中获取数据
        var logs = wx.getStorageSync('logs') || []
        logs.unshift(Date.now())
        wx.setStorageSync('logs', logs)
        // 获取手机信息
        wx.getSystemInfo({
            success: function (res) {
                let model = res.model.substring(0, res.model.indexOf("X")) + "X";
                if (model == 'iPhone X') {
                  that.globalData.isIpx = true  //判断是否为iPhone X 默认为值false，iPhone X 值为true
                }
            }
        })
  },

  globalData: {
    sceneNum: '',
    isIpx: false
  }
})

时间过久，上边代码可能出现问题，感谢 @西巴撸指正,下边附上西巴撸修正过的代码

// 获取设备信息
let _this = this;
wx.getSystemInfo({
    success(res) {
        let deviceModel = 'iPhone X';
        if (res.model.indexOf(deviceModel) > -1) {
            console.log(res.model);
            _this.globalData.isIpx = true;
        }
    },
});

最后编辑于：2019.05.28 11:47:05