微信小程序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>

去试验一下吧

微信小程序iPhone X空白兼容

相关推荐