【开源】高效复用代码至小程序,你只要会Vue.js就可以

编者按:

2018年3月8号,美团点评宣布其研发、运维了近一年的小程序开发框架mpvue(mini program vue)正式开源,在前端界引起不小的反响,Star数量高达7700,仅次于微信官方推荐的框架wepy。同时,mpvue的用户量打破了美团点评分布式监控系统CAT保持多年的记录,一跃成为公司最大的开源框架。

美团点评是最早受邀接入小程序的公司之一,早在2017年1月小程序于微信客户端正式上线之前,公司里的一些部门就已经开始实践小程序开发了,胡成全所在酒店旅游事业群下的美团酒店小程序就是其中一员。

在小程序建设之初,通过详细了解小程序技术特点,酒旅团队就设想了将H5的产品功能快速迁移到小程序的可行性,但由于当时的开发社区和小程序官方都还没有对应的解决方案,人工做迁移的成本相几乎等同于重新开发。

当时社区的最佳解决方案是 wepy 小程序组件化开发框架,但由于技术栈差异,美团酒旅基于 Vue.js 的代码无法通过 wepy 得到复用。在和 wepy 开发者交流后了解到 wepy 短期内没有支持 Vue.js 的计划(目前已经大范围支持),于是他们决定自己做一个代码转化工具,这就是 mpvue 的雏形。

工具详情复制链接:http://mpvue.com/ 至浏览器查看。

那么 mpvue 究竟能为小程序开发提高多少工作效率呢?用胡成全本人的话说:“以酒旅旗下一款相对复杂的火车票抢票的小程序为例, mpvue 的开发耗时相比原生开发方式的估时提升了 54% 的开发时间”。

你一定很好奇,这个工具提升了开发效率,但是做这个工具本身不也是一件很耗时的事情吗?胡成全表示,这个工具的想法是从2017年3月就有了,但 mpvue 本身的开发周期,是7月到8月中旬大约一个半月的时间。

接入成本:只要你会Vue.js

mpvue 对用户来说有一个很赞的地方,就是它对 Vue.js 的语法支持程度能做到 90% 以上。

Vue.js 是目前最流行的前端框架之一,GitHub 上Star 数量超过9万,在社区有着大量的使用者。胡成全表示mpvue 框架开源后能够获得广泛认同和使用的原因,一方面源自于小程序社区的活跃度,另一方面也来源于对 Vue.js 开发者友好的技术选型。

在对框架的能力设计上,mpvue 会尽可能多地适配和复用了Vue.js 解决方案,包括代码构建、文档的支持等,这使得原本熟悉 Vue.js 的开发者,在切换到 mpvue 的时候基本上可以做到零成本,不用再去学习另外一套框架规范。

mpvue 选择 Vue.js 作为小程序开发规范,但同时也支持微信小程序的原生开发方式,因为对小程序开发框架来说,无论是 mpvue 还是 wepy,最终编译出来的代码都必须符合小程序语法规范,区别在于引入的框架不同,从这个角度上来说,mpvue 的代码跟微信官方推荐的代码是有差异的,只是开发者可以不用关注这部分细节。

哈?你说你不会Vue.js?去学吧,就算不为了用mpvue…… 总有一天你会明白它的好~

挑战wepy,mpvue的优势在哪里?

对比 wepy,mpvue 的优势在哪里?

关于mpvue和wepy的异同,一张表可以看清:

mpvue 的核心优势是相对于 wepy,它和 Vue.js 结合的更好,对 Vue.js 的语法支持程度更高,通过引入 Vue.js 内核的的方式在框架底层对语法特性做直接支持,设计思路上要做得好一些。

wepy 是微信官方推荐的小程序的框架,早在2017年的时候就已经得到广泛使用,为小程序开发社区提供了巨大的帮助,有着长期的沉淀和稳定的用户群体。目前 wepy 的使用率和知名度高于 mpvue,但 mpvue 的初衷是为社区提供更多的选择,让小程序开发更容易,为社区带来美团点评的善意。

总的说来,两个框架要解决的问题是相当的,差异在于核心侧重点和技术实现上。wepy 最初的定位是提供小程序的组件化开发能力,同时对小程序本身的能力限制做了大量的补充和完善;之后对 Vue.js 语法进行了大量的适配支持,但这需要巨大的开发量。mpvue 初期也调研过这个方案,但很幸运的是mpvue成功的引入了 Vue.js ,在这个过程中, 不爱吃西红柿的鱼,和 @aOrz 两位核心开发同学做了大量的调研和关键技术突破。

关于开源

胡成全团队之前一直在考虑是否要将 mpvue 开源,方案完成之初,也一度觉得这套方案的设计思路和最终效果良好。

但是开源能够给团队带来什么?提升公司品牌形象、提升团队影响力、吸引更多的求职者加入……

但是否也可能会引入一些其它问题:社区支持需要一定投入,对团队工作安排有一定考验,更坏的情况是方案认可度不高,对团队形象反而是灾难。

但深思熟虑之后,我们达成一致选择了开源。

事实证明,开源是一件互利共赢的事。一方面,mpvue 开源后在小程序开发社区有大量的关注和使用,提高了小程序开发效率,为社区带来了便利。同时,社区也为 mpvue 提供了大量的建议,对 mpvue 的优化起到关键作用,目前 mpvue 团队已经发展了一批志同道合的朋友参与技术共建,mpvue 衍生的周边建设也逐渐开始丰富起来。

本文分享自微信公众号 - GitChat精品课(CSDN_Tech)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-17

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding

vue.js进行数据监听

14130
来自专栏程序员的碎碎念

【分享】Vue.js新手入门指南

最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学...

49030
来自专栏JackeyGao的博客

使用Vue.js 和 semantic-ui 的一个简单TODO List

这是一个完全仿照官网案例的项目, 主要为了熟悉vue.js的基本用法, 不得不说这个案例能吸收到基本的vue.js 操作.

19420
来自专栏程序员宝库

vue-cli 脚手架中 webpack 配置基础文件详解

vue-cli是构建vue单页应用的脚手架,输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用,它使得我...

33830
来自专栏coding

vue.js动画中的js钩子函数

在transition中还可以通过设置javascript钩子函数,实现自定义动画效果。

14930
来自专栏coding

vue.js组件初探

一个页面的ui可以切割成由不同的组件构成,这些组件毕竟独立,这样拆分的好处在于可以做到如同堆积木般快速将页面搭建及重构

10620
来自专栏.NET开发者社区

(码友推荐)2018-07-26 .NET及相关开发资讯速递

8.Data Breakpoints - Visual Studio 2017 15.8 Update

17360
来自专栏pangguoming

vue2.0路由-适合刚接触新手简单理解

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路...

10030
来自专栏闰土大叔

入职第三天:vue-loader在项目中是如何配置的

这是我入职第三天的故事,在写这篇文章之前,先来看看咱们今天要讲的主角——vue-loader,你对它了解多少?

12910

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励