vue3 uniapp h5 安卓和iOS开发适配踩坑记录

在这里插入图片描述

font-size适配屏幕大小及iOS和安卓状态栏及安全距离的处理

在这里插入图片描述
在这里插入图片描述
App.vue

<script setup lang="ts">
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
import './main.scss'
onLaunch(() => {console.log("App Launch");var  width = document.documentElement.clientWidth;const fontSize = width / 750 + 'px';// 这样写是不生效的h5编译运行的文件是有默认的style样式的// 一个标签上不能同时出现两个style,不符合编译原则// document.documentElement.style.fontSize = fontSize;// 解决方法// 1. 利用html的默认style来实现// 2. 在html上添加--gobal-font-size(注意-gobal-font-size变量仅适用于css文件),设置文字的大小// 1. 在  static 文件夹下创建 css/public.css 文件// 2. 在 main.ts 文件中引入 public.css (import './static/css/public.css';)document.documentElement.className = 'gobal-font-size';// 3. 然后将设置文字大小的类添加到html标签上document.documentElement.style.setProperty("--gobal-font-size", fontSize);// 处理系统不同兼容性问题uni.getSystemInfo({success: function (res) {const statusBarHeight = res.statusBarHeight;document.documentElement.style.setProperty("--statusBarHeight", statusBarHeight + 'px');console.log('状态栏的高度', statusBarHeight)if (res.platform === "android") {document.body.classList.add('android');} else if (res.platform === "ios") {document.body.classList.add('ios');// 处理安全区域的距离const safeArea = res.safeArea;const bottomDistance = res.screenHeight - safeArea.bottom;document.documentElement.style.setProperty("--safe-area", bottomDistance + 'px');console.log('底部安全区域距离:', bottomDistance);} else {document.body.classList.add('other');}}})
});
onShow(() => {console.log("App Show");
});
onHide(() => {console.log("App Hide");
});
</script>
<style>
@import "@/static/fonts/iconfont.css";
</style>

public.css

html {--gobal-font-size: 0.45px;/*状态栏的高度*/--statusBarHeight: 44px;/*在竖屏正方向下的安全区域*/--safe-area: 34px;
}
.gobal-font-size {font-size: var(--gobal-font-size) !important;
}#app {padding-bottom: var(--safe-area);
}/* 安卓兼容性单独处理*/
.android {/* 处理状态栏的间距 */padding-top: var(--statusBarHeight);
}
/* ios兼容性单独处理*/
.ios {/* 处理状态栏的间距 */padding-top: var(--statusBarHeight);
}
/* 其它兼容性单独处理*/
.other {}

记得在main.ts中引入public.css哟~
在这里插入图片描述
提醒:
能做全局的就千万不要单独写,后续维护是个麻烦。

iOS position:fixed失效

iOS的position: fixed是根据距离最近的scroll来定位的, 如果自定义弹窗是通过position: fixed来实现的,就不要在scroll-view里面调用,可以通过自定义样式(overflow: auto)来实现滚动。
在这里插入图片描述

calc 100vh 计算高度

最好不要使用height: calc(100vh - 44px)这种方式来计算高度,系统不一样,高度的计算方法也不一样,iOS有时候没问题,安卓会莫名的出现滚动条。

body 上使用 padding-top: env(safe-area-inset-top)

只针对主页有用,对tabbar页面无效,tabbar页面要单独处理。

页面设置100vh高度后Android会出现滚动条(body上添加padding处理状态栏的距离后出现的问题)

解决方法:

body {box-sizing: border-box;
}

在安卓上浏览器会将body元素的宽高设置为视口的宽高,并将任何添加到body元素上的padding会增加在总宽高上面,就会出现滚动条。

pinyin包实现省市区的选择

使用pinyin-pro包比pinyin包小
在这里插入图片描述
在这里插入图片描述
实现方法:

  1. 调用接口查看省市区的数据
  2. 处理省市区的数据
