純粹小程序新手實(shí)戰(zhàn)指引州袒，開(kāi)發(fā)中需要注意的點(diǎn)（都是經(jīng)驗(yàn)）開(kāi)發(fā)中肯定會(huì)遇到的疑惑，用5分鐘換來(lái)幾小時(shí)的效率弓候。記錄一些官方文檔沒(méi)有的踩坑點(diǎn)郎哭。
1、<uni-popup></uni-popup>組件設(shè)置全屏覆蓋
設(shè)置寬度和高度100%是沒(méi)用的
需要在里面加設(shè)置一層view菇存，并且設(shè)置對(duì)應(yīng)寬高分別為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網(wǎng)絡(luò)狀態(tài)監(jiān)聽(tīng)不生效問(wèn)題
1依鸥、該方法只能在手機(jī)上進(jìn)行驗(yàn)證才能生效亥至，小程序開(kāi)發(fā)工具上面不生效
2、該方法只能寫在onLoad方法里面，寫在mounted方法不生效
錯(cuò)誤寫法?
mounted() {
uni.onNetworkStatusChange(function (res) {
console.log('onNetworkStatusChange', res);
});
},
正確寫法?姐扮，手機(jī)上打開(kāi)關(guān)閉數(shù)據(jù)絮供、切換wifi連接都可以看得到效果
onLoad(data) {
wx.onNetworkStatusChange((res) => {
console.log('res' , res);
});
},
3、接口請(qǐng)求寫在哪里好茶敏？（即返回頁(yè)面不刷新問(wèn)題）
1杯缺、可以寫在onShow、onLoad睡榆、created、mounted
但是：寫在onShow里面最好
原因：在很多情況下跳轉(zhuǎn)后都需要刷新頁(yè)面數(shù)據(jù)袍榆。因?yàn)閛nshow是在頁(yè)面展示時(shí)候觸發(fā)胀屿，通過(guò)uni.navigateTo不會(huì)銷毀頁(yè)面，返回時(shí)候頁(yè)面的onLoad不會(huì)觸發(fā)包雀。例如通過(guò)導(dǎo)航欄返回按鈕圖標(biāo)或者uni.navigateTo跳轉(zhuǎn)到指定頁(yè)面需要刷新頁(yè)面數(shù)據(jù)時(shí)候宿崭，onShow只要頁(yè)面展示了就會(huì)請(qǐng)求。
2才写、需要通過(guò)onLoad的參數(shù)來(lái)發(fā)起請(qǐng)求怎么辦葡兑？
onLoad(data) {
this.prePageParams = data; // 先把參數(shù)存起來(lái)
},
onShow() {
this.fetch(this.prePageParams); // 再拿到參數(shù)發(fā)起請(qǐng)求
},
4、uni-app微信小程序margin-bottom失效（有且只有ios系統(tǒng)上是失效的）
藍(lán)色的區(qū)域是position:fixed赞草。（因?yàn)閷懥诉@個(gè)讹堤，會(huì)導(dǎo)致ios上設(shè)置margin-bottom失效無(wú)效）
圖中圖片需要距離底部，不能被藍(lán)色部分遮住厨疙，我寫了margin-bottom洲守，在模擬器上以及安卓手機(jī)是可以的，但是ios系統(tǒng)會(huì)不行沾凄。
解決辦法：在底部增加一個(gè)空白的view設(shè)置高度即可
5、微信小程序button通過(guò)數(shù)組的length判斷disabled無(wú)效（數(shù)組length === 0寫法無(wú)效）
例子：
給selectedKeys.push()進(jìn)數(shù)據(jù)的時(shí)候按鈕還是禁用的保屯。
<button type="default" @click="handleTag" :disabled="selectedKeys.length === 0">
標(biāo)記
</button>
這種寫法是無(wú)效的手负，是微信小程序的一個(gè)bug
雖然button的組件是由uni-app提供的，在由小程序運(yùn)行時(shí)候配椭，會(huì)轉(zhuǎn)為小程序的button虫溜。
微信開(kāi)放社區(qū)，有個(gè)相同的提問(wèn)股缸，官方回復(fù)：
解決辦法：
1衡楞、直接使用length即可（推薦）
<button type="default" @click="handleTag" :disabled="selectedKeys.length">
標(biāo)記
</button>
2、通過(guò)computed計(jì)算屬性
<button type="default" @click="handleTag" :disabled="test">
標(biāo)記
</button>
// vue中的computed
computed: {
test() {
return this.selectedKeys.length === 0;
},
},
6、無(wú)法動(dòng)態(tài)引入javascript腳本
不能像web端一樣寫script標(biāo)簽引入瘾境，因?yàn)椴恢С謩?dòng)態(tài)加載<script scr=''> </script>這種方式 引入歧杏，無(wú)法解決，你只需要知道即可迷守。
7犬绒、swiper無(wú)法動(dòng)態(tài)設(shè)置circular怎么辦？
和問(wèn)題5有點(diǎn)類似兑凿，解決辦法一樣使用computed
<template>
<swiper :circular="!canCircular" > </swiper>
</template>
export default {
data() {
return {
photoListData:[]
}
},
computed: {
canCircular() {
return this.photoListData.length > 0;
}
}
}
8凯力、IOS蘋果手機(jī)上時(shí)間格式化錯(cuò)誤顯示Invalid Date
只在真機(jī)IOS上面才會(huì)出現(xiàn)，小程序模擬器上的ios是不會(huì)出現(xiàn)的礼华，原因是因?yàn)闀r(shí)間格式只要帶有-符號(hào)就會(huì)（但有個(gè)ios機(jī)型卻不會(huì)出錯(cuò)咐鹤，我用蘋果11測(cè)試會(huì)出現(xiàn)Invalid Date）。有幾種情況圣絮，例如：
1祈惶、new Date('2022-01-05')這樣寫，會(huì)出錯(cuò)扮匠，變成Invalid Date
2捧请、后端返回這種時(shí)間格式：2022-01-05T11:24:04.000+0800，如果使用dayjs格式化
dayjs(2022-01-05T11:24:04.000+0800).format( 'MM/DD HH:mm')會(huì)同樣顯示錯(cuò)誤棒搜。
解決辦法(三種)：
1疹蛉、正常的時(shí)間格式直接replace掉
let time = "2020-03-30 14:39"
let TF = new Date(time.replace(/-/g,'/'))
2、使用moment時(shí)間格式化（缺點(diǎn)是它比較大這個(gè)包）
moment(2022-01-05T11:24:04.000+0800).format( 'MM/DD HH:mm')
3力麸、如果針對(duì)后端返回的那個(gè)格式：2022-01-05T11:24:04.000+0800氧吐，還想使用dayjs（它包非常小，小程序上面很實(shí)用）末盔，需要自己轉(zhuǎn)換替換下符號(hào)'-'
// 先轉(zhuǎn)換格式
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' // 這種格式時(shí)間轉(zhuǎn)換
const translateTime = resolveTimeOnIos (time) // 先轉(zhuǎn)換
dayjs(translateTime ).format( 'MM/DD HH:mm') // 使用dayjs格式換格式
9筑舅、px和rpx相加計(jì)算不準(zhǔn)確問(wèn)題（吸頂效果的實(shí)現(xiàn)在不同機(jī)型存在間隙誤差問(wèn)題）
什么時(shí)候會(huì)碰到這個(gè)問(wèn)題？當(dāng)需要吸頂效果陨舱，并且翠拣，頭部是自定義的頭部。
我用的是在uniapp組件庫(kù)下載的一個(gè)叫做zhouWei-naeBar的組件游盲，用于自定義頭部（這個(gè)組件在源碼里面寫了 92rpx 的高度误墓，記住這是前提）。
吸頂?shù)膖op高度 = 自定義頭部的高度 + 不同機(jī)型的劉海高度益缎。
所以吸頂top值就為：
top = 92rpx + uni.getSystemInfoSync()['statusBarHeight']
但是由于小程序獲取到的劉海高度是以px像素為單位的谜慌，這就很操蛋！
會(huì)變成
top = 92rpx + 43px // (假設(shè)獲取到是43px)
這樣計(jì)算出來(lái)的單位是不一致的莺奔，通過(guò)不同的dpr計(jì)算也不行欣范，不同機(jī)型會(huì)有吸頂間隙的問(wèn)題
解決辦法：使用calc動(dòng)態(tài)計(jì)算
// statusBarHeight 是劉海高度
<view :style="{ top: `calc(${statusBarHeight}px + 92rpx)` }" >
這是一個(gè)吸頂盒子
</view>
