微信小程序mpvue(沒朋友)踩坑指南

前言

做爲一個專業踩坑各類小程序框架(原生,wepy,web-view)的前端小白鼠來講,第一次見到mpvue仍是蠻興奮的,畢竟能夠無縫對接Vue,大大下降了小程序的學習成本.綜合對比一下幾個框架的優劣,堅決果斷的選擇了mpvue來開發小程序,下面是個人踩坑指南,不正確的地方,但願你們斧正.

踩坑指南

1.Cannot assign to read only property 'exports' of object '#<Object>' 編譯報錯

這是由於引用第三方插件的時候,帶入了module.exports的寫法,webpack可使用require和export ，可是不能混合使用import 和module.exports,你須要作的是更新根目錄下的.babelrc文件配置

vue引入插件Cannot assign to read only property 'exports' of object

{
    "presets": [
        ["env", {
            "modules": false,
            "targets": {
                "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
            }
        }],
        "stage-2"
    ],
    "plugins": [
        ["transform-runtime", {
            "polyfill": false,
            "regenerator": true
        }]
    ],
    "env": {
        "test": {
            "presets": ["env", "stage-2"],
            "plugins": ["istanbul"]
        }
    }
}

複製代碼

2.掛載在Vue.prototype上的屬性，在模板語法裏面是undefined，必須通過computed計算過一下才能用。via@noahlam

import config from './config'
Vue.prototype.$serverPath = config.serverPath
複製代碼

在頁面中這樣使用

<img :src="$serverPath + 'logo.png'" />
複製代碼

編譯以後會變成這樣的狀況

<image src="undefinedlogo.png" ></image>
複製代碼

你須要作的是,在每一個使用的頁面computed裏面返回this.$serverPath

3.相對路徑的圖片不顯示,好比

<img src="../../images/LOGO.png">
複製代碼

解決是:把路徑import進來,或者是把圖片放在static目錄下引用,然而做爲css background-image引用時,只能選擇引用遠程圖片,或者相對目錄小於8k(webpck配置有關)的圖片,否則編譯器會報錯

<template>
    <div>
        <div class="test"></div>
        <img :src="imgUrl">
    </div>
</template>

<style>
.test{
    width: 48rpx;
    height: 48rpx;
    background-image: url("../../img/a.png");
}
</style>

<script>
import imgUrl from '@/img/a.png'

export default {
    data() {
        return {
            imgUrl
    }
}
</script>
複製代碼

4.子組件數據檢測的問題

好比我在某個頁面引用了這樣的一個組件,綁定數據myOrderList,同時我引入了vuex來作狀態管理,管理myOrderList對象

### A頁面中
 <order :isEnd="isEnd" :orderList="myOrderList"></order>
 
### B頁面中更新"myOrderList"對象

this.$store.commit('updateList', {data: this.orderList});
複製代碼

當A頁面再次顯示的時候,子組件的數據流沒有更新,打印myOrderList對象都有更新.個人解決辦法是,先把myOrderList賦值爲空,而後再次賦值store.state中的對象,問題就解決了.估計是mpvue的數據檢測機制有問題,說得不對的地方但願大佬們斧正.

5.原生組件引入的問題,參考在mpvue 使用 echarts 小程序組件,官方的文檔已經很詳細了,我這邊說幾個要點:

• ready 爲異步獲取數據。
• 爲 init 添加接收 options 傳參
• page目錄下main.js須要添加 usingComponents: {'ec-canvas': '../../../static/ec-canvas/ec-canvas'}
• 須要放在static目錄下

第一條和第二條尤其重要,你們切記

總結

畢竟一個框架剛剛出來,有各類各樣的坑,但願你們多多給官方提PR和Issues.