前言
作为一个专业踩坑各种小程序框架(原生,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.