Taro调研

southnan0 发布于 2 月 26 日

背景

领导大腿一拍，要从企业微信迁到飞书，已经上线或者开发中的应用，需要进行迁移工作量的评估。
为了预防哪一天，领导再次大腿一拍，想迁移到钉钉，于是想到了Taro。

Taro介绍

开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ 小程序 / H5 等应用。

总而言之，就是一套代码，可以编译成多个平台的小程序代码。

而且支持自己拓展其他平台的编译插件。

对比

与Vue比较

采用vue进行开发时，大部分写法都是一致的，只有少数写法，Taro做了改变。

与微信小程序的比较

全局变量
小程序是在app里配置

App<IAppOption>({
   globalData: {
     a: 123
   }
})

使用时

var app = getApp();
app.globalData.xxx

Taro推荐是用Redux或者在某个目录下新建一个js文件，例如 global_data.js，示例代码如下

const globalData = {}

 export function set (key, val) {
   globalData[key] = val
 }

 export function get (key) {
   return globalData[key]
 }

使用时

import { set as setGlobalData, get as getGlobalData } from './path/name/global_data'

 setGlobalData('test', 1)

 getGlobalData('test')

开发模式

运行
Taro项目在package.json配置好相应平台的执行命令，通过npm命令，编译成不同端的代码

"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",     // 字节小程序
"build:h5": "taro build --type h5",     // H5
"build:rn": "taro build --type rn",     // react native
"build:qq": "taro build --type qq",     // QQ小程序
"build:jd": "taro build --type jd",     // 京东小程序
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch", 
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:jd": "npm run build:jd -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch"
},

不过遗憾的是，Taro不支持飞书小程序，折中的方案是采用编译成字节小程序。毕竟飞书字节一家亲嘛，API也查不到哪里去。但是现在大型APP那么多，各家都开创了一套属于自己的小程序，如果每家都支持，Taro需要投入的，真的很可观。

扩展

插件

于是乎，Taro引入插件的理念，自 v3.1.0 起，将每个小程序平台的兼容逻辑抽取出来，以插件形式注入Taro框架，用户也可以自己扩展相应的平台。

Taro使用原生模块

支持引用小程序原生组件，但同时失去转其他平台的能力

其它

飞书API vs 微信API

记忆光盘

好记性 || 烂笔头

关注专栏