背景

一開始我們只做微信小程序隨著我們的業(yè)務(wù)不斷擴(kuò)張和各大小程序平臺(tái)的崛起，針對(duì)每個(gè)平臺(tái)都去寫一套代碼是不現(xiàn)實(shí)的。而且原生的小程序開發(fā)模式有很多弊端。

為了讓小程序開發(fā)更簡(jiǎn)單，更高效，我們采用 Taro 作為首選框架，我們將使用 Taro 的實(shí)踐經(jīng)驗(yàn)整理了出來，主要內(nèi)容圍繞著什么是 Taro，為什么用 Taro，以及 Taro 如何使用（正確使用的姿勢(shì)），還有 Taro 背后的一些設(shè)計(jì)思想來進(jìn)行展開，讓大家能夠?qū)?Taro 有個(gè)完整的認(rèn)識(shí)。

Taro 3.0 已經(jīng)逐漸成熟，我們項(xiàng)目已經(jīng)進(jìn)行了Taro 3.0的升級(jí)，因此本文代碼示例以 Taro 3.0 作為基礎(chǔ)。

什么是 Taro

Taro 是一個(gè)多端統(tǒng)一的開發(fā)框架。使用 taro 它可以支持 React 的開發(fā)方式，編寫一次可以運(yùn)行多端的代碼，就能夠生成可以在各種小程序，h5 甚至 React Native 等多端應(yīng)用。

Taro 官方介紹：
Taro 是一個(gè)開放式跨端跨框架解決方案，支持使用 React/Vue/Nerv 等框架來開發(fā) 微信 / 京東 / 百度 / 支付寶 / 字節(jié)跳動(dòng) / QQ 小程序 / H5/ React Native 等應(yīng)用?，F(xiàn)如今市面上端的形態(tài)多種多樣，Web、React Native、微信小程序等各種端大行其道，當(dāng)業(yè)務(wù)要求同時(shí)在不同的端都要求有所表現(xiàn)的時(shí)候，針對(duì)不同的端去編寫多套代碼的成本顯然非常高，這時(shí)候只編寫一套代碼就能夠適配到多端的能力就顯得極為需要。

它的主要特點(diǎn)是：
快：可以快速開發(fā)小程序： 解決小程序開發(fā)各種痛點(diǎn)；
多：可以實(shí)現(xiàn)多終端適配：一套代碼適配小程序、H5、RN 等多終端；

為什么用 Taro

隨著應(yīng)用變得龐大之后，復(fù)雜度越來越高，原生小程序開發(fā)的痛點(diǎn)逐漸暴露出來：
?代碼組織復(fù)雜：寫一個(gè)頁面的文件結(jié)構(gòu)繁瑣（四個(gè)之多）
?規(guī)范不統(tǒng)一：組件、方法命名規(guī)范不統(tǒng)一、各種書寫方式，語法結(jié)構(gòu)不一致像 React 又像 Vue
?孱弱的字符串模板：邏輯表現(xiàn)力不強(qiáng)，不支持 eslint
?依賴管理混亂：缺少 npm 包依賴管理
?不完全的 ES Next：僅支持部分 ES Next 語法，比較新的 ES2020, ES2021 都不支持
?落后的開發(fā)方式：前端工程體系不完善，webpack 打包，css 預(yù)處理等缺失，對(duì)于前端來說比較落后的，對(duì)個(gè)人成長也不利

可選技術(shù)方案可選技術(shù)方案

對(duì)于以上微信小程序開發(fā)模式的痛點(diǎn)，業(yè)界也給出了一些可選方案：

對(duì)比分析

• mpvue 是美團(tuán)研發(fā)的框架，多端適配效果不好，很久問題都沒人維護(hù)；
• WePY 是騰訊出的組件化框架，但是無法適配多端；
• Chameleon 在多端適配方面表現(xiàn)很突出，缺點(diǎn)是不支持京東小程序，無法轉(zhuǎn)換原生小程序（想用只能重寫項(xiàng)目）；
• Taro 優(yōu)秀的特性，遵循 React/Vue 語法規(guī)范，引入的現(xiàn)代化的開發(fā)流程，讓開發(fā)更專注核心代碼，提供健全的代碼檢查方式。

多端需求

Taro 支持平臺(tái)最全面，獨(dú)具轉(zhuǎn)換能力，性能方面優(yōu)于其它框架，總結(jié)特點(diǎn)如下：

