mpVue 踩坑記

songzeng發表於2018-08-08
Vue

前言

mpvue 用 vue 的語法開發小程式，用著很爽但是也有很多坑，在這裡記錄下踩過坑。

1 created 不是預期的觸發

所有頁面的 created 在小程式初始化時都會觸發，mounted 對應小程式的 onLoad，所以 mpvue mounted 相當於 vue 中的 created。

    mounted() {  // 相對應小程式的 onLoad
      // 獲取資料
      this.getData();
    },

vue 中獲取資料放到 created 中，mpvue 則放到 mounted 中。

2 不支援的 vue 屬性

1. keep-alive
2. solt
3. class 和 style 的 classObject 和 styleObject 語法。
4. filters

<template>
    <!-- 支援 -->
    <div class="container" :class="computedClassStr"></div>
    <div class="container" :class="{active: isActive}"></div>

    <!-- 不支援 -->
    <div class="container" :class="computedClassObject"></div>
</template>
<script>
    export default {
        data () {
            return {
                isActive: true
            }
        },
        computed: {
            computedClassStr () {
                return this.isActive ? `active` : ``
            },
            computedClassObject () {
                return { active: this.isActive }
            }
        }
    }
</script>
filters 可以使用 motheds 或者 computed 替換

3 mpvue-loader

mpvue-loader 版本 1.1 以上需要新建 main.json 作為配置檔案。

4 圖片相對路徑無法載入

圖片使用相對路徑無法載入，放到 dist/static 目錄下使用絕對路徑即可。

5 新建頁面需要重新 npm run dev 才能生效

新建頁面後需要重新 npm run dev 才能生效

6 頁面返回後沒有銷燬

小程式中頁面返回後該頁面就會出棧，下次進入重新觸發 onLoad，但是 mpvue 返回後頁面沒有銷燬，資料會快取，所以進入頁面我們需要重置資料。

    onLoad() {
      // 解決頁面返回後，資料沒重置的問題
      Object.assign(this, this.$options.data());
    },
    methods: {
     
    },

相關文章