关于前端:Taro调研

背景

领导大腿一拍，要从企业微信迁到飞书，曾经上线或者开发中的利用，须要进行迁徙工作量的评估。
为了预防哪一天，领导再次大腿一拍，想迁徙到钉钉，于是想到了 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. 生命周期

与微信小程序的比拟

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

开发模式

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 框架，用户也能够本人扩大相应的平台。