详解mpvue实现对苹果X安全区域的适配
75 浏览量
2020-10-16
15:15:05
上传
评论
收藏 51KB PDF 举报
详解详解mpvue实现对苹果实现对苹果X安全区域的适配安全区域的适配
主要介绍了详解mpvue实现对苹果X安全区域的适配，文中通过示例代码介绍的非常详细，对大家的学习或者工
作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、业务背景一、业务背景
最近在利用mpvue+ts开发小程序的过程中，由于苹果X等手机会出现底部的按钮，会遮盖掉需要操作的按钮。由于在小程序
开发，微信爸爸已经做了对机型的检查，相对与H5的处理来说方便很多了。下面就稍微罗列一下解决方案。
二、实现思路二、实现思路
1. 判断机型方法
2. 注入全局组件mixin
3. 加入全局安全距离css
4. 页面上进行class类处理
三、实现过程三、实现过程
1、判断机型方法
小程序的官方文档提供了一个方法wx.getSystemInfo,我们可以利用该方法来对小程序的对应的手机型号进行判断，是否需要
加上安全距离。在工具类文件新建safe-area.js文件，编写下面代码，这里返回一个Project,方便取值。
let cache = null;
export default function getSafeArea() {
return new Promise((resolve, reject) => {
if (cache != null) {
// 如果有缓存不行行调用
resolve(cache);
}
else {
// 获取系统信息
wx.getSystemInfo({
success: ({ model, screenHeight, statusBarHeight }) => {
const iphoneX = /iphone x/i.test(model);
const iphoneNew = /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 = function isPage() {
return this.$mp && this.$mp.mpType === 'page'
}
在mounted过程中进行处理，可以避免不必要的注入。
import getSafeArea from '../utils/safe-area'
let MyPlugin = {};
MyPlugin.install = function (Vue) {
// 添加全局方法或属性
Vue.prototype.$isPage = function isPage() {
return this.$mp && this.$mp.mpType === 'page'
}
// 注入组件
Vue.mixin({
data() {
return {
isIPhoneX: this.isIPhoneX,
}
},
mounted() {
评论0
最新资源