微信小程序开发框架对比 - Taro vs Remax

综述

近期由于公司要开发微信小程序，因此对目前流行的小程序开发框架做了一些预研工作。

首先，目前流行的小程序开发框架主要有：

Taro（京东，React系，Taro3大改版后也支持Vue/Vue3，主打多平台小程序适配，以及H5、RN，大而全，希望对标Vue系的Uniapp，但感觉坑会不少）
Uniapp（QCloud，Vue系，早先集成了MpVue，主打一套代码，多端部署，支持各种小程序平台、H5、IOS、Android等，适合某些固定的业务场景，听说外包用的很多，滑稽脸~ ）
Remax（蚂蚁，React系，专注于使用 React 技术栈开发小程序，尤其微信小程序，支持和微信小程序进行混合开发，意味着它几乎完美继承原生小程序的能力，且可复用小程序社区。对其他小程序平台也有Remax one的跨端适配支持，小而精，未来可期~）
MpVue（美团，Vue系，2年未维护，如果希望使用Vue开发小程序，选Uniapp吧~）
Wepy（官方，让小程序支持组件化开发的框架，目前已被其他框架大大超越，欢迎进入到历史书中...）
原生开发（官方，能力相比最初已大幅加强，但无法使用 Vue 和 React 的技术栈是一大硬伤，小程序开发工具的开发体验也和我们熟悉的 VSCode 有差距）

通过对各个框架的初步了解和资料查阅，以及结合团队对于扩展技术栈的需求，重点选择React系的 Taro 和 Remax进行对比，通过使用这两个框架分别实现 TodoList 示例，来对比两者的区别。

一、总体设计理念

【引自Remax官网】 Taro 3.0 版本的实现原理与 Remax 大同小异，没有太大的区别。主要区别在于以下两个方面：

跨平台设计，我们深知要打造一个面面俱到的多平台框架会有非常多的坑，与其挖一个大坑填不上，我们选择把有限的精力放在框架的核心功能上，并提供跨平台同构机制以及一个精简的跨平台实现（Remax One），让开发者可以根据自己的业务需求去做跨平台实现。

专注 React，因为 React 是我们自己大量使用和熟悉的前端框架，Remax 会持续专注在 React 技术栈。

二、对比维度

开发体验（Remax > Taro）
组件&API能力（Remax > Taro）
插件支持-less（均支持）
第三方小程序组件库支持（Remax > Taro）、
运行性能-虚拟列表（Remax > Taro）
打包大小（Taro > Remax）
维护情况/社区（Taro > Remax）

~~其他维度：~~

~~多端适配：支持的多端适配（H5、多小程序平台、ReactNative）~~
~~自定义组件编写是否方便？~~
~~配置Webpack能力？~~
~~全局数据状态管理~~

1、开发体验

创建项目：均可不安装全局包，使用一行命令即可新建项目
- Taro： npx @tarojs/cli init myApp
- Remax: npx create-remax-app my-app
创建项目速度： Remax 明显快于Taro，1min vs 3-5min
- 得益于Remax仅安装核心库，十分小巧
- Remax的初始项目一共仅包含 react 和 remax 两个包，相比之下，Taro一共有十几个包;
代码检查：Taro自带eslint，而remax无提示，不过有代码提示，基本也没差
代码调试：remax
编译报错：咋个都不提示呢。。。特别是Taro，不支持Web标签，会白屏，但也没报错
Web标签支持：Remax会自动帮你将<div>转成<View>，不过还是不建议写<div>

2、组件&API能力：

1、均支持和小程序原生组件/API混合开发

2、但实现思路稍有不同，Remax小而精，Taro大而全

3、因为实现思路不同，调用时的开发体验也不同。Remax更统一，而Taro需区分组件和api，以及区分使用的小程序平台，分别通过不同的包引入

4、总体上，Remax对微信原生小程序的支持度更高，因为原生小程序是官方维护，因此坑更少

Remax
- Remax/wechat 是微信小程序的组件库，基本可以完整使用原生小程序的能力，包括组件和API：import { View, Text, Image, navigateTo } from 'remax/wechat';
- Remax/one 是可以兼容所有小程序平台的组件库，目前仅支持少量组件跨端，如 <Button> <Input> <View> <Text>等
- Remax 对小程序 API 做了简单的 Promise 封装，所有 API 通过平台对应的文件导出。
- Remax使用小程序的API也需要遵守一定的规范：
  - 1、首字母大写与驼峰式命名，如小程序中的 <open-data> 需要改为 <OpenData>
  - 2、<Block>组件不可用，但Taro支持，原因未知。
Taro
- 开发规范：支持使用原生小程序的组件和API
- 1、通过 @tarojs/components 引入组件，如 <View> <Text> <OpenData> 等
- 2、通过 @tarojs/taro 引入API,如 navigateTo, canIUse 等
- 3、首字母大写与驼峰式命名
- 4、组件的事件传递都要以 on 开头：在微信小程序中 bind 开头这样的用法，都需要转成以 on 开头的形式，比如 bindInput 要写成 onInput，这个用起来会有点烦，不如remax来的直接...

3、插件支持（less）：

Remax
- 默认不支持
- 需安装插件@remax/plugin-less，参见使用插件
Taro
- 默认支持

4、第三方小程序组件库支持

Remax 你可以在 React 组件中直接使用小程序的自定义组件。包括支持原生 UI 组件库，如：weui, min-ali-ui等等。
Taro 未知

5、运行性能（虚拟列表）

Remax
- 第三方库 remax-virutal-list
Taro
- 官方库 @tarojs/components/virtual-list ，具体见长列表渲染（虚拟列表）
- 然而引入后运行实例时报错了，查了下需要开启小程序开发工具的增强编译（然而并没有找到该选项，只好暂时放弃了。。。）

6、打包大小

Remax（459KB）
- remax-vendor.js 229kb
- base.wxml 153kb
Taro（263KB）
- taro.js 103kb
- app.js 84kb
- base.wxml 54kb

7、维护情况/社区

Remax 官方文档精简，相当克制，只放有用的信息
Taro 官方文档和社区内容丰富
由于两者均支持原生小程序的混合开发，因此都可复用微信小程序的社区

三、综合评价

reamx 小而精 vs taro 大而杂

Remax小而精：

官方文档精简，相当克制，只放有用的信息
项目依赖少，初始项目仅2个依赖包，创建时的打印信息精简，速度快，体验好。同时也提供了可扩展的能力，比如less插件的支持
充分复用微信小程序组件和api，引入 remax/wechat 即可，仅做promise化。另外，兼容其他平台的部分使用了 Remax One ，和微信小程序解耦，对于只需开发微信小程序的用户来说，简单高效

Taro大而杂：

官方文档和社区内容丰富，还有自己的组件库TaroUI，看起来是搞大事的！
初始项目即支持10几个平台的跨端打包命令，虽然我只想开发一个微信小程序而已~
@tarojs/component , @tarojs/taro 分别维护跨平台的组件和API，尽管如此，我只是想开发一个微信小程序而已~
性能和打包这块，很明显有花精力做优化，打包后的小程序包很小，而且提供了 VirtualList 的组件库支持，很棒了~

Remax 思路清晰，未来可期

Taro 摊子铺的大，未来注定会很坎坷

经过和技术部的同事的讨论，最终确定用 Remax 来进行微信小程序的开发。理由是团队中有人之前已经深度使用过 Remax 开发小程序，这个很重要，节省了不少趟坑的时间；另外React+TS的开发模式也很香，期待一下下~

谢谢阅读，希望本文能对你有所帮助，也欢迎点赞和留言~