小程序框架选型方案报告

  • 目前微信小程序框架:chameleon、Taro、uni-app、mpvue、WePY

生态

1. 开发工具

就开发工具而言 uni-app 应该是一骑绝尘,它的文档内容最为丰富,还自带了 IDE 图形化开发工具,鼠标点点就能编译测试发布。

其它的框架都是使用 CLI 命令行工具,但值得注意的是 chameleon 有独立的语法检查工具,Taro 则单独写了 ESLint 规则和规则集。

在语法支持方面,mpvue、uni-app、Taro 、WePY 均支持 TypeScript,四者也都能通过 typing 实现编辑器自动补全。除了 API 补全之外,得益于 TypeScript 对于 JSX 的良好支持,Taro 也能对组件进行自动补全。

CSS 方面,所有框架均支持 SASS、LESS、Stylus,Taro 则多一个 CSS Modules 的支持。

所以这一轮比拼的结果应该是:

uni-app > Taro > chameleon > WePY、mpvue

image.png

2. 多端支持度

只从支持端的数量来看,Tarouni-app 以六端略微领先(移动端、H5、微信小程序、百度小程序、支付宝小程序、头条小程序),chameleon 少了头条小程序紧随其后。

但值得一提的是 chameleon 有一套自研多态协议,编写多端代码的体验会好许多,可以说是一个能戳到多端开发痛点的功能。uni-app 则有一套独立的条件编译语法,这套语法能同时作用于 js、样式和模板文件。Taro 可以在业务逻辑中根据环境变量使用条件编译,也可以直接使用条件编译文件(类似 React Native 的方式)。

在移动端方面,uni-app 基于 weex 定制了一套 nvue 方案 弥补 weex API 的不足;Taro则是暂时基于 expo 达到同样的效果;chameleon 在移动端则有一套 SDK 配合多端协议与原生语言通信。

H5 方面,chameleon 同样是由多态协议实现支持,uni-appTaro 则是都在 H5 实现了一套兼容的组件库和 API。

mpvueWePY 都提供了转换各端小程序的功能,但都没有 h5 和移动端的支持。

所以最后一轮对比的结果是:

chameleon > Taro、uni-app > mpvue > WePY

3. 组件库/工具库/demo

作为开源时间最长的框架,WePY 不管从 Demo,组件库数量 ,工具库来看都占有一定优势。

uni-app 则有自己的插件市场和 UI 库,如果算上收费的框架和插件比起 WePy 也是完全不遑多让的。

Taro 也有官方维护的跨端 UI 库 taro-ui ,另外在状态管理工具上也有非常丰富的选择(Redux、MobX、dva),但 demo 的数量不如前两个。但 Taro 有一个转换微信小程序代码为 Taro 代码的工具,可以弥补这一问题。

mpvue 没有官方维护的 UI 库,chameleon 第三方的 demo 和工具库也还基本没有。

所以这轮的排序是:

WePY > uni-app 、taro > mpvue > chameleon

4. 接入成本

接入成本有两个方面:

第一是框架接入原有微信小程序生态。由于目前微信小程序已呈一家独大之势,开源的组件和库(例如 wxparseechartzan-ui 等)多是基于原生微信小程序框架语法写成的。目前看来 uni-appTarompvue 均有文档或 demo 在框架中直接使用原生小程序组件/库,WePY 由于运行机制的问题,很多情况需要小改一下目标库的源码,chameleon 则是提供了一个按步骤大改目标库源码的迁移方式。

第二是原有微信小程序项目部分接入框架重构。在这个方面 Taro 在京东购物小程序上进行了大胆的实践,具体可以查看文章《Taro 在京东购物小程序上的实践》。其它框架则没有提到相关内容。

而对于两种接入方式 Taro 都提供了 taro convert 功能,既可以将原有微信小程序项目转换为 Taro 多端代码,也可以将微信小程序生态的组件转换为 Taro 组件。

所以这轮的排序是:

Taro > mpvue 、 uni-app > WePY > chameleon

流行度

从 GitHub 的 star 来看,mpvueTaroWePY 的差距非常小。从 NPM 和 CNPM 的 CLI 工具下载量来看,是 Taro(3k/week)> mpvue (2k/w) > WePY (1k/w)。但发布时间也刚好反过来。笔者估计三家的流行程度和案例都差不太多。

uni-app 则号称有上万案例,但不像其它框架一样有一些大厂应用案例。另外从开发者的数量来看也是 uni-app 领先,它拥有 20+ 个 QQ 交流群(最大人数 2000)。

所以从流行程度来看应该是:

uni-app > Taro、WePY、mpvue > chameleon

5. 开源建设

一个开源作品能走多远是由框架维护团队和第三方开发者共同决定的。虽然开源建设不能具体地量化,但依然是衡量一个框架/库生命力的非常重要的标准。

从第三方贡献者数量来看,Taro 在这一方面领先,并且 Taro 的一些核心包/功能(MobX、CSS Modules、alias)也是由第三方开发者贡献的。除此之外,腾讯开源的 omi 框架小程序部分也是基于 Taro 完成的。