• 可以實(shí)現(xiàn)微信小程序原生代碼轉(zhuǎn)換到微信平臺(tái)，百度平臺(tái)等；
• Taro 框架是唯一一款實(shí)現(xiàn)京東小程序適配的框架；
• 支持 React/Vue 語法，更好的支持組件化和 TypeScript；
• 行業(yè)影響力大，社區(qū)活躍，京東內(nèi)部優(yōu)秀團(tuán)隊(duì)研發(fā)的框架，支持有保障，研發(fā)團(tuán)隊(duì)靠譜非常支持我們的工作；
• 更加完善的UI組件庫，支持多端同步調(diào)試能夠適配更多終端；

一處編寫，多端運(yùn)行

設(shè)計(jì)思想

主要采用 React 開發(fā)方式

用 React 寫多端應(yīng)用

核心思想

代碼轉(zhuǎn)換：使代碼可以在不同平臺(tái)上運(yùn)行
運(yùn)行時(shí)適配：使代碼在不同平臺(tái)上有相同表現(xiàn)

以微信小程序?yàn)槔晕⑿判〕绦驗(yàn)槔?/h1>

JSX

WXML

Taro 代碼編譯原理

Taro 的編譯原理：就是對(duì)輸入的源代碼進(jìn)行語法分析，語法樹構(gòu)建，隨后對(duì)語法樹進(jìn)行轉(zhuǎn)換操作再解析生成目標(biāo)代碼的過程。

首先是 Parse，將代碼解析（Parse）成抽象語法樹（Abstract Syntex Tree），然后對(duì) AST 進(jìn)行遍歷（traverse）和替換(replace)（這對(duì)于前端來說其實(shí)并不陌生，可以類比 DOM 樹的操作），最后是生成（generate），根據(jù)新的 AST 生成編譯后的代碼。

開發(fā)時(shí)遵循 React 語法標(biāo)準(zhǔn)，結(jié)合編譯原理的思想，對(duì)代碼文件進(jìn)行一系列轉(zhuǎn)換操作，最終獲得可以在小程序運(yùn)行的代碼。而 React 最開始就是為了解決 Web 開發(fā)而生的，所以對(duì)代碼稍加改動(dòng)，也可以直接生成在 Web 端運(yùn)行的代碼，而同屬 React 語法體系下的 React Native，也能夠很便捷地提供支持。同理其他平臺(tái)，如快應(yīng)用、百度小程序等，將源碼進(jìn)行編譯轉(zhuǎn)換操作，也能獲得該平臺(tái)下的對(duì)應(yīng)語法代碼。

可以看出小程序和 Web 端上組件標(biāo)準(zhǔn)與 API 標(biāo)準(zhǔn)有很大差異，這些差異僅僅通過代碼編譯手段是無法抹平的，例如你不能直接在編譯時(shí)將小程序的 直接編譯成

，因?yàn)樗麄冸m然看上去有些類似，但是他們的組件屬性有很大不同的，僅僅依靠代碼編譯，無法做到一致，同理，眾多 API 也面臨一樣的情況。針對(duì)這樣的情況，Taro 采用了定制一套運(yùn)行時(shí)標(biāo)準(zhǔn)來抹平不同平臺(tái)之間的差異。

這一套標(biāo)準(zhǔn)主要以三個(gè)部分組成，包括標(biāo)準(zhǔn)運(yùn)行時(shí)框架、標(biāo)準(zhǔn)基礎(chǔ)組件庫、標(biāo)準(zhǔn)端能力 API，其中運(yùn)行時(shí)框架和 API 對(duì)應(yīng) @taro/taro，組件庫對(duì)應(yīng) @tarojs/components，通過在不同端實(shí)現(xiàn)這些標(biāo)準(zhǔn)，從而達(dá)到去差異化的目的。

多端適配基礎(chǔ)標(biāo)準(zhǔn)

• 基礎(chǔ)框架（生命周期、組件API）：以React的生命周期、組件api為基礎(chǔ)，小程序的特性作為補(bǔ)充
• 標(biāo)準(zhǔn)組件庫（View、Button）: 以微信小程序組件為標(biāo)準(zhǔn)，各端模擬實(shí)現(xiàn)
• 標(biāo)準(zhǔn)Api （request、setState）：擴(kuò)展的小程序標(biāo)準(zhǔn)Api，各端模擬實(shí)現(xiàn)