import {pinyin} from 'pinyin-pro';
// 声明变量存储处理的数据
let list = [];
// 数据处理
if (res.data?.length > 0) {res.data?.map(item => {// 将中文字符串转换成拼音数组const pinyinArray = pinyin(item?.name, {// 设置拼音首字母的风格style: pinyin.STYLE_FIRST_LETTER})// 获取拼音数组的第一个字母(这里有些多音字翻译的不准确要单独处理)const firstLetter = pinyinArray[0][0];// 将获取的第一个字母转换成大写字母const upFont = firstLetter.toUpperCase();// 判断拼音数组的第一个字母是否存在在list中const listIndex = list.findIndex(i => i?.letter === upFont);if (listIndex > 0) {// 相同首字母的数据合并在一起list[listIndex].data = [item, ...list[listIndex].data];} else {list.push({letter: upFont,data: [item]})}})
}
// 将处理过的数据从小到大排列
const sortList = list.sort((a, b) => {return a.letter.localeCompare(b.letter);
})

手机号实现344格式

在这里插入图片描述
注意:必须用input才能实现时候号码格式化。

<input v-model="mobileText" @input="mobileChange"/>
<div class="clear" v-if="mobileText.length > 0"></div>mobileChange() {// 手机号码this.mobile = e.detail.value.replace(/[^0-9_]/g, '');// 页面显示的数据this.mobileText = this.mobile;// 实现344格式if (this.mobileText.length > 3 && this.mobileText.length < 8) {this.mobileText = this.mobileText.replace(/^(\d{3})/g, '$1 ');} else if this.mobileClear.length > 7) {this.mobileText = this.mobileText.replace(/^(\d{3})(\d{4})/g, '$1 $2 ')}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/157099.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

广西桂林钢结构钣金折弯件3d扫描全尺寸偏差检测-CASAIM中科广电

钣金是一种针对金属薄板&#xff08;通常在6mm以下&#xff09;的综合冷加工工艺&#xff0c;包括剪、冲/切/复合、折、焊接、铆接、拼接、成型&#xff08;如汽车车身&#xff09;等&#xff0c;其显著的特征就是同一零件厚度一致&#xff0c;通过钣金工艺加工出的产品叫做钣金…

uni-app:实现request请求的递归(设置request请求的访问次数),并且调用自定义方法给出返回值

一、效果展示 失败效果 成功效果 二、写入后端请求部分 分析 ①自定义一个模块common.js主要用于封装所有的请求函数 ②核心代码 function requestWithRetry(cmd, username, password, retryCount) {return new Promise((resolve, reject) > {uni.request({url: ip sys…

Openlayer【三】—— 绘制多边形GeoJson边界绘制

1.1、绘制多边形 在绘制多边形和前面绘制线有异曲同工之妙&#xff0c;多边形本质上就是由多个点组成的线然后连接组成的面&#xff0c;这个面就是最终的结果&#xff0c;那么这里使用到的是Polygon对象&#xff0c;而传给这个对象的值也是多个坐标&#xff0c;坐标会一个个的…

抖音本地生活服务商申请怎么做?无保证金的申请方法来了

想做抖音的本地生活服务项目&#xff0c;却不知道去哪里申请&#xff0c;或者如何申请&#xff0c;其实&#xff0c;官方的通道在今年上半年还是有的&#xff0c;自己去平台上提交资料申请就可以了&#xff0c;但需要缴纳高额的保证金。 而在今年下半年&#xff0c;平台已经关…

揭秘MySQL SLEEP()函数:避免这些常见误区,不再被时间迷惑!

点击上方蓝字关注我 关于MySQL sleep()函数&#xff0c;很多同学会觉得这个很简单&#xff0c;但是在和研发同学沟通时发现&#xff0c;很多人对此函数存在误解&#xff0c;本文举3个典型的例子进行说明。 1.误区一 以下SQL的运行结果是什么样的 SELECT NOW(),SLEEP(2),NOW()&a…

redis的数据类型的增删改查

redis的高可用 在集群中有一个非常重要的指标&#xff0c;提供服务的时间的百分比&#xff08;365天&#xff09;99.9% redis的高可用含义更加宽泛&#xff0c;正常服务是指标之一&#xff0c;数据容量的扩展&#xff0c;数据的安全性 在redis中实现高可用技术 持久化&…

Prometheus监控mysql nginx tomcat 黑盒监控

部署consul_exporter https://github.com/prometheus/consul_exporter/releases/download/v0.9.0/consul_exporter-0.9.0.linux-amd64.tar.gz 注册 ootubuntu20:~# cat consul_export.json rootubuntu20:~# cat consul_export.json {"services": [{"id"…

手机上玩.NET的两种方式

少见&#xff01;手机上玩 .NET_哔哩哔哩_bilibili 小米平板敲代码&#xff0c;termux安装dotnet和vscode_哔哩哔哩_bilibili 都是先容器加载linux rootfs&#xff0c;然后安装 linux-arm64 版本的 dotnet 命令行方式运行 dotnet&#xff0c;代码编辑到是可以安装使用 vscode…

前端实现动态切换主题色-使用 css/less 动态更换主题颜色(换肤功能)或通过单击更改背景颜色

前言 提示&#xff1a;使用 css/less 动态更换主题色&#xff08;换肤功能&#xff09;&#xff0c;方法共通&#xff0c;不限制技术栈&#xff1a; 其实在日常项目开发中经常会遇到有些用户想要一些自定义的的主题色来满足不同的视觉需求&#xff0c;这时候就需要通过动态更改…

搜索引擎trick:成为搜索高手的秘籍

诸神缄默不语-个人CSDN博文目录 文章目录 1. 搜索指令1.1 "完全匹配搜索"1.2 -1.3 site1.4 filetype1.5 * 模糊搜索1.6 intitle1.7 inurl1.8 related1.9 inanchor 2. 组合搜索技巧3. 搜索引擎的选择4. 使用高级搜索功能4.1 时间限定搜索4.2 语言限定搜索4.3 使用搜索…

技术为业务赋能:深度剖析开发与业务的紧密结合

技术为业务赋能&#xff1a;深度剖析开发与业务的紧密结合 很多做开发的同学有一种认知&#xff0c;技术最牛&#xff0c;进而忽视了对业务的理解和积累&#xff0c;眼里认为技术和游戏一样&#xff0c;有着层出不穷的新技术&#xff0c;更新迭代的非常快&#xff0c;而业务方…

Flask笔记二之blueprint和session介绍

本文首发于公众号&#xff1a;Hunter后端 原文链接&#xff1a;Flask笔记二之blueprint和session介绍 前面我们使用 app.route() 的方式实现了一个简单的接口&#xff0c;用于访问系统接口&#xff0c;接下来介绍一下如何使用 Blueprint 来实现路由的分组以及 Flask 中 session…

Modbus转Profinet网关在大型自动化仓储项目应用案例

Modbus转Profinet网关在大型自动化仓储项目应用案例 在自动化仓储项目中&#xff0c;Modbus是一种常见的通信协议&#xff0c;用于连接各种设备&#xff0c;例如传感器、PLC和人机界面。然而&#xff0c;Modbus协议只支持串行通信&#xff0c;并且数据传输速度较慢。为了提高通…

【C++历练之路】stack||queue||底层原理知多少

W...Y的主页 &#x1f60a; 代码仓库分享&#x1f495; &#x1f354;前言&#xff1a; C标准模板库&#xff08;Standard Template Library&#xff0c;STL&#xff09;是C语言的一个重要组成部分&#xff0c;提供了一组通用的数据结构和算法&#xff0c;以便开发人员能够高…

计算机算法分析与设计(24)---分支限界章节复习

文章目录 一、分支界限法介绍二、旅行商问题应用三、装载问题应用3.1 问题介绍与分析3.2 例题 四、0-1背包问题应用4.1 问题介绍与分析4.2 例题 一、分支界限法介绍 二、旅行商问题应用 三、装载问题应用 3.1 问题介绍与分析 3.2 例题 四、0-1背包问题应用 4.1 问题介绍与分析…

java 数据库 查询 select 2

Day2 组函数 以组为操作单位&#xff0c;一组数据得到一个结果。 在没有手动分组的前提下&#xff0c;整张表默认为一组数据 max(列名)&#xff1a;获取最大值 min(列名)&#xff1a;获取最小值 sum(列名)&#xff1a;获取总和 avg(列名)&#xff1a;获取平均值 count(列…

TensorFlow实战教程(十九)-Keras搭建循环神经网络分类案例及RNN原理详解

从本专栏开始,作者正式研究Python深度学习、神经网络及人工智能相关知识。前一篇文章分享了卷积神经网络CNN原理,并通过Keras编写CNN实现了MNIST分类学习案例。这篇文章将详细讲解循环神经网络RNN的原理知识,并采用Keras实现手写数字识别的RNN分类案例及可视化呈现。基础性文…

【C++进阶之路】第十篇:C++的类型转换

文章目录 1.C语言中的类型转换2.为什么C需要四种类型转换3.C强制类型转换3.1 static_cast3.2 reinterpret_cast3.3 const_cast3.4 dynamic_cast 4.RTTI&#xff08;了解&#xff09;5.常见面试题 1.C语言中的类型转换 在C语言中&#xff0c;如果赋值运算符左右两侧类型不同&…

CSDN专栏设置

文章目录 一、规则1.1、专栏数量与等级关联1.2、等级与积分关联1.3、积分1.3.1、积分获取1.3.2、积分被扣 二、配置2.1、入口2.2、新建2.2.1、一级专栏2.2.2、二级专栏 2.3、快捷编辑2.4、拖拽 一、规则 写了一阵子CSDN博客后&#xff0c;发现自己新增专栏的时候提示不能再新增…

oracle 杀掉正在“执行”的SQL

1、 找到正在执行的 SQL&#xff0c;或者造成等待事件的SQL 的 sid 和 serial#&#xff0c;通过这两个值确定一个 session SELECT b.username 用户名,b.sid, session_idb.serial#, 串口号spid 操作系统ID,paddr, session对应的进程地址&#xff0c;sql_text 正…