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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解mpvue实现对苹果X安全区域的适配，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2335字，纯文字阅读大概需要4分钟。

内容图文

一、业务背景

最近在利用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() {
   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类处理

处理完以上部分我们可以对页面上需要处理的区域，加入:class="{safeArea: isIPhoneX}"进行修改，例如：

  <div class="handle" :class="{safeArea: isIPhoneX}">
   <div class="home" @click="goHome"></div>
   <div class="submit" @click="buy">立即购买</div>
  </div>

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

内容总结

以上是互联网集市为您收集整理的详解mpvue实现对苹果X安全区域的适配全部内容，希望文章能够帮你解决详解mpvue实现对苹果X安全区域的适配所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---