大家好，我是若川。我持續組織了近一年的源碼共讀活動，感興趣的可以?點此掃碼加我微信 lxchuan12?參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。歷史面試系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信進群。

---

近期我們確定了 v3.6 版本的代號「Reach」，并發布了 v3.6-canary 版本，多個新特性在該版本內開放給社區各位開發者體驗，歡迎大家試用并在社區中反饋相關問題。

一、支持路由庫—

Taro 3 適配前端 UI 框架的方式更接近于前端的本質，通過在小程序端模擬實現框架所需的 BOM/DOM API 來達成，對于適配各個路由庫也是同樣的思路。

1. 運行時引入 History & Location 對象

在 Web BOM 中，History & Location 對象是重要組成部分，它們是實現前端路由的關鍵。Taro 為了支持前端路由庫的使用，在運行時中引入了 histroy location 對象的實現，且盡可能與 Web 端規范對齊，你可以在 window 對象上訪問到 history 和 location 對象。同時，也支持監聽 hashchange 和 popstate 事件，這為使用路由庫提供技術基礎。

//?統稱:?頁面路由狀態
window.history
window.location//?支持監聽事件
window.addEventListener('hashchange',?()?=>?{})
window.addEventListener('popstate',?()?=>?{})

小程序天然支持多頁面(pages 數組配置)，因此 Taro 并非以整個應用為一個路由系統，而是順應小程序規范以頁面維度進行路由管理。每當切換頁面時，會將當前頁面的頁面路由狀態緩存。跳轉至新頁面后會重新創建頁面路由狀態，并掛載在 window 對象上。當返回上一級頁面時，會將上一級頁面的頁面路由狀態重新掛載到 window 對象中。

2. 使用路由庫

至此，可以在小程序中使用成熟的前端路由庫了，包括 react-router 和 vue-router。在路由庫中，諸如 <Link> 組件內部會動態生成 <a> 標簽，因此需要引入 [@tarojs/plugin-html](https://docs.taro.zone/docs/use-h5 "@tarojs/plugin-html") 插件以支持在 Taro 中使用 html 標簽開發組件。

{"plugins":?["@tarojs/plugin-html"]
}

在 Taro 編譯過程中，當 DOM 序列化數據的 nn 字段為 HTML 標簽時，標簽會映射為對應的小程序組件名稱。由于無法提前預知動態標簽，因此需要應用顯式告知可能會使用到的動態標簽。例如在應用中塞入一個無樣式的標簽名即可：

<View><a></a>
</View>

更多細節可以查看 官方文檔^[1]，也可以查看官方提供的 DEMO 獲知更多用法。

二、跨框架組件庫—

借助于 stencil，Taro 3 得以通過 Web Components 實現一套跨框架組件庫，不過由于其 2.14+ 版本會使用一些 webpack4 不兼容的語法特性，在 3.6-canary 之前的組件庫將 stencil 版本限制在 2.13+ 版本內，在 3.6-canary 版本中也針對該問題進行了修復，同時借助 stencil 的新特性優化諸多組件庫在 props 與事件的遺留問題。

1. Web 端框架適配器

Web Components 雖然可以在各個前端 UI 框架中使用，但是依舊會有很多兼容性問題，這些可以通過 Custom Elements Everywhere^[2]? 的一系列測試用例有所了解。所以在 Taro 3 發布之初，Web 端跨框架組件庫還通過提供不同前端 UI 框架的自定義適配器，讓不同框架使用 taro 提供的跨框架組件。

盡管這套適配層方案能夠很好的兼容 react 框架，但對于組件庫的維護者來說會額外的心智負擔，比如新增組件時需要同步更新適配器；這個問題在 vue 中則更為明顯，不僅 props 需要額外的配置，表單類組件也需要對事件進行標注等。這些問題不僅提升了新同學介入組件庫維護的門檻，也使得維護者不能專注于組件庫的能力優化。

解決問題的方法當然也很簡單，那就是通過腳本在組件庫編譯時針對不同 UI 框架自動化導出對應組件，社區內也有足夠多方案可供選擇。在這里我們使用官方提供的 ?ds-output-target^[3] 工具并在一定程度上調整輸出結果，并同步過往適配器中 Taro 做出的體驗優化。

在 3.6 版本中，新的適配層不僅對齊各個框架組件使用體驗，同時也補齊過往適配器在迭代過程中部分特性兼容性的缺失問題。如果依舊希望使用 3.6 以前版本適配器，也可以參考以下示例，通過配置別名替換組件庫。

//?config/index.jsconst?config?=?{h5:?{webpackChain?(chain)?{chain.resolve.alias.set(//?當前版本適配層地址?@tarojs/components/dist/[framework]'@tarojs/components/dist/react',//?舊版本適配層地址?@tarojs/components/dist/[framework]/component-lib'@tarojs/components/dist/react/component-lib')}}
}

