十幾行程式碼就可以讓你的微信小程式掛掉

英俊瀟灑你衝哥發表於2018-11-02
行程微信小程式
mpvue （github 地址請參見）是一個使用 Vue.js 開發小程式的前端框架。框架基於 Vue.js 核心，mpvue修改了 Vue.js 的 runtime 和 compiler 實現，使其可以執行在小程式環境中，從而為小程式開發引入了整套 Vue.js 開發體驗。

由來已久

一直以來，我都在用mpvue來編寫小程式應用，雖然問題很多，不過都有替代方案。

比如在mpvue中，slot（插槽）中的內容不能動態的渲染，那我們可以放棄使用slot內使用動態資料。該問題在github中有多人反應。

再比如在mpvue中，自定義指令會直接導致編譯報錯，那麼我們可以放棄使用自定義指令。該問題在github中也有多人反應。

但是今天的問題實在太嚴重，我一定要吐槽一下。

bug現象

我們在開發過程中，發現在某種情況下，頁面UI層的更新時機全部錯亂。即 資料變更後，只有在下次的onShow生命週期裡有體現（有種“慢一拍”的感覺），整體的感覺就是頁面的展示和互動完全癱瘓。

bug調查

我們花了整整一天的時間調查，最後發現問題是在自定義元件上動態為v-if繫結值賦值上。

將程式碼精簡到十幾行就可以復現bug。

bug再現

記住，這是一個mpvue專案。我在src/pages/目錄下新建一個test頁面，對應的index.vue檔案的程式碼如下，邏輯很簡單，就是利用v-if控制一個元件的顯示：

<template>
  <test v-if="show"></test>
</template>
<script>
import test from '@/components/posterTest.vue'
export default {
  data () {
    return { show: true }
  },
  onShow () {
    this.show = false    //在onShow生命週期裡，先將v-if繫結值置位false，2秒再置位true
    setTimeout(() => { this.show = true }, 2000)
  },
  components: { test }
}
</script>複製程式碼

其中引入了posterTest元件。為了調查bug，我將多餘的操作處理全部去掉，只有一張圖片，它的程式碼如下：

<template lang="html">
  <div class="poster">
    <img src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt="">
  </div>
</template>
<script>
export default { }
</script>複製程式碼

這個頁面只要一載入，2秒後控制檯就會報下面的錯誤。

十幾行程式碼就可以讓你的微信小程式掛掉

而只要報了這個錯誤，其他頁面也跟著掛了。就像前面提到的一樣，結果是災難性的——頁面都掛掉了，雙向繫結的更新總像慢了一拍。

找到報錯的程式碼，上面還有了一條有意新增的註釋（也是vue原始碼的）

十幾行程式碼就可以讓你的微信小程式掛掉

所以我懷疑是mpvue在排程上存在問題。

解決方法

  1. mpvue還是要用的，但是以後不能再用v-if來操作元件的顯示了，乖乖用v-show吧。但是話說回來，vue這樣的操作可是一點毛病沒有的。
  2. 在外層套一個div標籤

總結

作為框架，作為一個“輪子”，我覺得不應該有這樣“後果嚴重”的bug出現。再退一步說，一個頁面的bug能導致到整個應用“癱瘓”，也是很恐怖的。

還是要感謝mpvue為我們帶來的種種方便。


相關文章