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

font-size适配屏幕巨细及iOS和安卓状态栏及安全隔断的处置惩罚

App.vue

1. <script setup lang="ts">
2. import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
3. import './main.scss'
4. onLaunch(() => {
5.   console.log("App Launch");
6.   var  width = document.documentElement.clientWidth;
7.   const fontSize = width / 750 + 'px';
8.   // 这样写是不生效的h5编译运行的文件是有默认的style样式的
9.   // 一个标签上不能同时出现两个style，不符合编译原则
10.   // document.documentElement.style.fontSize = fontSize;
12.   // 解决方法
13.   // 1. 利用html的默认style来实现
14.   // 2. 在html上添加--gobal-font-size（注意-gobal-font-size变量仅适用于css文件）,设置文字的大小
15.         // 1. 在  static 文件夹下创建 css/public.css 文件
16.         // 2. 在 main.ts 文件中引入 public.css (import './static/css/public.css';)
17.     document.documentElement.className = 'gobal-font-size';
18.   // 3. 然后将设置文字大小的类添加到html标签上
19.     document.documentElement.style.setProperty("--gobal-font-size", fontSize);
21.   // 处理系统不同兼容性问题
22.   uni.getSystemInfo({
23.       success: function (res) {
24.           const statusBarHeight = res.statusBarHeight;
25.           document.documentElement.style.setProperty("--statusBarHeight", statusBarHeight + 'px');
26.           console.log('状态栏的高度', statusBarHeight)
28.           if (res.platform === "android") {
29.             document.body.classList.add('android');
30.           } else if (res.platform === "ios") {
31.             document.body.classList.add('ios');
33.             // 处理安全区域的距离
34.             const safeArea = res.safeArea;
35.             const bottomDistance = res.screenHeight - safeArea.bottom;
36.             document.documentElement.style.setProperty("--safe-area", bottomDistance + 'px');
37.             console.log('底部安全区域距离：', bottomDistance);
39.           } else {
40.             document.body.classList.add('other');
41.           }
42.       }
43.   })
44. });
45. onShow(() => {
46.   console.log("App Show");
47. });
48. onHide(() => {
49.   console.log("App Hide");
50. });
51. </script>
52. <style>
53. @import "@/static/fonts/iconfont.css";
54. </style>

复制代码

public.css

1. html {
2.     --gobal-font-size: 0.45px;
3.     /*状态栏的高度*/
4.     --statusBarHeight: 44px;
5.     /*在竖屏正方向下的安全区域*/
6.     --safe-area: 34px;
7. }
8. .gobal-font-size {
9.     font-size: var(--gobal-font-size) !important;
10. }
12. #app {
13.     padding-bottom: var(--safe-area);
14. }
16. /* 安卓兼容性单独处理*/
17. .android {
18.     /* 处理状态栏的间距 */
19.     padding-top: var(--statusBarHeight);
20. }
21. /* ios兼容性单独处理*/
22. .ios {
23.     /* 处理状态栏的间距 */
24.     padding-top: var(--statusBarHeight);
25. }
26. /* 其它兼容性单独处理*/
27. .other {
29. }

复制代码

记得在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处置惩罚状态栏的隔断后出现的标题）

解决方法：

1. body {
2.         box-sizing: border-box;
3. }

复制代码

在安卓上浏览器会将body元素的宽高设置为视口的宽高，并将任何添加到body元素上的padding会增长在总宽高上面，就会出现滚动条。
pinyin包实现省市区的选择

使用pinyin-pro包比pinyin包小

实现方法：

• 调用接口查察省市区的数据
  
• 处置惩罚省市区的数据
  

1. import {pinyin} from 'pinyin-pro';
2. // 声明变量存储处理的数据
3. let list = [];
4. // 数据处理
5. if (res.data?.length > 0) {
6.         res.data?.map(item => {
7.                 // 将中文字符串转换成拼音数组
8.                 const pinyinArray = pinyin(item?.name, {
9.                         // 设置拼音首字母的风格
10.                         style: pinyin.STYLE_FIRST_LETTER
11.                 })
12.                 // 获取拼音数组的第一个字母（这里有些多音字翻译的不准确要单独处理）
13.                 const firstLetter = pinyinArray[0][0];
14.                 // 将获取的第一个字母转换成大写字母
15.                 const upFont = firstLetter.toUpperCase();
16.                 // 判断拼音数组的第一个字母是否存在在list中
17.                 const listIndex = list.findIndex(i => i?.letter === upFont);
18.                 if (listIndex > 0) {
19.                         // 相同首字母的数据合并在一起
20.                         list[listIndex].data = [item, ...list[listIndex].data];
21.                 } else {
22.                         list.push({
23.                                 letter: upFont,
24.                                 data: [item]
25.                         })
26.                 }
27.         })
28. }
29. // 将处理过的数据从小到大排列
30. const sortList = list.sort((a, b) => {
31.         return a.letter.localeCompare(b.letter);
32. })

复制代码

手机号实现344格式

注意：必须用input才气实现时候号码格式化。

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

复制代码

uniapp 微信小步伐和h5的小区别之编译内容

最近碰到个微信小步伐要改造成h5的项目，微信小步伐的文件编译成h5文件之后样式丢失，就nth-child的样式，我原来还以为是配置错了，效果后面发现是编译的标签不一样，下面是一些编译的差别：
微信小步伐编译后的文件：

h5 编译后的文件(直接将所有的uniapp组件都编译成原生的view形式)：

按钮微信小步伐编译之后是button，h5编译之后照旧uni-button。
表单 Uncaught (in promise) TypeError: Converting circular structure to JSON

这个标题我找了很久，要命~

透明度只能用小数不能用%

uniapp的opacity不正知识别%，只能用小数，而且安卓真机调试都正常，打包安装后透明度就会极低，70%险些看不到。
uni-calendar 的使用

1. <uni-calendar v-if="showCalendar" class="mt-4" :selected="selectedInfo" :showMonth="false" @change="change"
2.                   @monthSwitch="monthSwitch"/>

复制代码

1. selectedInfo = [];
2. tasks = null;
3. showCalendar = false;
5. created() {
6.     this.selectedInfo = [];
7.     onLoad(option => {
8.         // 查询数据(掉接口查询数据)
9.         this.getData();
10.         // 等数据加载完了再显示日历 不然 日历打点加载不出来（要切换月份或者点今日按钮之后才会显示）
11.         setTimeout(() => {
12.             this.showCalendar = true;
13.         }, 1000)
14.     })
15. }
17. getData() {
18.         this.tasks = [...];
19.         this.selectedInfo = [
20.                 {
21.                         date: '2024-03-15',
22.             info: '2条消息',
23.                 }
24.         ];
25.         console.log('数据查询'，'日历打点'，'日历上的数据添加')
26. }
28. change(e) {
29.      console.log('点击的是哪一天', e.fulldate)
30. }
32. monthSwitch(e) {
33.    // 将查询的数据切换成切换的月份和年份
34.    // 切换月份改变数据
35. }

复制代码

页面头部添加操纵按钮

在pages.json中配置：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。