多端適配基礎(chǔ)架構(gòu)圖如下：

快速上手

初始化項(xiàng)目

環(huán)境準(zhǔn)備：需要有個(gè) node 環(huán)境，運(yùn)行 npm 命令：

開始使用 Taro 編寫頁面：

運(yùn)行項(xiàng)目

多平臺(tái)啟動(dòng)命令示例：

如果同時(shí)看三端效果：分別運(yùn)行以上命令即可；

微信原生小程序轉(zhuǎn)換 Taro 小程序

Taro 項(xiàng)目的組成

Taro項(xiàng)目目錄結(jié)構(gòu)

基本的目錄結(jié)構(gòu)：

比較完整的多端項(xiàng)目結(jié)構(gòu)：

完整的文檔請(qǐng)?jiān)L問：https://taro-docs.jd.com/

多端適配

多終端配置文件編寫

?微信的配置文件 project.config.JSON，文件內(nèi)容可以自定義微信小程序的選項(xiàng)，運(yùn)行的目錄和 appid 等；
?百度小程序的配置文件 project.swan.json 內(nèi)容和微信類似；
?京東小程序的配置文件 project.jd.json 內(nèi)容和微信類似；
?其它平臺(tái)的小程序都有獨(dú)立的配置文件便于運(yùn)行的調(diào)試；

多終端入口文件

每個(gè)平臺(tái)有不同的頁面配置信息：
?微信小程序頁面是全量的，有微信登錄頁面（其它平臺(tái)不需要）；
?百度小程序有專門的登錄頁面有些頁面百度不支持需隱藏比如：圖片裁剪，達(dá)達(dá)同城，打印等；
?京東小程序：不支持批量寄，不需要登錄頁面，不支持分包，都要寫入主包中；

差異化配置

• 不同平臺(tái)加載對(duì)應(yīng)的文件：
• 每個(gè)平臺(tái)差異化配置信息：
• 地圖類型；
• 渠道信息；
• 請(qǐng)求頭信息；
• 。。。
  代碼差異化處理

平臺(tái)特定 js 代碼塊兒實(shí)現(xiàn)，在任意 js 代碼中加入如下語法：

平臺(tái)特定 css 代碼塊兒實(shí)現(xiàn), 在任意 css 代碼中加入如下語法：

提示：代碼在打包時(shí)不會(huì)增加包體積，針對(duì)不同平臺(tái)提取相應(yīng)代碼。

多端適配案例

一些典型的多端通用解決方案：

• 樣式解析：
• 微信是 rPX，百度小程序 vw，京東小程序 px；
• Taro 統(tǒng)一使用 px 通過框架處理轉(zhuǎn)換成對(duì)應(yīng)平臺(tái)的像素，因此 px 值不要使用單數(shù)；
• 1px(像素)的邊框通常會(huì)轉(zhuǎn)換成平臺(tái)對(duì)應(yīng)單位會(huì)導(dǎo)致無法顯示， 可以使用大寫的PX單位，例如： 1PX ；
• 百度小程序和京東小程序不支持 externalClasses，其它小程序也可能不支持避免使用；
• 模塊導(dǎo)入和導(dǎo)出：
• 導(dǎo)入模塊需要使用ES6 的 import， 不要使用 require 到 JS 文件（有些平臺(tái)不支持）；
• 內(nèi)聯(lián)本地圖片資源可以使用 require 動(dòng)態(tài)導(dǎo)入；
• 導(dǎo)入外部資源的 url 必須使用 https，有些平臺(tái)或機(jī)型不支持 http ;
• 小程序插件導(dǎo)入可以使用 require 但是要做多平臺(tái)適配和兼容性處理；
• 組件開發(fā)細(xì)節(jié)：
• 組件 key 取值，不要使用 index ，對(duì)象的 id 屬性要先解構(gòu)出來；
• 組件渲染條件取 length 屬性頁面不更新；
• dataset 問題：百度和微信獲取的不一樣，都要用小寫來保持代碼一致： 這種駝峰的：data-goodsIndex={index} ，微信會(huì)轉(zhuǎn)成全小寫 goodsindex， 百度會(huì)保留駝峰 ，正確地寫法：data-goodsindex={index} ；

