mpvue踩坑之旅

[zjq1394288160]

缘起

写小程序要追溯到2018年11月，公司有个需求，要在两周内上架一款小程序，斟酌再三，选择代价更小的mpvue。这篇文章是基于有一定vue使用经验的童鞋。

--------------华丽的分割线-------------

生命周期

让我们先来看一下mpvue官网的图

通过上图我们可以得出页面生命周期执行顺序如下：(很重要，做小程序一定要明白的知识点)

• beforeCreate
• created
• onLoad
• onShow
• onReady
• beforeMount
• mounted

遇到的问题集锦

1. 不支持v-html。总所周知小程序没有dom这个概念。

2. 不支持部分javascript渲染表达式，如：(方法的调用，过滤器，判断，运算等等)。

   <p>{{filter(value)}}</p>
   <p>{{ status | statusName }}</p>
   <div v-if="number>0" class="error">{{ errorMsg }}</div>
   <span>{{ value.split(',').length }}</span>

3. 不支持绑定一个对象到style或class

   
   <div :class="classObj" :style="styleObj"></div>

export default { data() { return { classObj: { isShow: true }, styleObj: { 'height': '100px' } }

4. css中background背景图片尽量使用服务器上的地址，本地小图可以显示，大图不显示。

5. 不支持transition和keep-alive组件

6. 不能使用vue-router，可以用wx.navigateTo、wx.redirectTo等等来代替，或者使用插件[mpvue-router-patach](https://github.com/F-loat/mpvue-router-patch),用vue-router的方式跳转。

7. mpvue路由跳转，在文件目录src——>app.json设置页面的跳转，具体写法和小程序中的一样，是每个页面中的main.js,而不是index.vue,所以跳转的路径就写'pages/index/main'，
注意switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面，跳转带有tab的页面，如下：

wx.switchTab({ url });

8. 同一组件内嵌套的 v-for 不能连续使用相同的索引。( i, index区分开)

...

9. 详情页数据保留之前旧数据的问题
- 因为mpvue类似多页面，页面跳转后并没有销毁页面实例，而是推入页面栈中，会保存之前的旧的数据，使用应该在onUnload生命周期的时候重置页面数据。如下：

onUnload() { if (this.$options.data) { Object.assign(this.$data, this.$options.data()); } }

10. 小程序原生发送请求是通过的wx.request来进行数据交互，但用起来没有axios好用，而axios又不支持小程序环境，于是[fly](https://github.com/wendux/fly)出来了,使用起来和axios一样，拦截器非常好用，强烈推荐。当然有人还想用axios，就提出了比较hack的方法，比如修改axios的适配器，如下：

axios.defaults.adapter = function (config) { return new Promise((resolve, reject) => { console.log(config) // TODO wx.request() }) }

如果觉得上述方式不喜欢可以使用小程序的请求方式小程序的原生API wx.request的方式进行

11. mpvue页面跳转与传值

// 法 1 var url = "../index/main?id=" + this.option wx.navigateTo({url}) // 法 2 <navigator url="'../index/main?id='+id>

// 法 1 onLoad (options) { let id = options.id } // 法 2 this.$root.$mp.query.id // $mp必须加，相当于mpvue包了一层

12. 新添加的页面需要手动 npm run dev 一下，因为 webpack 编译的文件使用配置的 entry决定的，新增的页面并没用添加进 entry。

13. 在mpvue中引入小程序 ui框架 我用到了iview weapp，就用iview举例，在官网上下载全部组件将 dist文件下的文件拷贝到自己的项目中
一定要放在 static 文件夹下，如下：
![企业微信截图_15859035708763](https://user-images.githubusercontent.com/29228111/78341728-c0666100-75ca-11ea-8821-23b3444c7958.png)

在用到的组件在页面中的main.js中添加，如下代码
![企业微信截图_158590383122](https://user-images.githubusercontent.com/29228111/78342071-4bdff200-75cb-11ea-91ce-c0a334c4adcd.png)

就可以在页面中直接使用了，如下
![企业微信截图_15859039159249](https://user-images.githubusercontent.com/29228111/78342159-70d46500-75cb-11ea-8795-3d37cbf7c3f1.png)

14. mpvue使用小程序的上拉刷新，下拉加载，需要注意的是，必须在当前页面的main.json中配置
main.json

{ "navigationBarTitleText": "", "enablePullDownRefresh": true,// 必须要写的配置 "backgroundColor": "#fff" }

js

// 和methods平级 onPullDownRefresh() { // 下拉刷新 todo }, onReachBottom() { // 上拉加载更多 todo }

15. wx.navigateto官方文档是说目前可以返回10层，实际情况是在某些机型上只能返回5层，所以只建议跳转5层，尽量减少 使用次数，有特殊情况可以用如下代替：

// 法 1 wx.navigateBack({ delta: 1 }) // 法 2 wx.redirectTo({ url })

所以最好使用wx.navigateto跳转不超过5层
16. 因为公司要新开项目，另一个新来的前端同事要维护旧项目，然后就开个新分支，任何代码也没改，重新下载依赖，然后报错跑不起来了，如下：

Failed to compile with 16 errors 10:34:43

error in ./src/main.js

Module build failed: Error: [mpvue-loader] need "fileExt" option in file "build/vue-loader.conf.js"，init a new project and copy the directory "build/" to this porject, or just check the "fileExt" option at Object.module.exports (E:\git\mini_nr\mini20190104\node_modules_mpvue-loader@1.2.2@mpvue-loader\lib\loader.js:55:11)

最后通过mpvue官方github的issues定位到了问题，是因为mpvue升级了2.0的缘故，[详情](https://github.com/Meituan-Dianping/mpvue/issues/1384)，mpvue2.0新增对头条、百度、支付宝小程序的支持。解决方案就是mpvue2.0升级指南[点击](https://github.com/Meituan-Dianping/mpvue/releases/tag/2.0.0)，如果只做微信小程序，当然也可以通过锁定版本解决问题。如下

"mpvue": "1.0.18", "mpvue-loader": "1.1.4",
"mpvue-template-compiler": "1.0.18"

17. Cannot assign to read only property 'exports' of object '#<Object>' 编译报错，这是因为引用第三方插件的时候,使用了module.exports的写法， webpack支持require的写法，但不能混合使用import 和module.exports。 [相关issues](https://github.com/Meituan-Dianping/mpvue/issues/472)解决方案是更新根目录下的.babelrc文件配置如下：

{ "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"] } } }

### 不定期更新 。。。。