详解mpvue实现对苹果X安全区域的适配
一、业务背景
最近在利用mpvue+ts开发小程序的过程中,由于苹果X等手机会出现底部的按钮,会遮盖掉需要操作的按钮。由于在小程序开发,微信爸爸已经做了对机型的检查,相对与H5的处理来说方便很多了。下面就稍微罗列一下解决方案。
二、实现思路
- 判断机型方法
- 注入全局组件mixin
- 加入全局安全距离css
- 页面上进行class类处理
三、实现过程
1、判断机型方法
小程序的官方文档提供了一个方法wx.getSystemInfo,我们可以利用该方法来对小程序的对应的手机型号进行判断,是否需要加上安全距离。在工具类文件新建safe-area.js文件,编写下面代码,这里返回一个Project,方便取值。
letcache=null; exportdefaultfunctiongetSafeArea(){ returnnewPromise((resolve,reject)=>{ if(cache!=null){ //如果有缓存不行行调用 resolve(cache); } else{ //获取系统信息 wx.getSystemInfo({ success:({model,screenHeight,statusBarHeight})=>{ constiphoneX=/iphonex/i.test(model); constiphoneNew=/iPhone11/i.test(model)&&screenHeight===812; cache={ isIPhoneX:iphoneX||iphoneNew, statusBarHeight }; resolve(cache); }, fail:reject }); } }); }
2、注入全局组件mixin
因为mpvue是具有mixin这个属性的,我们可以利用混入安全距离的处理方法。用法基本跟vue一致。新建mixins.js,注入插件,在这个过程中需要注意一点,就是如果不进行页面类型的判断,会出现如果引用组件也会进行注入该方法。所以需要加入进行判断
Vue.prototype.$isPage=functionisPage(){ returnthis.$mp&&this.$mp.mpType==='page' }
在mounted过程中进行处理,可以避免不必要的注入。
importgetSafeAreafrom'../utils/safe-area' letMyPlugin={}; MyPlugin.install=function(Vue){ //添加全局方法或属性 Vue.prototype.$isPage=functionisPage(){ returnthis.$mp&&this.$mp.mpType==='page' } //注入组件 Vue.mixin({ data(){ return{ isIPhoneX:this.isIPhoneX, } }, mounted(){ if(this.$isPage()){ getSafeArea().then(({isIPhoneX,statusBarHeight})=>{ this.isIPhoneX=isIPhoneX }); } } }) } exportdefaultMyPlugin
在main.js中注册该插件
importMyPluginfrom'./minxins' Vue.use(MyPlugin)
3、加入全局安全距离css
为了我们不需要在每一个文件进行样式的声明,我们可以在全局样式中写入安全距离的类
.safeArea{ padding-bottom:34px!important; }
4、页面上进行class类处理
处理完以上部分我们可以对页面上需要处理的区域,加入:class="{safeArea:isIPhoneX}"进行修改,例如: