如何愉快的使用mpvue开发小程序

mpvue （github 地址请参见）是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

1、熟悉vue

首先mpvue是基于vue实现的一套能够在微信小程序上跑起来的框架。因此，如果你开始准备使用mpvue开发小程序，而且，如果你恰好有vue开发的经验，那么可以略过下面这个链接，因为它就是将vue基础的。然而，如果你和笔者一样，之前没有任何vue开发的经验，那么，请你一定要好好看看这个链接，最好通读个一两遍，抓一下简单的例子试一试，反正绝对不会怀孕。这里强调一下，主要理解什么是v-model,什么是v-on,什么是emit，什么是v-if，什么是v-for，什么是v-text与{{}}，什么是自定义组件，如何应用等。

image.png

https://cn.vuejs.org/v2/guide/

2、遵循vue的风格

熟悉了vue就够了么，我们不是还要追求性能么，还要追求优雅么，还要追求稳定么，还要...，对了，写vue要遵循他的一些风格，以及一些这样可以做到，那样也可以做到，那么到底哪种方式是最好的，最不容易出错的，最好维护的的，嗯，只有遵循了这些style，你才不至于坑你自己，坑你队友，这里强调一下，那些他提到的必须做到的一定要遵循，不然会有大坑等着你，比如我就被data坑过，data就一定要写成函数返回，不然，你如果在自定义组件中使用，那么所有的组件就共享一份数据了，一改都改，还有就是v-for一定要给一个key，而且这也是微信小程序强制要求。

image.png

https://cn.vuejs.org/v2/style-guide/

3、了解小程序框架

如果你熟悉了小程序框架，这部分直接忽略掉。如果没有，这里将带你了解小程序组件，注意，他并不是dom，因此与H5有相当多的不同，这也就是你把H5跑的好好的js代码直接copy到小程序中，跑步起来的间接而非直接原因，再者，这里也像你透露了一下api，比如持久化，媒体之类的，稍稍了解下就好，使用的时候对照文档来写，并非难事。

https://developers.weixin.qq.com/miniprogram/dev/index.html

4、熟悉es6

如果你喜欢写es5，不喜欢用promise，import，async，等好用到哭(别的语言早就有，而js没有)的一些特性的话，那我也拦不住你，你可以不去了解他，然而，你也不可能用mpvue用得很爽，因为这里都是用es6来写的。那么，推荐阅读阮大大的神作。

image.png

http://es6.ruanyifeng.com/

5、最后是了解一下mpvue框架

这部分当然是最最简单的 ，内容非常上，但是我们要重点注意一下不支持的，以及同样是最佳实践。当然你也完全可以不关心这些，直接上架，那么等你遇到坑的时候在来看这里，你会狠狠的骂自己，哦，然来这些是不支持的啊，为什么不支持，很简单，传统的web和小程序在底层试下上本身就不同，比如，v-html就没有效果，html很多标签小程序就没有，你让它怎么支持，因此，我是强烈建议你通读一下。

image.png

http://mpvue.com/mpvue/

6、参考工具

这里是补充，是优化，可以不精通，但一定要了解，比如，css一些基础只是 ,line-height 啊，盒子模型啊，flex布局啊 ，那么参看哪里。

• css参考 https://developer.mozilla.org，为什么说这里，因为这里直接不仅给出了解释，而且给出你直接的展示效果，对于理解记忆css来说，简直是最好的方式，没有之一，比如你想了解 display:flex 就可以看https://developer.mozilla.org/en-US/docs/Web/CSS/flex,其他的就不一一解释，对了，他还提供了搜索功能。
• mpvue一些工具及示例，这里有人已经收集了https://github.com/mpvue/awesome-mpvue，内容相当体贴，有效率的，还有ui之类的，还有一些成熟的网络请求库。
• css，js等在线验证的网站https://codepen.io/

7、我说说我遇到的坑。

• 引入第三方库的坑，注意，因为有很多第三方库并非是适配了mpvue的，因为引入的时候最好能和作者了解下，或者只引入那些明确说明支持mpvue的。而且还要注意import的方式。
• 新增页面需要重新npm run dev ,不然，你这个页面不会被热加载的。
• 关于调试，是可以直接在chrome上断点.vue文件的，在source的webpack目录下找就是，这点其实在文档中有介绍，如果仔细阅读文档，一定能看到。
  

  webpack
• 下拉刷新，上拉加载同时需要的话，应该使用wx中的page里面的回调接口做，参考这里，我验证了这里的说法，是靠谱的https://juejin.im/post/5a781c756fb9a063606eb742
• 对于要使用webstorme开发的小伙伴，可以关注一下这个issue https://github.com/YutHelloWorld/Blog/issues/8的配置，可以直接使用它的setting配置ide，个人觉得风格比较接受。
• 微信使用rpx，但是貌似webstorme貌似并不买账，每次格式化，都会在数字和rpx之间出现一个空格，这很恼火，解决的办法，就是利用webstorme的File Watchers结合sed命令来把多余的空格去掉sed -i "" s/"\ rpx"/rpx/g $FilePath$。当然，有人说可以使用scss或者less来避开https://blog.csdn.net/wyk304443164/article/details/78084276
  

  image.png
• 发现wx原生的api调用一般会出现回调地狱，怎么解决， 请看这里https://github.com/youngjuning/wxPromise/issues/19,我是直接按照这个提问者解决的，没有引入库。

8、参考资料

• https://github.com/zxj5470/wx.d.ts
• https://zhuanlan.zhihu.com/p/35604120