纯粹小程序新手实战指引，开发中需要注意的点（都是经验）开发中肯定会遇到的疑惑，用5分钟换来几小时的效率。记录一些官方文档没有的踩坑点。
1、<uni-popup></uni-popup>组件设置全屏覆盖
设置宽度和高度100%是没用的
需要在里面加设置一层view，并且设置对应宽高分别为vw和vh
<uni-popup>
<view class="wrap_test"> </view>
</uni-popup>
<style lang="scss">
.wrap_test{
width:100vw;
height:100vh;
}
</style>
2、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);
});
},
3、接口请求写在哪里好？（即返回页面不刷新问题）
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); // 再拿到参数发起请求
},
4、uni-app微信小程序margin-bottom失效（有且只有ios系统上是失效的）
蓝色的区域是position:fixed。（因为写了这个，会导致ios上设置margin-bottom失效无效）
图中图片需要距离底部，不能被蓝色部分遮住，我写了margin-bottom，在模拟器上以及安卓手机是可以的，但是ios系统会不行。
安卓机型、模拟器上生效
如果是真机上，ios手机就会出现这种问题，导致图片被遮住（这张图演示ios上失效的示例）
解决办法：在底部增加一个空白的view设置高度即可
5、微信小程序button通过数组的length判断disabled无效（数组length === 0写法无效）
例子：
给selectedKeys.push()进数据的时候按钮还是禁用的。
<button type="default" @click="handleTag" :disabled="selectedKeys.length === 0">
标记
</button>
这种写法是无效的，是微信小程序的一个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;
},
},
6、无法动态引入javascript脚本
不能像web端一样写script标签引入，因为不支持动态加载<script scr=''> </script>这种方式 引入，无法解决，你只需要知道即可。
7、swiper无法动态设置circular怎么办？
和问题5有点类似，解决办法一样使用computed
<template>
<swiper :circular="!canCircular" > </swiper>
</template>
export default {
data() {
return {
photoListData:[]
}
},
computed: {
canCircular() {
return this.photoListData.length > 0;
}
}
}
8、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格式换格式
9、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>
网友评论