首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序开发框架WePY和mpvue使用感受

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

作者头像
江南一点雨
发布2019-05-07 15:19:58
1.3K0
发布2019-05-07 15:19:58
举报
文章被收录于专栏:玩转JavaEE玩转JavaEE

今天想和小伙伴聊聊小程序开发框架的问题。 种种原因,去年年末接触到了小程序,使用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是很简单的。
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-03-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 江南一点雨 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.主人公介绍
    • 1.1 WePY
      • 1.2 mpvue
      • 2.使用体验
      • 3.总结
      相关产品与服务
      云开发 CloudBase
      云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档