小程序开发框架技术分析选型

1. 前言

从16年微信小程序内测的时候到如今,微信小程序用时间与实践证明了自己的变革与价值,微信小程序的规则也在开发社区的影响下变得更加完善。

对于第三方企业来讲,微信为自己带来了巨大的流量入口和低成本的拉新渠道,如滴滴、美团、京东等公司都推出了自己的小程序。像共享单车类的企业,微信是绝大多数用户的二维码扫码入口,小程序为其带来了巨大的流量入口,如摩拜单车。

对于小程序开发者来说,小程序的开发生态不断地在完善,从最开始的原生框架,到腾讯自己开发类vue规范的wepy,再到美团开发近vue写法的mpvue,再到最近O2实验室刚推出的遵循React规范的Taro

所有到现在,有多种开发微信小程序的方式,主要有原生,wepy,mpvue,Taro,4种框架,对比分析也是在这4种方式中。

2. 框架对比与分析

面对4种开发方式,我们到底应该选择哪种呢?首先当然是对各种框架进行对比分析,从开发工具便利上,开发方式上,应用状态管理上,社区活跃程度上(开源UI库等)

2.1 开发工具工程化上

  • 开发工具上:都需要微信开发者工具来调式,对于写代码的话,尤其我们前端开发来讲,21世纪最有良心的编辑工具无疑是微软出品的vscode,代码高亮的话,都需要相应的配置,具体怎么配置,可以网上搜(或者看各个开发方式的官方文档)。

  • 工程化上: 微信小程序本身对工程化几乎没有任何的支持,要原生框架支持工程化的话,需要自己动手搭建很多工程化上的东西-他人搭建的demo wxapp-redux-starter,wepy有自己的wepy-cli,而mpvue和taro则很好的支持我们熟悉的webpack灵活定制(像语法检查,热更新等等)

2.2 开发方式上

原生开发:
我们需要全新学习小程序的抒写格式,目前版本模板中支持 slot,但是不支持 npm 包。原生不支持 css 预处理器,但是 vsCode 中 Easy WXLESS 插件可以将 less 文件自动转换为 wxss 文件;

wepy:
我们需要熟悉 vue 和 wepy 两种语法,支持 slot 组件内容分发插槽,支持 npm 包,支持 css 预处理器;

mpvue:
我们需要熟悉 vue ,目前版本(v1.0.13)不支持 slot ,支持 npm 包,支持 css 预处理器;

taro:
采用React语法标准,支持 JSX 书写,让代码更具表现性,Taro暂不支持直接渲染children。

对于mpvue和taro开发方式上,对vue和react语法的支持程度和差异上具体可以看各自的官方文档。

2.3 应用状态管理上

原生开发:
没有提供原生的应用状态管理方式,但是可以将 redux or mobx 引入到项目中。
小程序原生提供了一种声明使用全局变量,具体写法可查看官网文件作用域

wepy:
可以将 redux or mobx 引入到项目中。

mpvue:
可以直接使用 vuex 做应用状态管理,在用mpvue初始化时可以选择是否需要vuex.

taro:
支持redux,对于不那么大的应用也提供了全局变量的解决方式,redux引入和全局变量解决方式,具体可以查看官网-使用redux官网-最佳实践

2.4 社区活跃程度上

原生开发:
微信提供了一个专门的社区供小程序开发者学习交流开发者社区。对UI库来说,原生小程序UI库还是蛮多的,例如官方的weui, 有赞的zanui-weapp,高颜值、好用、易扩展的微信小程序 UI 库。

其它3个框架:
对于wepympvuetaro这种开源项目来说,想学习交流那肯定是在github的issue上啊,github上的star数和项目出现时间成正比,wepy : 12k多star, mpvue: 11k多star, taro: 6k多star,从趋势看,mpvue大有赶超wepy的趋势。

对于wepy,mpvue它们的github上都有些开源的UI库,而taro由于最近推出,UI需要自己去撸。

2.5 对比汇总表格

对比表格

3. 基于公司业务和团队思考

对于公司业务,肯定是要快速迭代开发的,而原生框架对工程化上支持并不友好,可以排除在外。

对于我们现有大部分前端相关的产品业务,不管是pc端的管理后台,还是移动端的h5页面都是基于react+webpack构建开发的,UI上都是采用蚂蚁的组件库,
团队成员对react语法,相关生态都是相当熟悉的,在这一点上,如果选择wepy或者mpvue的话,都需要我们学习新的知识点,wepy和vue语法,采用taro的话,团队成员完全可以快速上手开发微信小程序,然而在框架成熟度上来讲,wepy和mpvue出现时间较taro早,很多坑都已经踩完了,上手开发遇到问题的话,都有前人的解决方案,而taro最近才推出,这个框架的目标很伟大,就是用 React 的开发方式编写一次代码,生成能运行在微信小程序、H5、React Native 等的应用,在开发上肯定会遇到各种各样的问题。

