胡成全:使用 Mpvue 开发微信小程序实战解析

向作者提问
美团技术团队官方账号
查看本场Chat

2018年5月2日,周三晚上8点30分,美团点评酒旅事业群前端专家,目前主要从事移动端和小程序技术方向,致力于小程序的工程化开发和业务级应用的胡成全带来了主题为《使用 Mpvue 开发微信小程序的最佳实践》的交流。以下是主持人天怡整理的问答实录,记录了作者和读者间问答的精彩时刻。


内容提要:

  • 请问用 Mpvue 开发小程序的具体操作是什么?
  • 小程序开发可以用 react 吗?
  • 我用 Win7(32位)运行 npm install --global vue-cli 时,遇到某些问题后就没有反应了,请问这是什么原因?
  • 请问 Mpvue 的组件现在完成度怎么样?对 slot 的支持怎么样?能写出类似 elementui 这样的应用框架吗?
  • 对于会 Angular 的前端开发人员来说,Mpvue 容易学会吗?有没有比较好的学习建议?
  • 使用 Mpvue 开发小程序,对生产环境有什么特殊的配置要求或步骤吗?
  • 为什么选择 vuejs 而不选择 react 或者 angularjs?
  • 如何保证用 Mpvue 开发的程序能够和微信的风格保持一致?如果没有满足自己要求的微信小程序的 css 样式的控件,如何自己定制?如果自己定制,如何保持和微信本身提供的控件或者样式是一样的风格?
  • 能详细描述一下 Mpvue 的内部实现,以及和编译原理之间的关系吗?还有使用这个开发框架是不是会降低产出小程序的性能?
  • 请问 Mpvue 和 wepy 的优劣势以及以后的发展是怎样的?
  • 请问 Mpvue 如何将 vuejs 语法编译成微信小程序的语法?
  • 现在 Mpvue 好像还没有支持直接 build 成 H5 的能力。因为本身是基于 vue-cli 的,请问之后会支持这样的能力吗?可能实现一套代码小程序和 Web 端共用吗?
  • v-for 后会产生一个警告要加 wx-key,怎么解决?
  • 请问有没有搜集过其他的微信小程序开发框架,你觉得 Mpvue 能够保持常胜的决胜点是什么,或者自己的优势在哪里?

问:请问用 Mpvue 开发小程序的具体操作是什么?

答:如果只是开发,先找到我们的官网,定位到快速上手的文档介绍http://mpvue.com/mpvue/quickstart/按照操作顺序构建好代码,打开小程序开发者工具,导入构建好的目标代码即可。

后续的代码组织方式参考 vuejs 规范即可,注意区别小程序和 H5 的平台差异。对前端开发或者小程序不熟悉的同学,可能需要了解一下前端的一些开发习惯,譬如 nodejs, npm,微信小程序,vuejs。


问:小程序开发可以用 react 吗?

答: Mpvue 开发小程序是使用 vuejs 语法规范,不能直接使用 react。如果有人实现与 Mpvue 类似的 mpreact 框架,那就可以了,但目前还没听说,或者有同学已经在实现中了。


问:我用 win7(32位)运行 npm install --global vue-cli 时,遇到如图所示问题,之后就没有反应了,请教这是什么原因?

答:看起来是开发环境的设置问题,查看具体的报错原因,在网上根据关键字查询一下应该就有答案了,可以清理一下本地包缓存重试一下。这个问题还没有涉及到 Mpvue,我就不在群里单独回答了。


问:请问 Mpvue 的组件现在完成度怎么样?对 slot 的支持怎么样?能写出类似 elementui 这样的应用框架吗?

答: Mpvue 支持 vuejs 的单文件组件规范,这也是我们官方推荐的使用方式。熟悉 vuejs 的同学已经长期受益了,没使用的同学希望尽快体验。Mpvue 对 slot 的支持程度目前还有一些不完善,目前对一些简单的纯展示型场景没问题,更复杂的场景建议慎用。大家也请多关注一下我们的 issue 列表,避免少走弯路。对 slot 的支持我们已经列入计划,请大家关注我们日常的版本发布,我们会及时在 github 和技术交流群中同步和大家交流。能力上可以基于 Mpvue 写出 UI 框架,这没任何问题。


问:对于会 Angular 的前端开发人员来说,Mpvue 容易学会吗?有没有比较好的学习建议?

