微信小程序iPhone X空白兼容

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序iPhone X空白兼容，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1457字，纯文字阅读大概需要3分钟。

内容图文

开局一张图……

 

 

 

 

 

看看这空白的地方多丑

~

接下来就是见证奇迹的时刻（上代码）

//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空白兼容全部内容，希望文章能够帮你解决微信小程序iPhone X空白兼容所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---