【微信小程序】踩坑指南（持續更新）

前言 

說明：

• 基於mpvue框架：mpvue官方文檔
• 語法同vue框架：vue官方文檔
• 小程序中會有一些坑點，這裏會就工做中遇到的坑一一列舉出來
• 無說明時請直接看代碼註釋

v-show沒法使用在小程序中

<!-- 下面這行代碼沒法正常工做 -->
<img v-show="IDcard" :src="IDcard" alt="">

<!-- 替代方案 -->
<img v-if="IDcard" :src="IDcard" alt="">

input標籤的type沒法動態賦值

<!-- 下面的inputType的值可能爲：number|text|tel -->
<!-- 下面的代碼沒法獲得正確結果 -->
<input class="value" :type="inputType" v-model="value">

<!-- 替代方案 -->
<input v-if="inputType === 'text'" class="value" v-model="value" type="text">
<input v-else-if="inputType === 'number'" class="value" v-model="value" type="number">
<input v-else class="value" v-model="value" type="tel">

img標籤的src內不可以使用三元運算符

<!-- 下面的寫法致使src拿不到bg_identity.png -->
<img :src="IDcard?IDcard:'../../../static/images/bg_identity.png'" alt="">

<!-- 替代方案 -->
<img v-if="IDcard" :src="IDcard" alt="">
<img v-else src="../../../static/images/bg_identity.png" alt="">

詳情頁跳轉舊數據不銷燬處理辦法

場景：

• 從商品列表點擊一件商品進詳情，返回列表頁，選擇另外一件商品進詳情，會出現上一件商品的數據後再渲染新商品的數據 

// 解決方案
onUnload () {
  Object.assign(this.$data, this.$options.data())
}

解釋：

• 在小程序的頁面卸載生命鉤子onUnload中添加以上代碼，可以讓data對象裏的屬性從新初始化 

原生組件的層級問題

官方說明文檔原生組件說明

舉例說明：

• 若是想讓一個按鈕定位在canvas內容層級上面，直接使用z-index是無效的。

解決辦法：

• 使用小程序提供的cover-view 與 cover-image組件可覆蓋在部分原生組件上面。

實際例子：

• button組件定位在canvas組件上面

注意事項：

• 使用了cover-view組件後，cover-view容器內不能使用常規的div，a，span等等，可嵌套cover-view 、 cover-image和button
• 可覆蓋的原生組件包括map、video、canvas、camera、live-player、live-pusher

onLoad與onShow的區別

頁面路由

說明：

• onLoad：頁面加載時觸發。一個頁面只會調用一次，能夠在 onLoad 的參數中獲取打開當前頁面路徑中的參數。 
• 例：從分享的消息卡片中帶參數到指定頁，如：pages/index/main?id=123
• onShow：頁面顯示/切入前臺時觸發。不可帶參數，可是能夠動態更新當前頁

 ​

onLoad (e) {
  console.log(e.id) // 123
},

onShareAppMessage: function (res) {
  return {
    title: '邀請您填簡歷',
    path: `/pages/index/main?id=${this.id}`
  }
}

textarea原生組件相關問題

• 解決textarea組件爲原生組件層級最高，穿透彈窗或遮罩層。

<textarea v-model="desc" class="inp" placeholder="" auto-focus v-if="focusFlag" @blur="hideTextarea"></textarea>
<p v-else-if="!focusFlag && desc" class="textarea-replace" @click="showTextarea">{{desc}}</p>
<p v-else class="textarea-replace no-desc" @click="showTextarea">請介紹一下本身的性格特色、工做經歷，描述下本身擅長作的事情</p>

export default {
  data () {
    desc: '',
    focusFlag: true
  },
  methods: {
    hideTextarea () {
      this.focusFlag = false
    },
    showTextarea () {
      this.focusFlag = true
    }
  }
}

解釋：

• auto-focus很重要，不加的話，每次輸入文字都得聚焦（點擊）兩次；
• placeholder能夠經過增減p標籤的class名來實現，即class="no-desc"
• @blur事件是失去焦點時觸發

 new Date()設置日期在IOS的兼容問題

說明：

• new Date(date).getTime()，用這個方法來獲取時間戳時，iphone手機上打印出的時間戳爲NaN
•  例：日期爲2019-08-27 16:11:02時使用new Date(date).getTime()方法沒法在iphone手機上獲取到對應的時間戳
• 安卓手機無論是‘-’仍是‘/’都能正確轉成時間戳

解決方案：

const time = '2019-08-27 16:11:02'
const newTime = new Date(time.replace(/-/g, '/')).getTime()

關於小程序中計時器的正確使用

先看實例

​​

講解：

• 每一個需求詳情對應一組倒計時
• 每次進詳情頁，但願數據都是初始化的狀態
• 離開頁面即銷燬數據，下次進詳情從新獲取新數據 

坑點：

• 每次進詳情頁都會生成一個計時器
• 若是頁面銷燬時不手動清除計時器的話會致使再次進入詳情頁會有兩個計時器在運行，重複動做，會有愈來愈多的計時器存在於詳情頁中
• 如何銷燬，計時器如何定義？

解決方案

data () {
  return {
    timer: null
  }
},
onLoad (e) {
  this.demandId = e.id
  this.getDemandDetail()
},
onUnload () {
  clearInterval(this.timer)
  Object.assign(this.$data, this.$options.data())
},
methods: {
  getDemandDetail() {
    // axios請求拿到詳情數據後
    getDetail(this.demandId).then(res => {
      // 在接口中獲取到截止時間和服務器的當前時間
      this.runTimer(res.data.deadline, res.data.systemDate)
    })
  },

  runTimer (deadline, systemDate) {
    deadline = deadline.replace(/-/g, '/')
    systemDate = systemDate.replace(/-/g, '/')
    let totalSeconds = parseInt((new Date(deadline).getTime() - new Date(systemDate).getTime()) / 1000)
    this.timer = setInterval(() => {
      const hours = parseInt(totalSeconds / 60 / 60) > 0 ? parseInt(totalSeconds / 60 / 60) : 0
      const minutes = parseInt((totalSeconds - hours * 3600) / 60) > 0 ? parseInt((totalSeconds - hours * 3600) / 60) : 0
      const seconds = parseInt(totalSeconds - hours * 3600 - minutes * 60) > 0 ? parseInt(totalSeconds - hours * 3600 - minutes * 60) : 0
      // 計算出時分秒並賦值給顯示區域
      this.countTime.hours = hours < 10 ? '0' + hours : hours
      this.countTime.minutes = minutes < 10 ? '0' + minutes : minutes
      this.countTime.seconds = seconds < 10 ? '0' + seconds : seconds
      // 當秒數小於零時銷燬計時器，不然秒數-1
      if (totalSeconds <= 0) {
        this.countdownEnd = true
        clearInterval(this.timer)
        this.timer = null
      } else {
        totalSeconds--
      }
    }, 1000)
  }
}

關鍵代碼：

onUnload () {
  // 必須執行clearInterval操做才能銷燬計時器，簡單的null賦值沒法銷燬
  clearInterval(this.timer)
  // 前面有介紹過，負責頁面銷燬後再次回到頁面時初始化數據
  Object.assign(this.$data, this.$options.data())
}