详解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 相关文章推荐
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
May 09 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
微信小程序图片横向左右滑动案例
May 19 Javascript
最新Javascript程序员面试试题和解题方法
Nov 23 Javascript
vue 注册组件的使用详解
May 05 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
js实现简易ATM功能
Oct 27 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使用GD库创建图片缩略图的方法
2015/06/10 PHP
php进程间通讯实例分析
2016/07/11 PHP
PHP7常量数组用法分析
2016/09/26 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
详解vue-property-decorator使用手册
2019/07/29 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
python脚本监控docker容器
2016/04/27 Python
Django项目中添加ldap登陆认证功能的实现
2019/04/04 Python
Python 多个图同时在不同窗口显示的实现方法
2019/07/07 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
python实现查找所有程序的安装信息
2020/02/18 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
Canvas制作旋转的太极的示例
2018/03/09 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
企业治理工作自我评价
2013/09/26 职场文书
餐饮业会计岗位职责
2013/12/19 职场文书
计算机毕业大学生求职信
2014/06/26 职场文书
股权转让协议书
2014/12/07 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
党章学习心得体会2016
2016/01/14 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技