综上,不管选择哪种框架,对我们的都很有挑战,而我个人认为,选择taro挑战更大,因为taro最近才推出,很多特性功能都在计划开发中,像对第三方组件库的支持。在我们开发公司业务时,肯定不能因为框架某些功能特性没开发完,缺陷没解决而导致开发业务的进度停歇不前。这就会促使我们去深入学习taro这个框架底层,技术原理-Taro 技术揭秘:taro-cli,从根本上解决问题,例如,没有UI库的话,可以自己开发一套,taro框架上的缺陷迟迟没解决的话,自己可以尝试解决,弄好之后可以想o2团队提pr,为开源项目做贡献,有必要的话,也完全可以自己维护一套taro框架的源码。做到这些,在我们学习前端架构和前端工程上的路上绝对是很有帮组的。

4. 开发感想

目前我自己只尝试了mpvue和taro来开发,因为一个是类vue,一个是类react,而如今vue, react的生态可以说是相当完善的,所以这两个框架在开发体验上都非常完美。

4.1 mpvue

在开始用mpvue开发时,要先熟悉vue语法,对于我这种没用过vue,用jsx语法习惯的人来说,去看vue的官方文档刚开始有点不适应,慢慢的写着写着就适应了。看看代码体验下:

<template>
  <div class="fontColor">hello,{{title}}</div>
</template>

<script>
export default {
  data() {
    return {
      title: 'hello,mpvue',
    };
  },
};
</script>

<style scoped>
.fontColor{
    color: red;
}
</style>

想想这种结构还是蛮熟悉的,不就是当初入门时写的html,css,js在同一个文件的结构吗。

在用mpvue开发遇到问题时,看mpvue文档和vue文档,还有微信小程序官方文档都可以快速定位轻松解决。

mpvue版本项目地址:geekjc-weixin

已上线,可扫一扫体验
极客教程

4.2 taro

而在用taro开发时,虽然是我熟悉的react语法,但是写起来的时候,还是遇到非常多的问题,语法上还是有些差异的,差异上可以看官方文档-关于 JSX 支持程度补充说明,那时候遇到问题我都会在issue上提问,o2团队的开发者也很认真的解答我的问题和taro框架上的缺陷。

对于转化为h5页面上,两者都支持,但是mpvue要转化成h5的话,要手动做的事还是蛮多的Mpvue 小程序转 Web 实践总结。而taro转化成h5页面就简单多了,只要遵循taro规定的语法,基础组件都从tarojs/components引入,就可以根据命令转化,可以看看下面两张图,一个是小程序的,一个转化为h5的。

小程序

h5

从图中整体感觉来看,taro转化成h5在ui和体验上并没有多大差别,可以说taro这个框架还是蛮强大的。(可能这只是个小demo,在转化成h5的过程中,没有遇到小程序和h5页面不一样或者报错的情况,但是从github issue上看,编译成h5还是有很多问题的,希望o2团队能及时解决)。

taro版本demo项目地址: geekjc-taro

5. 总结

不管选用那种框架,对微信小程序的基础知识,基础概念还是要花时间去学习的(看官方文档或者微信小程序全面实战,架构设计 && 躲坑攻略),因为很多问题,采用原生的去解决更好,组件也是。

6. 参考文章:

多端统一开发框架 - Taro

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容

  • 开源项目 wepy-wechat-demo:基于wepy开发的仿微信聊天界面小程序 深大的树洞:基于wepy开发的...
    dufebin阅读 4,041评论 0 19
  • 在尤大微博铺垫着“将会引入一些关于 TypeScript 的改进”一周之后,代号为 Level E 的 Vue.j...
    极乐叔阅读 14,539评论 0 12
  • 这时节姑苏的景色除了枫叶红了就属银杏最热烈了,古城苏州已是满城尽带黄金甲,出门遍地银杏香。道前街、凤凰街、桐泾路、...
    夏莲简书阅读 477评论 0 0
  • 两手相抵 十指连心 两颗孤单的心像是找到了依靠 你突然的靠近 让我没有防备 近距离的感受着你的心跳 闻着你嘴角淡淡...
    洛三公子阅读 237评论 0 1