小程序框架：WePY、uni-app 和 Taro

在上一篇博客《聊聊微信小程序及其框架》里面立了个调研微信小程序开发框架的 flag ，这篇博客就来填这个坑——我迫不及待地想要掌握一个能够“舒适编写”小程序代码的框架。

我之前提到我最想先要了解的是 WePY 和 uni-app 这两个小程序框架，WePY 是微信官方出品的小程序框架，uni-app 是使用 Vue 开发小程序的最火的小程序框架，但是这两个框架都让我特别失望。

令人失望的 WePY 和 uni-app

WePY

其实最期待的应该是微信的亲儿子 WePY 吧，毕竟是官方出品，质量应该会有所保障，但是看了文档并自己安装运行之后发现还是不对胃口。原因主要有以下几个方面：

1. 语法以 Vue 为基础但是又在 Vue 的基础上进行了一点魔改，让人产生一定程度的混乱。如果要使用类 Vue 的语法来写小程序，为什么不直接用 Vue 来写呢？
2. 插件支持不到位，例如 vscode 中的插件 Wepy 就是完全用 Vetur 魔改出来的，在 .wpy 文件中的提示和各项支持并不到位，会提示有各种 warning 和 error；
3. 使用 @wepy/cli 工具创建标准模板项目之后发现并不能正常编译。

第一印象很重要，如果这个框架第一时间没有让我感觉到便利，甚至是让我觉得很麻烦，那我是绝对不会再继续在继续研究它的。到这里，WePY 的尝试就结束了。

uni-app

uni-app 是由 DCloud 开发的一个小程序框架，致力于让开发者用 Vue 写一套代码编译到 10 个平台都能运行。虽然一开始对于这种为系统引入过多复杂性的框架有些抵触，但是最简单的 WePY 凉了，所以也愿意相信 uni-app 说的:

即使不跨端，uni-app 也是更好的小程序开发框架、更好的 App 跨平台框架、更方便的 H5 开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

知乎上也有相关的帖子，说 uni-app 比较香，写起来很省心。抱着尝试的心态看了一下 uni-app 的官方文档、用 vue-cli 安装了 DCloud 官方的项目模板尝试编译运行、下载了 HBuilderX 尝试编译运行。运行是能运行，但是效果马马虎虎，体验有点糟糕，印象大打折扣。主要的问题有以下几点：

1. 官网文档有些混乱，非常非常非常着重的说明如何进行跨端的适配、条件编译有何注意事项等等，对于只想简单在单一平台编译运行小程序的开发者来说不够简洁；
2. 命令行工具的表现和 HBuilderX 的不一致，大部分情况下命令行下都编译运行不了，或者是当我想引入一些如 Vant 的组件库的时候小程序就编译错误；
3. 上一条提到的部分问题如果使用 DCloud 的官方 IDE HBuilderX 的话就可以用“导入插件”的方式解决一部分。但是体验非常非常差，简直就是道德绑架——要编译就要用我的 HBuilderX。什么？你没安装啊，那打扰了；
4. 尝试使用官方推出的插件将使用原生微信小程序语法编写的代码转换成 vue 风格的 uni-app 代码，但是转换出来之后一团糟，根本没办法运行。

uni-app 最大的问题在于它太复杂、太希望构建自己的生态、太希望牢牢抓住开发者了。复杂的东西往往都很脆弱，经不起折腾，稍微碰一下就错误百出。它几乎是强制开发者使用他们的 HBuilderX 来进行小程序开发，这一点我无法接受，你不让我自由选择开发工具，我就可以不用你。但是这些问题也情有可原，毕竟它是 DCloud 的主要业务之一，需要给公司带来一定比例的收益。

Taro 宇宙最强的泰罗奥特曼

Taro 文档阅读

我一直觉得很多开发者都非常可爱，从起名上就可见一斑，比如 Taro 这个小程序跨端框架、分布式应用程序协调服务 ZooKeeper 和分布式系统基础框架 Hadoop 等。Taro 是京东的凹凸实验室推出的小程序跨端框架，和 uni-app 一样支持写一套代码编译到不同的地方。目前已经进入了 3.x 阶段，除了可以用 React/Nerv 进行开发，还支持了 Vue/Vue3。我马上看了看 Taro 的官方文档，比 uni-app 好太多了：快速开始、基础教程、进阶指南、迁移指南层层递进；官方组件库和 API 列表罗列清楚，对它们在 React 和 Vue 中的使用方法说明得很清楚；还提供了专门的“教程”模块，对于刚上手的开发者十分友好；更重要的是，它提供了一套原生的 UI 组件库 taro-ui ，甚至还照顾了 Vue 的版本推出了 taro-ui-vue。依靠这些了解，我就觉得以后就是它了，要是再有新的小程序项目，我应该会首选使用 Taro 进行开发。

尝试初始项目

于是，我赶紧创建了 taro-taste 文件夹。

本来打算随便写一个 demo 小程序，又不想再单独写一套后端代码（再简单也懒得弄了），就用之前申请的一个小程序用来作为云开发的基础。用 taro 自带的 cli 工具初始化了一个微信小程序的云开发模板。用微信开发者工具打开之后，一切表现都很正常，没有什么复杂的事情，没有类似 uni-app 一样的满屏 error，云函数也能够正常调用。但是用 Vue 开发小程序有一些其他的点是需要重新适应的，例如：

1. template 部分的基础元素只能用 view 而不能用 div；
2. 事件名称或许不一样，如点击事件需要用 tap 而不用 click 等；
3. 安装 taro 官方的 package 最好改用淘宝的源或者直接使用 cnpm ，不然就会出现安装失败的问题。

不过整体而言已经很满意了，对 Vue 的支持也比较全面，之后应该会真正用它来进行开发吧。

不如了解一下新东西

但是有一点比较奇怪的是，在 Vue 项目模板的首页文件中，根节点 view 元素有个 className="index" 的属性，这是 React 类名的写法。想到 Taro 在 3.x 版本以前只支持 React/Nerv 的情况，出现 className 这个属性应该是 3.x 版本目前还没有把对 Vue 的支持做得很完善吧。

恰好我最近在做其他项目开发的时候感觉 Vue 在代码复用、数据更新和访问方面的一些体验不是特别友好，而且组件文件规模很难控制（这应该是我的编码水平问题…），不如去学习尝试一下 React 吧。听说 Hooks 配合函数组件用起来很舒服，而且 React 完全是在写 javascript/typescript，开发起来应该会比一个文件里写 template/script/style 来回切会容易把控一点吧。

当然，它们归根到底只是开发框架而已，前端项目开发万变不离其宗，但是了解一个很酷的新东西本身就可以给我很大的动力，对吧？