小程序适配iPhone X

iPhone X来好久了,最近改版微信小程序,遇到需要适配iPhone X,遂到网上查资料,查到两篇介绍https://juejin.im/post/5a1d396551882546d71f157bhttp://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;
        }
    },
});