百度小程序開發(fā)注意事項(xiàng)：

• 層次較深的狀態(tài)不會(huì)更新時(shí)，需要解構(gòu)變量；
• 轉(zhuǎn)換成 vw 樣式有偏差，確保樣式的通用性；
• 個(gè)別組件 height: auto 有bug，不寫沒事；
• line-height 居中有偏差，用 flex 比較穩(wěn)妥；
• fixed 布局居底要設(shè)置 left: 0, bottom: 0 ，不寫默認(rèn)會(huì)有問題（默認(rèn)在中間渲染）；
• mask 組件層級(jí)較深時(shí)，可能不會(huì)更新狀態(tài)，可以使用 tt-modal 代替；
• 圖片裁剪，語音識(shí)別，打印功能等依賴原生 API 不支持；
• 狀態(tài)更新從有到無需要顯性設(shè)置 null ，例如將列表組件隱藏：this.setState({list: null}) {list && <組件實(shí)例>}；

京東小程序開發(fā)注意事項(xiàng)：

• 不支持全局覆蓋組件樣式，如果想兼容需要單寫加上拼接樣式名；
• 不支持小程序分包，需要單獨(dú)配置頁面路由信息；
• showModal 彈窗不能定制 confirmColor 屬性；
• storagesync 不支持存儲(chǔ) json 數(shù)據(jù)，讀取需要自己手動(dòng)JSON.parse；
• 不支持 canvas繪畫API：微信自定義分享功能，圖片裁剪，訂單條形碼等功能都做不了；
• 不支持同層渲染，原生組件上只能使用 Cover 組件；
• ios 內(nèi)嵌H5，如果url帶參數(shù)，需要手動(dòng)做一下urlencode編碼；
• H5頁面使用小程序 webview 不具備全部京東 app webview 功能，有些功能不支持；
• 京東小程序分享 URL 和 其它小程序分享的 URL 不一樣，要注意路徑的差異區(qū)分：例如：shareURL: 京東小程序： page/index/index 微信小程序：/pages/index/index

多端同步調(diào)試

在 config/index.js 配置：outputRoot: dist/${process.env.TARO_ENV}

生態(tài)與規(guī)劃

物流風(fēng)格的 Taro UI組件庫—Tarot(已適配Taro3.0)

定制化 Taro 模板工程定制化 Taro 模板工程

模板工程主要特性：
?自帶按需引入的 Tarot 組件庫及組件使用示例。
?自帶 pandora-tools 中的工具，如網(wǎng)關(guān)調(diào)用插件等。
?登陸適配多端，小程序端自動(dòng)引入京東無線登陸插件，h5端自動(dòng)跳轉(zhuǎn)無線統(tǒng)一登陸M頁d等。
?網(wǎng)關(guān)調(diào)用適配多端，自帶 Demo 示例；
?包含 TypeScript 和 Redux等更多高級(jí)API及用法示例；
?其它功能持續(xù)更新……

小程序 Mini Debug 工具

MiniDebug 是一款多端小程序調(diào)試工具，旨在提高小程序開發(fā)、測(cè)試效率的工具庫
功能介紹：
主要功能包括環(huán)境切換、身份Mock、應(yīng)用信息獲取、位置模擬、緩存管理、掃一掃、H5跳轉(zhuǎn)、更新版本等。工具部分頁面如下圖所示：
目前已經(jīng)在 GitHub 上開源（歡迎 issue）：https://github.com/jdlfe/minidebug

物流風(fēng)格的小程序可視化拖拽平臺(tái)（規(guī)劃中）

京東商城已經(jīng)實(shí)現(xiàn)了小程序可視化拖拽平臺(tái)：https://ling.jd.com/atom/cms/pc/06599

結(jié)語：

Taro V3.0.0 目前支持 React、Nerv、Vue 三類框架，在未來 Taro 將開放拓展能力，使得開發(fā)者可以通過 Taro 拓展更多的框架支持，（比如：適配 Flutter 將成為可能 ）。目前Taro框架完善社區(qū)活躍，即使沒有多端需求，僅用 Taro 開發(fā) H5 也是個(gè)不錯(cuò)的選擇（未來可以 0 成本接入小程序平臺(tái)），想了解更多 Taro 3.0 實(shí)踐經(jīng)驗(yàn)歡迎線下交流。