WePY 在腾讯开源计划的加持下在这一方面也有不错的表现;mpvue 由于停滞开发了很久就比较落后了;可能是产品策略的原因,uni-app 在开源建设上并不热心,甚至有些部分代码都没有开源;chameleon 刚刚开源不久,但它的代码和测试用例都非常规范,以后或许会有不错的表现。

那么这一轮的对比结果是:

Taro > WePY > mpvue > chameleon > uni-app

最后补一个总的生态对比图表:

官网优势介绍

uniapp 官网
taro 官网

【个人观点】:1. 结合公司现有小程序进行转化,发现 taro 并不能完美支持小程序原生组件与API 文档;2. uniapp 使用的是 vue 语法,taro 使用的是 react 语法,相对来说,vue更易上手。 3. uniapp 社区更为丰富,所以遇到问题后,有强大的后盾支持,能更快速的解决问题。综上,个人认为 uniapp 更适合我们进行快速的切换到多端支持的小程序框架上来。

细化 uniapp

参考:https://uniapp.dcloud.io/README

    1. uniapp 简介
      uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。
      DCloud公司拥有420万开发者,几十万应用案例、10.5亿手机端用户,数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app(详见),腾讯课堂官方为uni-app录制培训课程(详见),开发者可以放心选择。
      DCloud于2012年开始研发小程序技术,于2015年正式商用了自己的小程序,产品名为“流应用”,它不是B/S模式的轻应用,而是能接近原生功能、性能的动态App,并且即点即用。
    1. uniapp 目录结构
      一个uni-app工程,默认包含如下目录及文件:
目录结构

了解一个项目首先要了解他的目录结构,其次需要了解它的组件,这里重点关注存放小程序组件的地方,这里就可以了解到为什么 uniapp 可以实现多端,并且保证他们的差异化。

wxcomponents 小程序组件支持情况

    1. uniapp 生命周期
      uniapp 生命周期包括应用生命周期与页面生命周期。
      应用生命周期包括 onLaunchonShowonHideonErroronUniNViewMessage。它仅可在App.vue中监听,在其它页面监听无效。
      页面生命周期包括 onLoadonShowonReadyonHideonUnloadonResizeonPullDownRefreshonReachBottomonTabItemTaponShareAppMessageonPageScrollonNavigationBarButtonTaponBackPressonBackPressonNavigationBarSearchInputChangedonNavigationBarSearchInputConfirmedonNavigationBarSearchInputClicked。其中最后5个生命周期函数在微信小程序中是没有的。
    1. uniapp 路由
      uni-app 有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转。
    1. uniapp 页面样式与布局
      基本与小程序样式布局一致,只是uni-app 提供内置 CSS 变量
CSS变量 描述 App 小程序 H5
--status-bar-height 系统状态栏高度 系统状态栏高度、nvue注意见下 25px 0
--window-top 内容区域距离顶部的距离 0 0 NavigationBar 的高度
--window-bottom 内容区域距离底部的距离 0 0 TabBar 的高度

用法示例:

<template>
    <view>
        <view class="status_bar">
            <!-- 这里是状态栏 -->
        </view>
        <view> 状态栏下的文字 </view>
    </view>
</template>    
<style>
    .status_bar {
        height: var(--status-bar-height);
        width: 100%;
    }
</style>
    1. uniapp 拓展能力
      1)uniapp 在支持绝大部分 ES6 API 的同时,也支持了 ES7 的 await/async。
      2)uniapp 支持使用npm安装第三方包。npm 号称世界上最大的插件包管理器,这使得 uniapp的插件非常的丰富。
      3)uniapp 支持 TypeScript 开发。
      4)uniapp 支持在 App 和 小程序 中使用小程序自定义组件。

优秀测评文档

  1. 跨端框架深度评测:微信原生、wepy、mpvue、uni-app、taro、chameleon

  2. 深度横评对比

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

推荐阅读更多精彩内容

  • 小程序多端框架到底应该选哪个? 最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一些疑惑:这些框...
    架构师Javaspring阅读 3,542评论 0 6
  • 最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一些疑惑:这些框架都有什么优缺点?到底应该用哪个...
    什么都不会的程序员阅读 732评论 0 1
  • 我们经常会在工作中抱怨工作,抱怨领导,抱怨别人,但是从来没有反思过自己,这是没有意义的,不反思自己就没办法从中成长...
    星际瑜伽凯源阅读 64评论 0 0
  • 2018年2月20日于北京 天晴 看到一个颤巍巍的老人,走进一家餐厅。我猜她是想去菜场买馒头的,但春节期间菜场关门...
    yumingsweetie阅读 191评论 0 0
  • 家庭日。平衡是个人以及家庭健康发展的重要使命。再生娃领域,我们的前辈把生命当中的每个元素总结成了平衡轮(又称生命之...
    悦_行阅读 199评论 0 0