今天做一个功能,需要兼容iphoneX系列以及11.12以上的设备的兼容性,由于微信小程序在适配iphone x 的时候 底部的横线会出现遮挡如图:

在这里插入图片描述

于是乎就翻了翻小程序的API文档,果不其然在小程序基础接口里面有提供接口 wx.getSystemInfo(Object object)

那么接下来我们讲解下在小程序的开发中我们怎么使用?

1、在全局的app.js文件中globalData我们创建全局变量,然后获取设备型号

 globalData: {
        isIphoneX: false,//判断机型 
    }
onShow(e){
        var that = this
        // 获取设备机型
        wx.getSystemInfo({
            success:  res=>{
              console.log('手机信息res'+res.model)
              let model = res.model;
                if (/iphone\sx/i.test(model) || (/iphone/i.test(model) && /unknown/.test(model))|| /iphone\s11/i.test(model)){
                    that.globalData.isIphoneX = true;
                }else{
                    that.globalData.isIphoneX = false;
                }
            }
        })
       
    },
    

运行代码拿到如下图所示结果 在这里插入图片描述 2、 在需要引用的页面js文件中onload方法里获取全局变量 js

onLoad(){
 //获取当前设备机型
        let isIphoneX = app.globalData.isIphoneX;
        this.setData({
            isIphoneX: isIphoneX
        })
    }
        

3 在 wxml文件中 进行css的逻辑判断 wxml

<view class="pt_footer {{isIphoneX?'isIPX':''}}"></view>

wxss

.isIPX{
  height: 128rpx !important;
}

最终修改之后的样式如下 在这里插入图片描述

该文章版权属于梨童就是小梨童呀
摘录自:https://blog.csdn.net/weixin_42220039/article/details/110137851

微信小程序中适配iphoneX兼容性的更多相关文章

  1. 微信小程序自定义导航栏(兼容适配所有机型)

    微信小程序自定义导航栏(兼容适配所有机型) ...

  2. android studio 顶部导航栏_微信小程序自定义navigationBar顶部导航栏,兼容适配所有机型(附完整案例)...

    android studio 顶部导航栏_微信小程序自定义navigationBar顶部导航栏,兼容适配所有机型(附完整案例)... ...

  3. 微信小程序适配iphoneX,XR,12等机型的底部安全区域

    微信小程序适配iphoneX,XR,12等机型的底部安全区域 ...

  4. 微信小程序屏幕适配不同的iPhone

    微信小程序屏幕适配不同的iPhone ...

  5. 安装chrome插件报\"程序包无效

    安装chrome插件报\"程序包无效 ...

  6. 【日常踩坑】修复 chrome 打不开微信或者部分第三方应用内链接

    【日常踩坑】修复 chrome 打不开微信或者部分第三方应用内链接 ...

  7. Chrome 插件下载、安装、加载正在开发的扩展程序和打包扩展程序

    Chrome 插件下载、安装、加载正在开发的扩展程序和打包扩展程序 ...

  8. drawio,程序员最好用的在线画图软件!!!

    drawio,程序员最好用的在线画图软件!!! ...

  9. C# .Net 小程序消息推送配置+详细代码

    C# .Net 小程序消息推送配置+详细代码 ...

  10. 微信小程序+.NET(一) 开发环境及项目介绍

    微信小程序+.NET(一) 开发环境及项目介绍 ...