微信小程序适配iphoneX

Posted 行走的小白

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序适配iphoneX相关的知识,希望对你有一定的参考价值。

在小程序开发中,涉及到适配iphonex的情况主要就是在页面的最下出现button的情况,对于这个的解决思路就是:

1.获取设备型号:

// 在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 
      } 
    } 
  }) 
},

2.根据不同的设备,设置不同的css样式,另外在html布局的时候button放进别的容器标签中例如:

xx.wxml

<view class=\'contentView\' style=\'padding-bottom:{{btuBottom}}\'>
       <button class=\'but\'>Button </button>
</view>
xx.js

data: {
  btuBottom:"";
  },
//在这里只需要判断是不是iphonex,然后设置下padding-bottom:即可
  onLoad: function (options) {
    let isPhone = app.globalData.isIphoneX;
    if(isPhone){
      this.setData({
        btuBottom:"68rpx",
      })
    }
}


转载:https://www.cnblogs.com/mica/p/11162384.html

以上是关于微信小程序适配iphoneX的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序适配iphonex

微信小程序:swiper高度动态适配

微信小程序代码片段

微信小程序代码片段分享

微信小程序视图层WXML_模板

7-微信小程序 模板(template)