如何使用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类处理
处理完以上部分我们可以对页面上需要处理的区域,加入:class="{safeArea: isIPhoneX}"进行修改,例如:
立即购买
以上是“如何使用mpvue实现对苹果X安全区域的适配”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
分享名称:如何使用mpvue实现对苹果X安全区域的适配-创新互联
分享路径:http://pwwzsj.com/article/dcedcj.html