Taro调研

Posted 2021-09-28 southnan0

背景

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

Taro介绍

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

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

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

对比

与Vue比较

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

1. 比如template里的元素，采用的是小程序的元素名称
   div ---> view
2. 元素的事件绑定
   @click/v-on:click ---> @tap/v-on:tap
3. 不支持<style scoped>
<style scoped> ---> cssModules
4. 生命周期

Taro	说明
onReady	小程序
onLoad	小程序
created	Vue、小程序
mounted	Vue
beforeUpdate	Vue
updated	Vue
beforeUnmount	Vue
unmounted	Vue、小程序（onUnload）
onShow	小程序
onHide	小程序

与微信小程序的比较

1. 项目配置
   项目配置根据平台不同配置不同的project.XX.json文件
2. 尺寸
   在 Taro 中尺寸单位建议使用 px、 百分比 %，Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写，即从设计稿上量的长度 100px，那么尺寸书写就是 100px，当转成微信小程序的时候，尺寸将默认转换为 100rpx，当转成 H5 时将默认转换为以 rem 为单位的值
3. API
   基本一致，只是wx.XXX变成Taro.XXX
   如果

4. 全局变量
   小程序是在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\')

开发模式

1. 创建
   Taro提供相应的@tarojs/cli用于创建Taro项目

2. 运行
   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"
   },

3. 查看、调试
   使用相应平台的开发工具，查看效果和调试

---

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

扩展

插件

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

Taro使用原生模块

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

其它

飞书API vs 微信API

功能	微信	飞书
地理位置	stopLocationUpdate、startLocationUpdateBackground、startLocationUpdate、openLocation、onLocationChange、offLocationChange、getLocation、chooseLocation	getLocation、openLocation、chooseLocation