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


Posted in Javascript onJuly 31, 2019

一、业务背景

最近在利用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>

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

Javascript 相关文章推荐
javascript错误的认识不用关心内存管理
Dec 15 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
Apr 04 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
js表单验证实例讲解
Mar 31 Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 #Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 #Javascript
原生js代码能实现call和bind吗
Jul 31 #Javascript
微信小程序下拉框搜索功能的实现方法
Jul 31 #Javascript
javascript中undefined的本质解析
Jul 31 #Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 #Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 #Javascript
You might like
一些 PHP 管理系统程序中的后门
2009/08/05 PHP
php学习之function的用法
2012/07/14 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
php获取表单中多个同名input元素的值
2014/03/20 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
php中序列化与反序列化详解
2017/02/13 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
js 上传图片预览问题
2010/12/06 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
jQuery简单实现tab选项卡切换效果
2016/06/20 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
hovertree插件实现二级树形菜单(简单实用)
2016/12/28 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
Vue 过渡(动画)transition组件案例详解
2017/01/22 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
python实现文件快照加密保护的方法
2015/06/30 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
python中np是做什么的
2020/07/21 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
时装界的“朋克之母”:Vivienne Westwood
2017/07/06 全球购物
运动会开幕式邀请函
2014/01/22 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
Python采集壁纸并实现炫轮播
2022/04/30 Python