純粹小程序新手實(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、該方法只能寫(xiě)在onLoad方法里面，寫(xiě)在mounted方法不生效

錯(cuò)誤寫(xiě)法?

  mounted() {
     uni.onNetworkStatusChange(function (res) {
       console.log('onNetworkStatusChange', res);
     });
  },

正確寫(xiě)法?，手機(jī)上打開(kāi)關(guān)閉數(shù)據(jù)、切換wifi連接都可以看得到效果

  onLoad(data) {
    wx.onNetworkStatusChange((res) => {
      console.log('res' , res);
    });
  },

3、接口請(qǐng)求寫(xiě)在哪里好？（即返回頁(yè)面不刷新問(wèn)題）

1、可以寫(xiě)在onShow、onLoad、created、mounted

但是：寫(xiě)在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)閷?xiě)了這個(gè)，會(huì)導(dǎo)致ios上設(shè)置margin-bottom失效無(wú)效）
圖中圖片需要距離底部，不能被藍(lán)色部分遮住，我寫(xiě)了margin-bottom，在模擬器上以及安卓手機(jī)是可以的，但是ios系統(tǒng)會(huì)不行。

安卓機(jī)型、模擬器上生效

如果是真機(jī)上，ios手機(jī)就會(huì)出現(xiàn)這種問(wèn)題，導(dǎo)致圖片被遮?。ㄟ@張圖演示ios上失效的示例）

解決辦法：在底部增加一個(gè)空白的view設(shè)置高度即可

5、微信小程序button通過(guò)數(shù)組的length判斷disabled無(wú)效（數(shù)組length === 0寫(xiě)法無(wú)效）

例子：
給selectedKeys.push()進(jìn)數(shù)據(jù)的時(shí)候按鈕還是禁用的。

        <button type="default" @click="handleTag" :disabled="selectedKeys.length === 0">
          標(biāo)記
        </button>

這種寫(xiě)法是無(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端一樣寫(xiě)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')這樣寫(xiě)，會(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è)組件在源碼里面寫(xiě)了 92rpx 的高度，記住這是前提）。

所以吸頂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>