微信小程序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.