2. 類型自動生成

如何快速同步各小程序平臺當前支持的類型，對于 Taro 來說一直是個很讓人頭疼的問題，實時跟進各個平臺的每一次更新很難做到，更多時候我們都通過開發者提交的 PR 或 issue 對這些平臺的類型更新。如果能夠根據各個小程序平臺官方提供的文檔自動化生成組件類型，這對于開發者來說會是一個很棒的體驗。

通過在 Taro 社區中的積極探討^[4]和論證，我們引入了自動同步各小程序平臺組件類型的腳本，并通過與 GitHub CI 讓機器人為 Taro 倉庫提交類型更新 PR。組件類型的自動化同時讓 Taro 的文檔在類型更新時，同步這些平臺組件的變更，為開發者提供更好的文檔索引能力。

在這里特別感謝 @rebinv8^[5] 為組件類型自動化腳本做出的貢獻～

三、支持適配鴻蒙—

在 Taro 與 OpenHarmony 建立官方合作關系，并受邀成立 CrossPlatformUI Sig^[6]（跨平臺前端框架興趣小組）后，讓 Taro 支持支配鴻蒙就一直在議程上，鴻蒙的方舟開發框架提供類 Web 范式編程，支持使用 JS 開發 UI 層，其語法與小程序相接近，可以沿用 Taro 現有的架構適配鴻蒙。

持續關注 Taro 的開發者可能還記得，在 v3.5-canary 版本時，我們曾推出支持 Taro 應用適配到鴻蒙平臺的插件，但最終沒有合入 v3.5 版本主干并順勢推出該能力。在 @tarojs/plugin-platform-harmony 端平臺插件經過一段時間的打磨，相關能力與特性也在社區推進下持續優化，框架編譯的項目在鴻蒙開發板上得到進一步驗證，同時在 Taro v3.5 新增的 @tarojs/webpack5-runner 編譯內核在 canary 版本中也能夠為鴻蒙項目編譯提供支持，終于我們在 v3.6-canary 中再次為社區開發者提供了適配鴻蒙的端平臺插件。

使用方法

1. 在項目中安裝鴻蒙端平臺插件

   pnpm?add?-D?@tarojs/plugin-platform-harmony@canary

   “

   需要注意鴻蒙插件不在 Taro 項目內維護，所以并不會每次發布同版本號版本，直接使用 minor 與 Taro 版本號相同的版本即可。

   ”

2. 在 config/index.js 中增加編譯配置

   //?config/index.jsconfig?=?{//?配置使用插件plugins:?['@tarojs/plugin-platform-harmony'],mini:?{//?如果使用開發者工具的預覽器（previewer）進行預覽的話，需要使用 development 版本的 react-reconciler。//?因為 previewer 對長串的壓縮文本解析有問題。（真機/遠程真機沒有此問題）debugReact:?true,//?如果需要真機斷點調試，需要關閉?sourcemap?的生成enableSourceMap:?false},//?harmony?相關配置harmony:?{//?【必填】鴻蒙應用的絕對路徑projectPath:?path.resolve(process.cwd(),?'../MyApplication'),//?【可選】HAP?的名稱，默認為?'entry'hapName:?'entry',//?【可選】JS?FA?的名稱，默認為?'default'jsFAName:?'default'}
   }

3. 準備鴻蒙運行環境

   “

   開發鴻蒙軟件需要用到 HUAWEI DevEco Studio，它提供了模板創建、開發、編譯、調試、發布等服務。

   ”

   鴻蒙運行環境主要包括以下內容

   （1） 注冊開發者賬號

   （2）下載 DevEco Studio 安裝包

   （3）啟動 DevEco Studio，根據工具引導下載 HarmonyOS SDK

   （4）新建 MyApplication JS 項目

   （5）使用預覽器或真機查看應用效果

   參考資料：《初窺鴻蒙^[7]》、《華為開發者工具^[8]》、《鴻蒙開發文檔^[9]》

