微信小程序iPhone X空白兼容

开局一张图……

 

 

 

 

 

微信小程序iPhone X空白兼容

看看这空白的地方多丑

~

接下来就是见证奇迹的时刻(上代码)

//app.js
App({
  onLaunch: function (ops) {
    if (ops.scene == 1044) {
      console.log(ops.shareTicket)
    }

    var _this = this
    wx.getSystemInfo({
      success: function (res) {
        console.log(res.model)
        if (res.model.search('iPhone X') != -1) { //重点:此时 model 值为 iPhone X,但其实真机下 model 的值为: iPhone X (GSM+CDMA)<iPhone10,3>,因此我们需要用字符串检索匹配进行判断。
          _this.globalData.isIpx = true;
          console.log(_this.globalData.isIpx)
        }
      }
    })
  },
  globalData: {
    isIpx: false
  }

})

index.js中的代码

Page({
  data: {
    isIpx: app.globalData.isIpx
  }
})

wxss中的代码

/**index.wxss**/
.container-iphonex {
  /* background: linear-gradient(180deg, rgba(255, 189, 91, 1), rgba(237, 130, 79, 1)); */
  background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529498357452&di=5da189bde8abd791b19870c5c61754d4&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201411%2F27%2F20141127144551_CxUr4.jpeg'); 
  height: 1448rpx;
  width: 100%;
}
 
.container {
  /* background: linear-gradient(180deg, rgba(255, 189, 91, 1), rgba(237, 130, 79, 1)); */
    background-image: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529498357452&di=5da189bde8abd791b19870c5c61754d4&imgtype=0&src=http%3A%2F%2Fimg4q.duitang.com%2Fuploads%2Fitem%2F201411%2F27%2F20141127144551_CxUr4.jpeg'); 
  height: 1206rpx;
  width: 100%;
}

wxml中的代码

<view class="{{isIpx?'container-iphonex':'container'}}" >
</view>

去试验一下吧

上一篇:微信小程序让某个方法在当前小程序使用过程中只执行一次,如首页启动广告


下一篇:邯郸办邯郸证WDF