珠海抖音微信小程序_详解mpvue完成对苹果X安全区

2021-01-07 12:13 admin
详解mpvue实现对苹果X安全区域的适配       这篇文章主要介绍了详解mpvue实现对苹果X安全区域的适配,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

最近在利用mpvue+ts开发小程序的过程中,由于苹果X等手机会出现底部的按钮,会遮盖掉需要操作的按钮。由于在小程序开发,微信爸爸已经做了对机型的检查,相对与H5的处理来说方便很多了。下面就稍微罗列一下解决方案。

二、实现思路

判断机型方法 注入全局组件mixin 加入全局安全距离css 页面上进行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() {
 if (this.$isPage()) {
 getSafeArea().then(({ isIPhoneX, statusBarHeight }) = {
 this.isIPhoneX = isIPhoneX
export default MyPlugin

在main.js中注册该插件

import MyPlugin from './minxins'
Vue.use(MyPlugin)

3、加入全局安全距离css

为了我们不需要在每一个文件进行样式的声明,我们可以在全局样式中写入安全距离的类

.safeArea {
 padding-bottom: 34px!important;
}

4、页面上进行class类处理

处理完以上部分我们可以对页面上需要处理的区域,加入: 进行修改,例如:

 div : 
 div @click="goHome" /div 
 div @click="buy" 立即购买 /div 
 /div 

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