小程序开发框架WePY和mpvue使用感受

今天想和小伙伴聊聊小程序开发框架的问题。 种种原因,去年年末接触到了小程序,使用mpvue做了两个项目,也使用WePY做了一个项目,关于这两个框架的恩恩怨怨,我觉得我有资格说两句。

1.主人公介绍

首先来看看这两个框架分别是什么来头:

1.1 WePY

WePY是腾讯官方搞的小程序框架,如果仅从GitHub上star数来看的话,目前在小程序开发框架中排第一,不过和mpvue的star数已经从之前的1k缩小到现在的500了,WePY主要有如下一些特点:

  • 类Vue开发风格
  • 支持组件化开发
  • 支持使用第三方NPM资源,可以自动处理资源之间的依赖关系
  • 支持Promise,开发者可以自由决定是否使用Promise
  • 支持ES2015语法
  • 对小程序本身的优化
  • 在编译器方面,支持Less/Sass/Styus/Babel/Typescript等
  • 框架最小只有24.3KB

对于熟练使用Vue.js的开发者而言,在第一次使用WePY时,往往会被它的类Vue开发风格所迷惑,这种开发风格和Vue.js很像,但是你要是按照Vue.js的经验来开发,往往就掉坑里了。

1.2 mpvue

mpvue,mp是指mini program,就是小程序。mpvue虽然不像WePY那么根正苗红,但也是大厂出身,由美团提供,去年和WePY在GitHub上的star数一直保持在1k左右的差距,最近缩小到500左右了,mpvue主要有如下一些特点:

  • 彻底的组件化开发能力:提高代码复用性
  • 完整的 Vue.js 开发体验
  • 方便的 Vuex 数据管理方案:方便构建复杂应用
  • 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
  • 支持使用 npm 外部依赖
  • 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
  • H5 代码转换编译成小程序目标代码的能力

除了这些特性之外,mpvue还提供了相关的配套设施:

  • mpvue-loader 提供 webpack 版本的加载器
  • mpvue-webpack-target webpack 构建目标
  • postcss-mpvue-wxss 样式代码转换预处理工具
  • px2rpx-loader 样式转化插件
  • mpvue-lint 开发辅助插件,包括语法检查,内存检查等功能

2.使用体验

由于我在接触小程序之前,Vue.js已经用的相对来说比较熟练了,因此做小程序时也纠结了好久,网上的对比文章虽然写的很清楚,但是自己没用过总是不知道哪个更好用,后来还是决定先用mpvue试水,使用mpvue,也是因为当时手头上有一点mpvue的资料,就想着用mpvue了。

有Vue.js基础,使用mpvue上手就非常快了,甚至可以直接开写了,这也是我后来总结mpvue最大的优势,就是完全的Vue.js开发体验。mpvue的一个宣传点就是Web端和小程序一致的开发体验,实际并不见得,对于一些简单的HTML标签,例如 div/li/p/ul/span等,这些确实编译器可以帮助开发者顺利完成转换,但是对于一些复杂的组件,例如 picker/picker-view/swiper等组件,完全没办法直接用相应的HTML标签来实现,这些组件在具体使用过程中,还是需要参考小程序原生组件的用法,只不过相关的变量动态赋值以及事件绑定可以按照mpvue的方式来,从这个角度来看,网上一些被人追捧的一端多跑的框架实际上效果有限。

说到一端多跑,就想起我读书那会,那会流行的一端多跑方案是PhoneGap,那个东西在iOS上跑还行,在低端Android机上卡的要死,实在没法用,从那以后,对各种一套代码n多平台的说辞实在难以恭维!

当我用mpvue写完项目后,在网上浏览小程序相关职位时,大部分都要求会WePY,mpvue在职场上貌似还没能碾压WePY,当时刚好又有一个新项目,于是撸起袖子决定用WePY搞一搞。

使用WePY开发,除了遵循WePY的语法外,仍然可以保留小程序原生的开发方式,我第一次使用WePY确实踩了不少坑,有的是真坑,有的是自己盲目乐观导致的坑,其中最大的问题就是被类Vue开发风格所迷惑,这个代码看着像Vue.js,就想按照Vue.js的套路来,结果写出来却不能运行,实在头大,后来用久了慢慢就熟悉里边的条条框框了,其实如果你不懂Vue.js的话,首次使用WePY可能会反而顺利些。

3.总结

如果你像我,做后端,但是Vue.js也搞,那么使用mpvue可能会更顺手一些,如果你已经懂小程序原生开发了,对Vue.js了解一般般的话,那么WePY可能上手快。如果你压根还没搞过小程序,那么我给的建议是 原生->WePY->mpvue这样一个学习顺序,原因如下:

  1. 无论用什么框架,小程序本身的一些原生控件、API以及框架都无法绕过,从原生开发方式开始学习,有助于你更好的理解WePY和mpvue的工作方式。
  2. 就像Java中的SpringBoot,用了Spring Boot,你依然不可避免的要用到HttpServletRequest,HttpServlet、Filter等这些基础组件,小程序中也是一样,用了WePY或者mpvue框架之后,一些原生的API,控件等,依然需要会用。
  3. 有了小程序原生开发的基础后,再来使用WePY,上手是比较快的,因为使用WePY时,除了遵循WePY语法外,原生的语法规则也是支持的。
  4. 前面两个都搞通了,再来搞mpvue,就会容易很多了。其实只要前两个搞通了,Vue.js基本语法掌握后,mpvue是很简单的。

原文发布于微信公众号 - 牧码小子(a_javaboy)

原文发表时间:2019-03-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券