微信小程序适配iPhone x系列手机的方法

文章2019-07-23751 人已阅来源:网络

微信小程序在适配iphone x 的时候 底部的横线会出现遮挡这时候就要处理下:

获取设备型号

app.js文件中 创建全局变量,然后获取设备型号

globalData: {
        isIphoneX: false,
        userInfo: null
},
onShow: function() {
    let that = this;
    wx.getSystemInfo({
        success: res => {
            // console.log('手机信息res'+res.model)  
            let modelmes = res.model;
            let iphoneArr = ['iPhone X', 'iPhone 11', 'iPhone 11 Pro Max']
            iphoneArr.forEach(function (item) {
                if (modelmes.search(item) != -1) {
                    that.globalData.isIphoneX = true
                }
            })

        }
    })
},

onload方法里获取全局变量

在需要引用的页面js(如:index.js)文件中onload方法里获取全局变量

let isIphoneX = app.globalData.isIphoneX;
this.setData({
    isIphoneX: isIphoneX
})

wxml文件中绑定特定css类

在 wxml文件中,进行css的逻辑判断,然后在全局app.wxss或者相对就的*.wxss里进行相关样式的设置即可。

<view class="{{isIphoneX?'linkCon':''}}"> </wiew>//注:linkCon为类名