4. 項目運行

   Taro 編譯鴻蒙項目命令

   $?taro?build?—-type?harmony?—-watch

   

   “

   testHarmony 為您通過 DevEco Studio 創建的 JS 項目。

   ”

特別感謝以下同學為鴻蒙適配作出的貢獻：

@AdvancedCat^[10]、@jiaozitang^[11]、@huozhongyi123^[12]、@troy-sxj^[13]、@JSZabc^[14]、@crazyonebyone^[15]、@evernoteHW^[16]、@soulhat^[17]、@xueshuai^[18]、@LuMeiling^[19]

四、RN—

1. React Native 0.70 版本支持

React Native 0.70 版本已于 2022-9-5 正式發布^[20]。在 0.70 版本中 Hermes 已成為默認的 JS 引擎，我們將與 RN 默認配置保持一致，如不需要可自行關閉。Hermes 也帶來了 RN 性能的較大提升，特別是啟動場景，詳細內容參考官方文章^[21]。Taro 將與 RN 社區保持同步，將默認的 RN 版本設置為 0.70。相關依賴也已同步至最新版本，仍然可使用 yarn upgradePeerdeps 進行更新。@react-native-community/clipboard 及 @react-native-community/cameraroll 已被棄用，更新后可刪除。

注意：升級后將不再支持 iOS 12，詳細內容請參考 discussions^[22]。

2. @tarojs/rn-runner 代碼重構

之前的版本中，為了讓 Taro 代碼能夠運行在 RN 平臺上，我們對 Metro 的編譯過程做了較多的定制，并且封裝了入口文件以及 metro 的相關配置。這樣做導致了多個問題：

1. 打包只能通過 yarn build:rn 等方式進行，而無法使用 react-native bundle 進行，存在學習成本。

2. RN 的編譯流程中，需要過濾掉 RN 原有的 bundle 打包過程，替換成 Taro 的打包。這一步在開發者環境搭建過程中，常常出現問題。

3. 無法對入口文件進行處理，比如加入一些全局邏輯。

為了讓整體開發體驗跟 RN 更加一致，減少開發者的理解成本。我們對 @tarojs/rn-runner 的代碼進行了重構。將 Taro RN 需要的所有編譯邏輯，都封裝到了 metro 配置中。新版本在項目根目錄下會創建入口文件 index.js 和配置文件 metro.config.js。如項目本身有這兩個文件，則不會生成，需要參考模板^[23]進行添加或合并。另外 Taro RN 的相關配置，集中在 resolver 和 transformer 中，如需覆蓋，建議先看一下相關源碼。

這樣做之后，Taro RN 的打包過程就與 RN 本身無太多區別，與 RN 項目集成會更加靈活。react-native 命令行的使用，請參考官方文檔^[24]， yarn build:rn 等命令仍然保留。使用 react-native 命令行無法自動打印二維碼，請輸入 q 進行打印。ip 更換等場景，也可以輸入 q 重新打印二維碼。

3. 調試工具 Taro Playground 升級至 Taro 3.6 版本及 React Native 0.70

Taro Playground^[25] 作為 Taro RN 端的調試工具及跨端 Demo，進行了同步更新。此次更新無法保證向下兼容，使用舊版本 Taro 的開發者，如需調試 Android，可在 releases^[26] 中下載舊包進行調試。在 App Store 中，我們只上架最新版本，需要舊版本的開發者請不要開啟應用自動更新。如不慎升級，需自行打包編譯，或聯系我們加入測試組。

五、研發生態—

1. 小程序持續集成 CI

去年 Taro 提供小程序持續集成插件 @tarojs/plugin-mini-ci ，幫助開發者提供更好的研發體驗，經過一年的項目沉淀和反饋，在本次版本更新中提供了更優秀的體驗。

本次新增特性支持獨立的 open、preview、upload 命令，操作自定義目錄適用于將 taro 作為項目一部分（混合開發）的開發場景；同時再次同步各個小程序端的 CI 版本變更，并支持應用到釘釘小程序上；統一所有平臺 CI 構建后的輸出數據，并將數據傳遞給新增的onPreviewComplete、onUploadComplete兩個鉤子用戶可以編寫新的插件，基于這個鉤子實現 飛書、釘釘 的 CI 推送功能等等。

更多詳情可以參考官方文檔^[27]，同時要特別感謝 @bigMeow^[28] 為組件類型自動化腳本做出的貢獻～

2. PostCSS 版本升級

在 Taro 項目持續迭代的過程中，部分依賴穩定沒有實時跟進各個社區內的特性與優化，并升級相關依賴，PostCSS 就是其中之一。如果開發者想要通過新版本的特性來優化構建流程與最終產物，相對會很困難且可能會存在一定問題阻塞。

為此在 3.6 canary 通過梳理項目內相關插件與依賴，對 PostcCSS 版本進行梳理并升級，升級后版本為 v8.4.18。本次升級主要包含以下內容：

1. 對 Taro 內部的 PostCSS 插件使用 PostCSS 8 版本 API 進行改寫，降低代碼量同時減少插件對 CSS 掃描次數進而提高構建速度；

2. 使用 peerDependencies 管理 postCSS 依賴，降低用戶的 node_modules 體積和復雜度；

3. 對 Taro 全量模板的 PostCSS 版本同步進行更新，方便開發者對新特性的使用。

特別感謝 @xueshuai^[29] 為相關工作做出的貢獻，希望開發者可以因此獲得更好的研發體驗。

六、升級指南—

1. 創建 canary 版本項目：

#?安裝?**v3.6.0-canary?的?CLI?工具**
npm?i?-g?@tarojs/cli@**canary
#?創建?canary?版本項目
taro?init?taro_canary_project#?也可以跳過安裝?CLI?工具使用?npx?創建?canary?版本項目
npx**?@tarojs/cli@**canary?init?taro_canary_project**

2. 已有項目升級到 canary 版本：

1. 將 package.json 文件中 Taro 相關依賴的版本修改為 3.6.0@canary

2. 重新安裝依賴，如果安裝失敗或打開項目失敗，可以刪除 node_modules、yarn.lock、package-lock.json 后重新安裝依賴重新嘗試。

最后—

Taro v3.6 代號「Reach」，致遠星代表著不屈和希望，希望該版本能夠給開發者帶來更好的用戶體驗，感謝各位參與到 Taro 開源生態共建的同學們，所有的努力都讓 Taro 的生態更加美好，為建立更加完善、更加可持續的 Taro 開源生態，貢獻力量！

參考資料

[1]

官方文檔: https://docs.taro.zone/docs/router-extend

[2]

Custom Elements Everywhere: https://custom-elements-everywhere.com/

[3]

ds-output-target: https://github.com/ionic-team/stencil-ds-plugins/blob/master/README.md

[4]

探討: https://github.com/NervJS/taro/discussions/11740

[5]

@rebinv8: https://github.com/robinv8

[6]

CrossPlatformUI Sig: https://gitee.com/openharmony-sig/taro

[7]

初窺鴻蒙: https://juejin.cn/post/6972109475347955749

[8]

華為開發者工具: https://developer.harmonyos.com/cn/develop/deveco-studio

[9]

鴻蒙開發文檔: https://developer.harmonyos.com/cn/documentation

[10]

@AdvancedCat: https://github.com/AdvancedCat

[11]

@jiaozitang: https://github.com/jiaozitang

[12]

@huozhongyi123: https://github.com/huozhongyi123

[13]

@troy-sxj: https://github.com/troy-sxj

[14]

@JSZabc: https://github.com/JSZabc

[15]

@crazyonebyone: https://github.com/crazyonebyone

[16]

@evernoteHW: https://github.com/evernoteHW

[17]

@soulhat: https://github.com/soulhat

[18]

@xueshuai: https://github.com/xueshuai

[19]

@LuMeiling: https://github.com/LuMeiling

[20]

React Native 0.70 版本已于 2022-9-5 正式發布: https://reactnative.dev/blog/2022/09/05/version-070

[21]

官方文章: https://reactnative.dev/blog/2022/07/08/hermes-as-the-default

[22]

discussions: https://github.com/NervJS/taro/discussions/12468

[23]

模板: https://github.com/NervJS/taro-project-templates/tree/v3.6/react-native

[24]

官方文檔: https://github.com/react-native-community/cli#documentation

[25]

Taro Playground: https://github.com/wuba/taro-playground

[26]

releases: https://github.com/wuba/taro-playground/releases

[27]

官方文檔: /docs/plugin-mini-ci

[28]

@bigMeow: https://github.com/bigmeow

[29]

@xueshuai: https://github.com/xueshuai