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

2024-08-05 11:27:05

一、业务背景

最近在利用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}"进行修改，例如：

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

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

详解基于mpvue的小程序markdown适配解决方案

美团点评近日开源了 mpvue ,这是一个使用 Vue.js 开发小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案. mpvue 的核心目标是提高开发效率,增强开发体验.使用该框架,开发者只需初步了解小程序开发规范.熟悉 Vue.js 基本语法即可上手.框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js
详解mpvue实现对苹果X安全区域的适配

一.业务背景最近在利用mpvue+ts开发小程序的过程中,由于苹果X等手机会出现底部的按钮,会遮盖掉需要操作的按钮.由于在小程序开发,微信爸爸已经做了对机型的检查,相对与H5的处理来说方便很多了.下面就稍微罗列一下解决方案. 二.实现思路判断机型方法注入全局组件mixin 加入全局安全距离css 页面上进行class类处理三.实现过程 1.判断机型方法小程序的官方文档提供了一个方法wx.getSystemInfo,我们可以利用该方法来对小程序的对应的手机型号进行判断,是否需要加上安全距
详解mpvue小程序中怎么引入iconfont字体图标

前言 iconfont阿里巴巴矢量图标库是我很喜欢的一个网站,可以下载/在线编辑/上传自己需要的矢量图标,也支持团队协作,那么在mpvue项目中如何引入呢? iconfont阿里巴巴矢量图标库将图标加入购物车搜索关键词可以是中文也可以是英文下载素材点击网站右上角的购物车图标,此处我们选第三个 ps:添加到项目很有用,可以在线编辑自己喜欢的图标大小样式/重命名/邀请成员等,此处我们选择加入项目并下载代码文件解压一般网页中为了兼容性考虑,我们会留下css/ttf/svg/woff/eot
详解mpvue中使用vant时需要注意的onChange事件的坑

最近用了一下Vant Weapp组件库,但是由于我是用mpvue写的,所以自然跟小程序引用不一样,比如我最近引用了vant里面的collapse折叠面板,官网文档里面介绍的使用方法是这样的 1.在 app.json 或 index.json 中引入组件 "usingComponents": { "van-collapse": "path/to/vant-weapp/dist/collapse/index", "van-collapse-
详解mpvue开发微信小程序基础知识

一.mpvue简介 mpvue 是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验.mp 即 mini program 的缩写. 二.mpvue快速入门 ① 通过脚手架引入mpvue模板 vue 3.0已经不支持vue init命令了,所以需要单独安装@vue/cli-init,安装好之后,就可以按以下操作步骤
详解mpvue开发小程序小总结

最近用mpvue开发了一个小程序,现总结一下碰见的问题及解决方案 1.项目中数据请求用到了fly.io,封装成request.js如下: import wx from 'wx' import Fly from 'flyio' import store from '../store/index' const fly = new Fly() fly.config.baseURL = process.env.BASE_URL fly.config.timeout = 5000 //http 请求拦截器
详解mpvue中小程序自定义导航组件开发指南

这篇笔记主要记录一下基于mpvue的小程序中实现自定义导航的思路及应用.分享出来抛砖引玉,如有谬误或优化空间,欢迎交流. 小程序的配置项navigationStyle设置为custom之后,导航栏只保留右上角胶囊按钮,颜色.标题文字内容均可以自定义,可以此实现导航栏的个性化需求,实际应用如沉浸式视频播放页等. 小程序7.0.0之后的版本开始支持自定义单个页面的导航栏,将页面的navigationStyle设置为custom即可.mpvue的配置方式如下: 由于不同操作系统.不同机型的导航栏高度是
详解mpvue scroll-view自动回弹bug解决方案

表现设置了scroll-top的scroll-view组件,在组件所在vue实例data发生改变时会自动回弹到最上方解决方案打开 node_modules/mpvue/index.js, 在任意位置添加以下两个方法 function calcDiff(holder, key, newObj, oldObj) { if (newObj === oldObj || newObj === undefined) { return } if (newObj == null || oldObj ==
详解Android Studio 3.0的新特性与适配

简介 Android Studio升级到3.0后,有不少的改动和新特性,先贴出官方的迁移说明. 本文会持续收集与总结本人在使用Android Studio 3.0进行开发的过程中所遇到的问题. 版本配置 Gradle版本 Android Studio 3.0需要的Gradle版本至少为4.1. 如果是使用gradle wrapper,则工程根目录/gradle/wrapper/gradle-wrapper.properties中的distributionUrl字段为https\://servic
详解关于MIUI 9沉浸式状态栏的最新适配

问题: 最近更新了最新的MIUI 9 系统,安装上公司的应用之后,发现之前适配过的沉浸式状态栏忽然没有效果了,感觉很郁闷的我于是去网上搜了一下关于小米手机状态栏适配方面的文章,发现大部分文章都还是之前的适配方案: public void setStatusBarDarkMode(boolean darkmode, Activity activity) { Class<? extends Window> clazz = activity.getWindow().getClass(); try {
详解Java虚拟机(JVM)运行时

JVM(Java虚拟机)是一个抽象的计算模型.就如同一台真实的机器,它有自己的指令集和执行引擎,可以在运行时操控内存区域.目的是为构建在其上运行的应用程序提供一个运行环境.JVM可以解读指令代码并与底层进行交互:包括操作系统平台和执行指令并管理资源的硬件体系结构.本文主要介绍Java虚拟机(JVM)运行时详解. 我们知道的JVM内存区域有:堆和栈,这是一种泛的分法,也是按运行时区域的一种分法,堆是所有线程共享的一块区域,而栈是线程隔离的,每个线程互不共享. 线程不共享区域每个线程的数据区域包括

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

相关推荐

随机推荐