mpvue (github 地址请参见 https://github.com/Meituan-Dianping/mpvue)是一个使用 vue.js https://vuejs.org/ 开发小程序的前端框架. 框架基于 Vue.js 核心, mpvue 修改了 Vue.js 的 runtime http://mpvue.com/mpvue 和 http://mpvue.com/mpvue-template-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
来源: https://www.qcloud.com/developer/article/1158984