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

夏日小可發表於2018-04-24
微信小程式Vue

前言

作為一個專業踩坑各種小程式框架(原生,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.

相關文章