-
2020-12-20 18:01:14
一.目标定位
一套遵循 React 语法规范的多端统一开发框架
一种多端代码转换方案,这里的“端”是指微信小程序、Web、ReactNative、百度小程序、支付宝小程序、头条小程序、快应用等等
具体地,把一份类React源码,通过“编译”转换成兼容目标端的形式,即:
转换
nerv业务代码 ------> xx小程序业务代码 +
Web业务代码 +
ReactNative业务代码
目的是降低开发成本,提高效率:
让原本只能运行在一端的项目获得多端运行的能力,降低开发者的重构成本。
二.思路探索
初衷
用React写微信小程序。
微信小程序原生方式开发起来太费劲,遂想用React开发微信小程序
延伸
在React业务代码转微信小程序代码这个最初的需求实现之后,发现依靠同样的转换思路可以适配多端,即从1对1延伸到1对n:
P.S.其中Nerv是一种类React框架,API与React类似
P.S.Taro组件库之所以以微信小程序为标准,也是初衷使然(都做完了不能浪费啊)
思路
想要一份代码通吃n端,无非2种思路:
直接从1端向n - 1端转换
加一层抽象,从这层抽象转换到n端
以Bash与Batch(Windows批处理脚本)为例,如果只写一份脚本,想既能在*nix跑,又能在Windows跑,第一种思路只需要实现1个东西(从bash向n - 1端转换):
function bash2batch(bash) {
// ...
return equivalentBatch;
}
或者(从batch向n - 1端转换):
function batch2bash(batch) {
// ...
return equivalentBash;
}
如果能实现AtoB,一份A就可以适配A和B了,但“硬”转通常比较困难,因此在Bash与Batch的场景,诞生了第二种思路的实现:
Batsh: A language that compiles to Bash and Windows Batch.
也就是加一层抽象C,再分别实现CtoA和CtoB,从Batsh这层抽象转换到n端:
// 1.定义抽象层Batsh
const batsh = 'Neither bash nor batch';
// 2.实现抽象层向2端转换
function batsh2batch(batsh) {
// ...
return equivalentBatch;
}
function batsh2bash(batsh) {
// ...
return equivalentBash;
}
类似地,Taro也采用了第二种思路,这层抽象就是Taro业务代码:
P.S.Taro业务代码即图中的Nerv代码,叫Taro代码更准确一些,因为增加了一些Taro特有的API支持(如Taro.getEnv()),是Nerv的超集
三.核心实现
以微信小程序为例,它由4部分组成:
配置(JSON)
模板(WXML)
样式(WXSS)
逻辑(JS)
配置与样式没什么好说的,难点在于模板的转换和逻辑的转换
P.S.ReactNative样式转换另说,也是一个难题,因为RN在选择器、属性名/值及默认值,甚至CSS特性支持程度都存在较大差异
编译转换
要把一份代码A转换成另一份代码B,需要做3件事情:
解析代码A生成抽象描述(AST)
根据一些映射规则操作AST,生成新的AST
根据新的AST生成代码B
P.S.关于编译转换的更多信息,请查看再看编译原理与Babel快速指南
模板的转换
把 JSX 语法转换成可以在小程序运行的字符串模板。
输入JSX:
render() {
const { percent } = this.state;
return (
+
{ percent && }
);
}
+
View、Button等都是Taro内置组件:
Taro 以 微信小程序组件库 为标准,结合 jsx 语法规范,定制了一套自己的组件库规范
相关package如下:
@tarojs/components:支持Web环境Nerv组件库,通过编译替换为目标平台的原生标签/组件
@tarojs/taro-components-rn:支持ReactNative环境的React组件库(之所以ReactNative组件库独立出来,可能是因为差异较大,难以通过编译手段实现转换)
都会被转换成目标端的原生组件:
在小程序端,我们可以使用所有的小程序原生组件,而在其他端,我们提供了对应的组件库实现
但自定义组件my-progress在微信小程序中是不存在的,所以并不能如预期地跑起来
势必需要一种跨端组件定义,为此Taro提供了2个东西:
支持把自定义组件打包成各目标端支持的形式(具体见基于 Taro 开发第三方多端 UI 库)
前者解决有没有的问题,应对一般应用场景。后者开放一种自定义的能力,满足需要定制的场景
逻辑的转换
类似于组件库需要做多端适配,各端能力差异也同样需要适配:
组件库以及端能力都是依靠不同的端做不同实现来抹平差异
运行时框架负责适配各端能力,以支持跑在上面的Taro业务代码,主要有3个作用:
适配组件化方案、配置选项等基础API
适配平台能力相关的API(如网络请求、支付、拍照等)
提供一些应用级的特性,如事件总线(Taro.Events、Taro.eventCenter)、运行环境相关的API(Taro.getEnv()、Taro.ENV_TYPE)、UI适配方案(Taro.initPxTransform())等
实现上,@tarojs/taro是API适配的统一入口,编译时分平台替换:
@tarojs/taro:只是一层空壳,提供API签名
平台适配相关的package有6个:
P.S.与组件库适配方案不同的是,API干脆放弃编译转换这条路,直接整个替掉
实际上,要想只维护一份业务代码,那么Taro提供的API必定是n端API的并集,例如:
// 各小程序都支持的API
Taro.setStorage()
// 百度小程序专有API
Taro.textToAudio()
// 支付宝小程序与微信小程序参数处理上存在差异的API
Taro.getStorageSync()
// ...
这些API都可以直接使用,不用关心当前平台是否支持,因为运行时框架的适配工作的一部分就是抹平平台能力API差异,例如:
H5 端就无法调用扫码、蓝牙等端能力
采用微信小程序标准,所以这些 API 在 H5 端运行的时候将什么也不做。
同时在业务层区分目标环境,保证这些平台相关的代码仅在预期的目标环境下执行:
编译时:process.env.TARO_ENV
运行时:Taro.getEnv()
例如:
// 分平台调用API
if (process.env.TARO_ENV === 'swan') {
Taro.textToAudio()
}
// 分平台使用不同组件
{process.env.TARO_ENV === 'weapp' && }
{process.env.TARO_ENV === 'h5' && }
P.S.编译时静态的环境区分足够应对大多数场景了,运行时的环境区分仅备不时之需
四.结构
从设计上看,Taro方案分为3层:
业务层(类React代码)
---------------------
转换层(JSX转微信小程序)
---------------------
适配层 组件库(适配n端原生组件)
运行时框架(适配n端API能力)
---------------------
此外,还有
生态:UI库、路由、数据流管理、CSS预处理等
构建:Web走Webpack,ReactNative走Expo的xdl,其余的各自走自己的IDE
Lint:对于转换层不支持的写法,通过静态检查给出一部分警告
五.源码简析
对应到具体实现,各部分对应的package如下(taro/packages/):
// 转换
babel-plugin-transform-jsx-to-stylesheet
taro-plugin-babel
taro-plugin-csso
taro-plugin-uglifyjs
taro-transformer-wx
// 适配-组件库
taro-components-rn
taro-components
// 适配-运行时框架
taro-alipay
taro-h5
taro-qapp
taro-rn
taro-swan
taro-tt
taro-weapp
taro
// 生态
postcss-plugin-constparse
postcss-pxtransform
postcss-unit-transform
taro-async-await
taro-mobx-common
taro-mobx-h5
taro-mobx-prop-types
taro-mobx-rn
taro-mobx
taro-plugin-less
taro-plugin-sass
taro-plugin-stylus
taro-plugin-typescript
taro-redux-h5
taro-redux-rn
taro-redux
taro-router-rn
taro-router
// 构建
taro-cli
taro-rn-runner
taro-webpack-runner
// Lint
eslint-config-taro
eslint-plugin-taro
// 其它(公共方法)
taro-utils
另外,还有个有意思的东西:
// 微信小程序转Taro
taroize
// taroize 之后的运行时
taro-with-weapp
反向转换是另一扇门,就转换而言,从1对1延伸到1对n之后,下一个阶段就是n到1了,即:
// 目标端
A = weapp
B = ReactNative
C = ReactNative
// 抽象层
T = Taro
// 第一阶段:1对1
T2A()
// 第二阶段:1对n
T2A(), T2B(), T2C()...
// 第三阶段:n到1
A2T(), B2T(), C2T()...
等到第三阶段完成,就天下大同了(随便拿个什么东西都能转换到n端)
P.S.目前(2018/12/9),A2T()(小程序代码转 Taro)已经待发布了,具体见版本计划
六.限制
限制方面感受最深的应该是JSX,毕竟JSX的灵活性令人发指(动态组件、高阶组件),同时微信小程序的模板语法又限制极多(即便通过WXS这个补丁增强了一部分能力),这就出现了一个不可调和的矛盾,因此:
JSX 的写法极其灵活多变,我们只能通过穷举的方式,将常用的、React 官方推荐的写法作为转换规则加以支持,而一些比较生僻的,或者是不那么推荐的写的写法则不做支持,转而以 eslint 插件的方式,提示用户进行修改
具体地,JSX限制如下:
不能在包含 JSX 元素的 map 循环中使用 if 表达式
不能使用 Array#map 之外的方法操作 JSX 数组
不能在 JSX 参数中使用匿名函数
不允许在 JSX 参数(props)中传入 JSX 元素
只支持class组件
暂不支持在 render() 之外的方法定义 JSX
不能在 JSX 参数中使用对象展开符
不支持无状态组件(函数式组件)
props.children只能传递不能操作
…
对于这些转换限制,弥补性方案是Lint检查报错,并提供替代方案
除JSX外,还有2点比较大的限制:
CSS:受限于ReactNative的CSS支持程度(只能使用flex布局)
标签:约定 不要使用 HTML 标签(都用多端适配过的内置组件,如View、Button)
P.S.囿于静态转换自身的限制,很多转换是没办法实现的
七.应用场景
当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写多套代码的成本显然非常高
也就是说,当同一业务在多端有重叠需求时,Taro之类的多端代码转换方案才有意义
另一类场景是Taro最初想要解决的微信小程序开发体验问题,如果用Taro来开发微信小程序,一不小心还能适配多端,也是个不错的选择
参考资料
更多相关内容 -
Taro-city:基于taro3 + react + redux + taro-ui,封装模板,上线于支付宝爱山东小程序
2021-05-08 16:06:35Taro-city:山东省支付宝,爱山东 多端开发 taro3 + React + redux + taro-ui 心得 本是一个写React,不知道为啥进的公司用的Vue,大概也就混了一年吧,所以使用的redux,就当练手,重温下React吧,所有的页面大概都... -
taro-list:Taro 列表滚动组件
2021-04-16 07:57:16taro-list 支持下拉刷新 、 加载更多 、虚拟列表 安装及使用 npm i taro-list 小程序 demo 配置文件里添加 copy: { patterns: [ { from: 'node_modules/taro-list/dist/weapp/components/List/refresh.wxs', to... -
taro-calendar-heatmap:Taro构建的日历热图组件
2021-03-28 14:55:05基于Taro的日历热力图,类似以GitHub贡献统计图。 安装与约会 安装 npm i taro-calendar-heatmap --save ♡ import CalendarHeatmap from 'taro-calendar-heatmap' ; // 引入样式 import 'taro-calendar-heatmap/... -
taro-skeleton:基于Taro的一个骨架屏组件,简单易用
2021-05-06 17:16:42基于 Taro 的一个简单易用的骨架屏组件 2.0版本以上支持 Taro3.0 支持多端平台使用 微信小程序 h5 百度小程序 头条小程序 支付宝小程序 其它平台未测试 快速上手 引入组件 import Skeleton from 'taro-skeleton' ... -
taro-inject-component-loader:为 Taro React 小程序注入全局组件
2021-05-21 04:47:05Taro React 小程序注入全局组件 缘由 众所周知,小程序中不能定义全局组件,如果我们想自定义一个 modal 弹窗,来替代 wx.showModal 的话,则需要在每个页面手动的引入组件。随着项目越来越大,手动引入组件无疑是... -
taro-iconfont-cli:在Taro框架中使用iconfont图标,支持多端,支持多色彩,不依赖字体
2021-05-02 13:20:50taro-iconfont-cli 在Taro框架中使用iconfont图标,不依赖字体,支持多色彩。 支持平台 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 H5 特性 1、一键生成标准组件,多端支持 2、使用方便,import即可 3... -
taro-mall:Taro_Mall是一个多端开源在线商城应用程序,后台是基于litemall基础上进行开发,前端采用Taro...
2021-02-05 22:10:09Taro_Mall是一种多端开源在线商城应用程序,后台是基于litemall基础上进行开发,前端采用Taro框架编写,完全完成微信小程序,头条小程序,和h5移动端,后续替换APP,淘宝,百度小程序进行适应。Taro_Mall已经完成了... -
工地监控小程序-taro、taroui
2021-01-08 16:20:18基于taro,taro-ui开发的工地监控小程序 -
taro-ui-demo:非 Taro UI 官网示例代码
2021-04-30 20:35:35Taro UI Demo 使用 Taro UI 的示例 该仓库不是 Taro UI 示例小程序的源码,源码请查看 相关链接 安装 需要安装 Taro 开发工具 @tarojs/cli npm install -g @tarojs/cli 下载项目并安装依赖 git clone ... -
taro-picker:微信小程序基于Taro 框架开发的日期时间选择器(date-time-picker),可实现类似微信提醒的功能
2021-05-14 17:28:06基于 Taro 实现的时间选择器 本项目基于 pickerView、pickerViewColumn 来自定义了一个选择器用于日期和时间在用一个组件中选择完成。项目使用 taro 框架,也可实现类似微信提醒的时间选择器 简介 本项目所实现的... -
taro2-to-3:芋头2.x项目转换为芋头3.x项目
2021-03-13 13:07:32帮助你将taro 2.x项目升级到taro 3.x项目,基于jscodeshift构建。 动机 愿将taro 2.x项目升级到taro 3.x项目的过程变得轻松愉悦。 使用 在运行前,请先提交你的本地代码修改。 # 全局安装 npm i -g taro2-to-3 # or... -
taro-template:[taro :hammer_and_pick:] 开发模版(包含了 changelog、redux、hook、taro-ui、lodash、...
2021-05-31 01:31:12Taro-ui 在项目目录下,你可以运行 install yarn examination taro info taro doctor dev & build yarn dev:weapp yarn dev:h5 yarn build:weapp yarn build:h5 update yarn global add @tarojs/cli@[version... -
Taro3-Vue3-Demo:taro3使用vue3进行开发
2021-03-29 11:26:22Taro3-Vue3-Demo // option Api data ( ) { return { res : [ ] , msg : "" , } ; } , created ( ) { this . getRes ( ) ; } , methods : { getRes : async function ( ) { this . res = await test ( ... -
taro-with-nextjs:一个同时具备微信小程序和H5服务器渲染的方案
2021-03-16 17:19:52大体想法就是,用Taro使用React语法使用正确的简单的框架功能去实现页面,小程序端能自己独立跑起来,Next.js负责H5 SSR,公用小程序页面代码,因此Taro只负责小程序,Next .js只负责H5。 下面是几个最核心需要解决... -
Taro引入vant Weapp的方法
2021-01-08 16:29:46Taro(V2.0.5)中引入Vant Weapp,(需下载资源到项目中:大小约322KB) 需如下几步: 1.在/src/components下新建文件夹vant-weapp 2.在github上找到Vant-weapp下载文件包,将对应的dist文件夹下内容复制到新建的vant-... -
taro小程序添加骨架屏的实现代码
2020-12-13 09:37:32主框架采用taro,一套代码兼容多端,但是今天这个代码,需要考虑兼容性~ 根据上面的思路,我们首先要找到骨架屏的容器,然后找到需要P成灰色的元素,获取该元素的位置大小信息,最后就是渲染了~ -
taroTest:基于taro,构建小程序及H5,目前已经搭建了基础页面
2021-05-01 18:15:37安装 Taro 开发工具 @tarojs/cli 使用 npm或者yarn 全局安装,或者直接使用 $ npm install -g @tarojs/cli $ yarn global add @tarojs/cli 安装依赖包: $ yarn install 进入项目目录开始开发,可以选择小程序预览... -
taro开发微信小程序的实践
2020-12-01 04:29:18在京东凹凸实验室开发Taro跨平台早期之前,就已经进行Taro尝鲜了。开发这个实例 猫眼电影 已经过去几个月了。案例部分使用的是猫眼电影真实线上接口,关于订座的座位数据是自己模拟实现的,案例只供参考学习。 开发... -
taro-demo.zip
2020-11-26 18:04:23使用Taro进行小程序项目开发,包括路由、状态管理、小程序配置、标题组件等,复制粘贴即可使用Taro框架搭建一个完整的小程序项目 -
taro-tiktok:Taro3 跨端开发教学案例
2021-05-27 15:14:21Taro TikTok 基于 Taro3 编写的跨端(小程序 & H5)短视频 demo 在开发过程中,我遇到了 Taro v3.0.9 在 H5 端的一些问题: Taro.createVideoContext 无法使用 Video 组件无法全屏,播放暂停等方法无法调用 Cover... -
使用Taro实现小程序商城的购物车功能模块的实例代码
2020-11-20 14:36:59Taro 是一套遵循 React 语法规范的 多端开发 解决方案。 现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务要求同时在不同的端都要求有所表现的时候,针对不同的端去编写... -
Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码
2020-11-20 12:04:25Taro 就是可以用 React 语法写小程序的框架,拥有多端转换能力,一套代码可编译为微信小程序、百度小程序、支付宝小程序、H5、RN等 摘要: 年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目... -
taro 使用echarts图表.zip
2020-08-21 17:06:31taro 使用echarts图表,taro版本为3.07,试过taro3.05版本使用小程序echarts,渲染不出来;使用3.07可以正常使用 -
Taro UI 一款基于 Taro 框架开发的多端 UI 组件库-javascript
2021-06-21 10:38:57Taro 是由 京东·凹凸实验室 倾力打造的多端开发解决方案 -
vertify-app:taro手机验证码组件,和taro虚拟数字键盘组件0.1版
2021-03-18 16:47:38vertify-app taro手机验证码组件,和taro虚拟数字键盘组件0.1版 -
解决taro h5在调用接口时出现跨域的情况
2021-05-07 14:41:10解决taro h5在调用接口时出现跨域的情况 修改config下的index.js -
Taro 3 React 小程序解析md文件进行显示
2022-03-14 14:45:02支持Taro 3 React hook,修复了Taro-Parse只支持Taro2的问题,小程序展示markdown文件,直接替换nodemodules中的Taro-parse就可以使用了 -
taro-kit-dva-ts:Taro React TypeScript DVA Mock 脚手架,让前端开发更容易
2021-04-13 21:52:22Taro React TypeScript DVA Mock 脚手架说明 声明: 本脚手架不提供任何形式的担保及保证 本脚手架将持续更新优化并维持最新的依赖 来去自由,欢迎Star 适合人员 所有喜欢并愿意参与前端开发的人员,即便您没有接触...