微客导航 » 文章资讯 » 详解mpvue实现对苹果X安全区域的适配

详解mpvue实现对苹果X安全区域的适配

2023-08-18 07:58:04 360

一、业务背景

最近在利用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}"进行修改，例如：

立即购买

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

详解mpvue实现对苹果X安全区域的适配

热门推荐

随机推荐