答: Mpvue 对前端开发同学来说都不是难事,前端技术本身并没有那么明显的分界。只是对 ng 背景的同学来讲,技术栈没有延续性,需要重新学习 vuejs 框架。分两个方面,可以通过微信小程序官方文档熟悉小程序,通过 vuejs 官网熟悉 vuejs,本身 Mpvue 的内容极少,并没有创造新的规范。Vuejs 的技术积累基本上可以平移到小程序。


问:使用 Mpvue 开发小程序,对生产环境有什么特殊的配置要求或步骤吗?

答:并没有特殊要求,但开发者可以自己在构建中添加了配置,方便不同环境的调试或者问题排查。


问:为什么选择 vuejs 而不选择 react 或者 angularjs?

答: Mpvue 本身是从我们业务项目中沉淀下来的,最开始是为了解决我们自己的业务需求。我们当的技术选型是 vuejs。


问:如何保证用 Mpvue 开发的程序能够和微信的风格保持一致?如果没有满足自己要求的微信小程序的 css 样式的控件,如何自己定制?如果自己定制,如何保持和微信本身提供的控件或者样式是一样的风格?

答:这个问题主要由视觉设计和产品决策,前端编码实现。小程序开发和前端开发在这一点上并无不同。视觉开发遵循 css 规范即可,注意区分 wxss 和 css 本身的区别,有部分语法 wxcss 不支持,Mpvue 在代码编译阶段会将其过滤。


问:能详细描述一下 Mpvue 的内部实现,以及和编译原理之间的关系吗?还有使用这个开发框架是不是会降低产出小程序的性能?

答:内部实现在这里不适合展开,简要信息我在 GitChat 文章中有所提及,如果感兴趣可以分析一下源码。Mpvue 本身的实现并没有用到编译原理知识,只是在改造 vue-loader 的过程中对抽象语法树有一些特定操作。关于性能方面,使用任何框架,都会带来性能损耗,我们对比过原生和 Mpvue 两种方式的超长列表,Mpvue 本身的性能损耗并不明显。


问:请问 Mpvue 和 wepy 的优劣势以及以后的发展是怎样的?

答: Mpvue 最大优势就是最大程度复用 vuejs 及其周边的基础设施,不创造新的规范,让大家尽可能地减小学习成本。关于这一点,我在历次的文章中都有介绍到,可以关注一下往期的文章。今后的发展是长期维护,争取将 Mpvue 建设成最流行的小程序开发框架,完善周边的生态和基础设施,为小程序提供技术支持。


问:请问 Mpvue 如何将 vuejs 语法编译成微信小程序的语法?

答:简要来说,延续 vuejs 的实现方案,通过 mpvue-loader 将 Mpvue 的目标文件 xxx.vue 解析成抽象语法书,获取到所有的代码信息,将不同的代码解析转换输出到不同的文件中:xxx.js, xxx.wxss, xxx.wxml, xxx.json,不同类型的文件有不同的具体实现规则。内部实现细节太多,无法一一展开,大家感兴趣的可以了解 vue-loader,mpvue-loader。


问:现在 Mpvue 好像还没有支持直接 build 成 H5 的能力。因为本身是基于 vue-cli 的,请问之后会支持这样的能力吗?可能实现一套代码小程序和 Web 端共用吗?

答:目前还没有这样的强需求,并没有列入到靠前的优先级列表中。Mpvue 实际上做了最关键的异步,使得两端的代码规范趋于一致,剩下的改造应该不大,但同样取决于具体的代码实现。实际上要实现一套代码同时适用 H5 和小程序,会需要舍弃或者较大的工作量,比如平台差异的抹平和适配。


问:v-for 后会产生一个警告要加 wx-key,怎么解决?

答: Mpvue 中的循环语法,可以通过 :key 指令来指定 wx-key。如果没指定,可能会有潜在的性能问题,因此,微信提示警告信息,通过上述指令指定即可。


问:请问有没有搜集过其他的微信小程序开发框架,你觉得 Mpvue 能够保持常胜的决胜点是什么,或者自己的优势在哪里?

答:优势在前面的问题中已经提及,我们会调研其他小程序开发框架。Mpvue 最大的优点是集成了优秀的解决方案,我们只是把他们集合到一起,并没有选择“苦哈哈”的方式去定制和实现一套复杂的语法规范。


本文首发于 GitChat,未经授权不得转载,转载需与 GitChat 联系。


在此感谢异步社区为本次活动提供的赠书《JavaScript 忍者秘籍(第2版)》。

异步社区是人民邮电出版社旗下 IT 专业图书旗舰社区,也是国内领先的 IT 专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架。

微信扫描登录