uni-app微信小程序开发,提前阅读(一定要看,防止踩坑)持续更新
纯粹小程序新手实战指引,开发中需要注意的点(都是经验)开发中肯定会遇到的疑惑,用几分钟换来几小时的效率。记录一些官方文档没有的踩坑点。
一、组件设置全屏覆盖
设置宽度和高度100%是没用的
需要在里面加设置一层view,并且设置对应宽高分别为vw和vh
<uni-popup> <view class="wrap_test"> </view> </uni-popup> <style lang="scss"> .wrap_test{ width:100vw; height:100vh; } </style> 复制代码
二、wx.onNetworkStatusChange、uni.onNetworkStatusChange网络状态监听不生效问题
1、该方法只能在手机上进行验证才能生效,小程序开发工具上面不生效
2、该方法只能写在onLoad方法里面,写在mounted方法不生效
错误写法❌
mounted() { uni.onNetworkStatusChange(function (res) { console.log('onNetworkStatusChange', res); }); }, 复制代码
正确写法✔,手机上打开关闭数据、切换wifi连接都可以看得到效果
onLoad(data) { wx.onNetworkStatusChange((res) => { console.log('res' , res); }); }, 复制代码
三、接口请求写在哪里好?(即返回页面不刷新问题)
1、可以写在onShow、onLoad、created、mounted
但是:写在onShow里面最好✔
原因:在很多情况下跳转后都需要刷新页面数据。因为onshow是在页面展示时候触发,通过uni.navigateTo不会销毁页面,返回时候页面的onLoad不会触发。例如通过导航栏返回按钮图标或者uni.navigateTo跳转到指定页面需要刷新页面数据时候,onShow只要页面展示了就会请求。
2、需要通过onLoad的参数来发起请求怎么办?
onLoad(data) { this.prePageParams = data; // 先把参数存起来 }, onShow() { this.fetch(this.prePageParams); // 再拿到参数发起请求 }, 复制代码
四、uni-app微信小程序margin-bottom失效(有且只有ios系统上是失效的)
蓝色的区域是position:fixed。(因为写了这个,会导致ios上设置margin-bottom失效无效)
图中图片需要距离底部,不能被蓝色部分遮住,我写了margin-bottom,在模拟器上以及安卓手机是可以的,但是ios系统会不行。
安卓机型没问题:
如果是真机上,ios手机就会出现这种问题,导致图片被遮住(这张图演示ios上失效的示例):
解决办法✔:在底部增加一个空白的view设置高度即可
五、微信小程序button通过数组的length判断disabled无效(数组length === 0写法无效)
错误写法❌
<button type="default" @click="handleTag" :disabled="selectedKeys.length === 0"> 标记 </button> 复制代码
给selectedKeys.push()进数据的时候按钮还是禁用的。 失效截图:
这种写法是无效的,是微信小程序的一个bug
虽然button的组件是由uni-app提供的,在由小程序运行时候,会转为小程序的button。 微信开放社区,有个相同的提问,官方回复:
解决办法,正确写法✔:
1、直接使用length即可(推荐)
<button type="default" @click="handleTag" :disabled="selectedKeys.length"> 标记 </button> 复制代码
2、通过computed计算属性
<button type="default" @click="handleTag" :disabled="test"> 标记 </button> // vue中的computed computed: { test() { return this.selectedKeys.length === 0; }, }, 复制代码
六、无法动态引入javascript脚本
不能像web端一样写script标签引入,因为不支持动态加载这种方式 引入,无法解决,你只需要知道即可。
七、swiper无法动态设置circular怎么办?
和问题5有点类似,解决办法一样使用computed
<template> <swiper :circular="!canCircular" > </swiper> </template> export default { data() { return { photoListData:[] } }, computed: { canCircular() { return this.photoListData.length > 0; } } } 复制代码
八、IOS苹果手机上时间格式化错误显示Invalid Date
只在真机IOS上面才会出现,小程序模拟器上的ios是不会出现的,原因是因为时间格式只要带有-
符号就会(但有个ios机型却不会出错,我用苹果11测试会出现Invalid Date)。有几种情况,例如:
1、new Date('2022-01-05')
这样写,会出错,变成Invalid Date
2、后端返回这种时间格式:2022-01-05T11:24:04.000+0800
,如果使用dayjs格式化 dayjs(2022-01-05T11:24:04.000+0800).format( 'MM/DD HH:mm')
会同样显示错误。
解决办法✔(三种):
1、正常的时间格式直接replace
掉
let time = "2020-03-30 14:39" let TF = new Date(time.replace(/-/g,'/')) 复制代码
2、使用moment时间格式化(缺点是它比较大这个包)
moment(2022-01-05T11:24:04.000+0800).format( 'MM/DD HH:mm') 复制代码
3、如果针对后端返回的那个格式:2022-01-05T11:24:04.000+0800
,还想使用dayjs(它包非常小,小程序上面很实用),需要自己转换替换下符号'-'
// 先转换格式 const resolveTimeOnIos = (time) => { let data = '0/0/0 00:00'; if (time && time.indexOf('-') !== -1 && time.indexOf('+') !== -1) { const translate = time .replace(/T/g, ' ') .replace(/\.[\d]{3}Z/, '') .replace(/(-)/g, '/'); data = translate.substring(0, translate.indexOf('.')); } return data; } const time = '2022-01-05T11:24:04.000+0800' // 这种格式时间转换 const translateTime = resolveTimeOnIos (time) // 先转换 dayjs(translateTime ).format( 'MM/DD HH:mm') // 使用dayjs格式换格式 复制代码
九、px和rpx相加计算不准确问题(吸顶效果的实现在不同机型存在间隙误差问题)
什么时候会碰到这个问题?当需要吸顶效果,并且,头部是自定义的头部。 我用的是在uniapp组件库下载的一个叫做zhouWei-naeBar的组件,用于自定义头部(这个组件在源码里面写了 92rpx 的高度,记住这是前提
)。
吸顶的top高度 = 自定义头部的高度 + 不同机型的刘海高度。
所以上图吸顶(圈起来的红色)top值就为:
top = 92rpx + uni.getSystemInfoSync()['statusBarHeight'] 复制代码
但是由于小程序获取到的刘海高度是以px
像素为单位的,这就很操蛋! 会变成
top = 92rpx + 43px // (假设获取到是43px) 复制代码
这样计算出来的单位是不一致的,通过不同的dpr
计算也不行,不同机型会有吸顶间隙的问题。
解决办法✔:使用calc动态计算
// statusBarHeight 是刘海高度 <view :style="{ top: `calc(${statusBarHeight}px + 92rpx)` }" > 这是一个吸顶盒子 </view>
作者:showmaker
链接:https://juejin.cn/post/7054467902648352798