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

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

微信小程序在适配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;  
        if (modelmes.search('iPhone X') != -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为类名