項目體積是困擾小程式開發者的一大問題,如果開發者使用 Taro React 進行開發,更是不得不引入接近 100K 的 React 相關依賴,這讓項目體積變得更加捉襟見肘。是以,Taro v3.4 的主要方向,是探索對于 Preact 的支援。
Preact 是一款體積超小的類 React 架構,提供和 React 幾乎一緻的 API,而體積隻有 5k 左右。
Taro v3.4 正式實作了對 Preact 的支援,下文将簡單介紹适配思路及用法。
Taro 在小程式環境模拟實作了類浏覽器環境,是以理論上任意的前端架構都可以在 Taro 中使用。
對于 Preact,它與 React 最大的不同在于沒有實作合成事件系統,而是直接使用浏覽器的事件方法,此外還使用了少量和 React 不一樣的 DOM API。
對于事件的适配,Taro 已經提供了浏覽器規範的事件方法,是以隻需要再處理 Preact 的事件名與小程式事件名的差異。而對于 DOM 方法,則需要額外實作 Preact 使用到的 DOM API。
Preact 使用了 <code>preact/compat</code> 去磨平與 React 的 API 差異,讓 React 的各種生态庫可以直接運作在 Preact 上。得益于此,開發時我們可以使用任意的 React 生态庫,甚至對 React、ReactDOM 的 API 引用也不需要修改,隻需要簡單地配置 alias 即可:
文檔位址
運作 <code>taro init</code> 時,架構選擇 Preact 即可建立基于 Preact 的項目。
将 CLI、項目中 Taro 相關的依賴更新到 <code>v3.4.0-beta</code> 版本。
安裝依賴:
修改 Taro 編譯配置:
修改 Babel 配置:
如果項目使用了 TypeScript,請打開 <code>skipLibCheck</code> 配置,以避免和其它 React 生态庫配合使用時報類型錯誤:
Vue3 提供了 Composition API(組合式 API) 特性,和傳統的 Options API 不同,Composition API 提供了全新的編碼方式 ,可以讓我們更好地去組織和複用代碼邏輯。
過去 Taro 隻提供了 Options API 版本的小程式生命周期鈎子,開發者往往對于這些鈎子和 <code>setup</code> 函數内部該如何通訊、如何共享資料等問題感到困惑,更是不能很好地相容 script setup 文法。
是以 Taro v3.4 提供了 Composition API 版本的小程式生命周期鈎子,讓開發者更友善地使用 <code>setup</code> 文法,例子:
目前 Taro 對于前端架構的适配層代碼都放在了運作時庫 <code>@tarojs/runtime</code> 裡,意思即當開發者使用 React 時,還是會包含 Vue2、Vue3 的适配層代碼。(Tree Shaking 失敗的原因是使用了 Webpack Provider Plugin 導出 <code>@tarojs/runtime</code> 裡的 BOM API)
是以,Taro v3.4 以 Taro 插件的形式去實作對于各前端架構的适配,其中一個好處是可以把上述運作時适配層的代碼拆分到各個插件内。加上對運作時代碼的寫法優化,3.4 版本的運作時減少了約 30k 的空間。
另一個好處是現在開發者可以通過編寫 Taro 插件去支援任意的前端架構,而幾乎不需要改動 Taro 的核心代碼。
如果安裝失敗或打開項目失敗,可以删除 node_modules、yarn.lock、package-lock.json 後重新安裝依賴再嘗試。
修改 <code>package.json</code> 檔案中 Taro 相關依賴的版本修改為 <code>~3.4.0-beta.0</code>,再重新安裝依賴。
因為 Taro v3.4 把各前端架構的适配邏輯拆分到對應的插件中,是以舊項目更新時需要安裝對應架構的适配插件:
使用 React,請安裝 <code>@tarojs/plugin-framework-react</code>
使用 Vue2,請安裝 <code>@tarojs/plugin-framework-vue2</code>
使用 Vue3,請安裝 <code>@tarojs/plugin-framework-vue3</code>
百度小程式使用 <code>onInit</code> 代替 <code>onLoad</code> 生命周期,以優化首次啟動時間。
接下來 Taro 的重心将會放在編譯系統更新(如更新 Webpack5)和優化 H5 能力(如輸出 SSR 方案、優化路由系統等)上。
Taro 疊代的另一條主線是對鴻蒙應用 && OpenHarmony 的适配,Taro 與 OpenHarmony 團隊成立了跨平台 UI 興趣組(SIG-CROSS-PLATFORM-UI),聯合社群共同展開适配工作。目前第一階段的開發工作即将完成,12 月初會釋出首個可用的體驗版本。
相關咨詢:
鴻蒙 && OpenHarmony 适配小組
适配進度
鴻蒙 & OpenHarmony 交流群:
歡迎關注凹凸實驗室部落格:aotu.io
或者關注凹凸實驗室公衆号(AOTULabs),不定時推送文章: