Taro 3.5 canary 釋出:支援適配 鴻蒙

凹凸實驗室發表於2021-12-09

一、背景

鴻蒙作為華為自研開發的一款可以實現萬物互聯的作業系統,一經推出就受到了很大的關注,被國人寄予了厚望。而鴻蒙也沒讓人失望,今年 Harmony2.0 正式推出供使用者進行升級之後,在短短的三個月內實現了 1.2 億的裝機量,並且在前不久的華為開發者大會上,華為宣佈 Harmony2.0 的裝機量已經突破了 1.5 億。

眾多應用廠商都逐步推出了適配的鴻蒙應用,Taro 作為一個開放式的 跨端跨框架 解決方案,不少開發者期待將小程式的能力移植到鴻蒙 OS 上,可以使用 Taro 開發鴻蒙 && OpenHarmony 應用。

鴻蒙的方舟開發框架提供類 Web 正規化程式設計,支援使用 JS 開發 UI 層,其語法與小程式相接近。經過前期調研,可以沿用 Taro 現有的架構適配鴻蒙

今年 6 月份我們新建了支援鴻蒙的提案,希望能達成三大目標:

  • 開發者可以使用 Taro 開發鴻蒙應用。
  • 開發者可以把現有的 Taro 應用適配到鴻蒙平臺。
  • 開發者可以使用 Taro 的反向轉換工具,把原生開發的小程式轉換為 Taro 應用,再適配到鴻蒙平臺。

目前 Taro 和 OpenHarmony 建立了官方合作關係,併成立了跨平臺 UI 興趣小組,同時 Taro 與華為保持著內部溝通與分享,Taro 擁有的海量開發者和優秀案例,能有效補充鴻蒙生態。

二、實現細節

鴻蒙的 JS UI 語法與小程式類似,但畢竟兩者底層原理不一樣,不可避免地存在許多差異。接下來將簡單介紹鴻蒙與小程式的主要差異,和 Taro 又是如何處理這些差異的。

1. 鴻蒙與小程式的異同

1.1 專案組織

鴻蒙的專案組織和小程式類似,有入口檔案 app.js 、頁面、自定義元件。

其中頁面、自定義元件均由三類檔案組成:

  • .hml 用來描述佈局結構。與小程式的模板檔案相比,語法、支援的能力有少許區別。
  • .css 用來描述頁面樣式。
  • .js 用於處理頁面和使用者的互動,預設支援 ES6 語法。

1.2 配置檔案

和小程式規定的入口檔案、頁面檔案、自定義元件各自對應一份配置檔案不一樣,鴻蒙 JS UI 的配置檔案只有一份。

鴻蒙的路由和小程式一樣是配置式的,需要在 JS UI 的配置檔案中進行配置。

1.3 樣式

CSS 方面,鴻蒙和 RN 一樣有著諸多限制。例如不支援盒子模型、各元件只支援部分 CSS 屬性等。

1.4 元件 & API

鴻蒙提供了一系列功能豐富的元件,與小程式的元件相比,命名、功能上略有差別。

API 也是一樣的,兩者的 API 集合有部分交集,用法、功能上有差別。

2. 相容細節

2.1 Taro 可以解決什麼?

Taro 適配鴻蒙致力於儘可能地抹平差異,但作為一個框架,註定有它能夠解決和不能解決的問題。

語法差異可以通過編寫執行時框架去處理;使用鴻蒙的元件、API 去儘可能地實現微信小程式規範的元件和 API,以抹平兩者之間的使用差別。

而 CSS 的差異、元件和 API 能力上的差異等依賴著鴻蒙底層實現,Taro 是無法解決的。

適配方案

2.2 鴻蒙外掛

Taro 在鴻蒙方面的相容工作主要由 @tarojs/plugin-platform-harmony 外掛來完成,開發者引入該外掛即可編譯為鴻蒙應用。它主要做了這些適配工作:

a) 模板

熟悉 Taro 的同學都應該清楚,Taro 在小程式端利用 <template> 標籤的遞迴來渲染頁面動態的 DOM 樹。而鴻蒙中並沒有 <template> ,因此我們使用自定義元件進行遞迴。

b) 執行時

執行時主要在鴻蒙端相容了小程式的生命週期和資料更新方法 setData

c) 元件 & API

我們使用鴻蒙的原生語法封裝了符合微信小程式規範的元件庫和 API 庫。在相容微信小程式的屬性的同時,也保留了鴻蒙獨有的支援屬性。

目前共適配了 29 個元件,16 類API。元件示例庫可參考:taro-components-sample

元件示例圖

3. 架構圖

架構圖

三、使用方法

如您是新專案, 升級 Taro 選擇鴻蒙模板即可;

舊專案需要按照如下方法進行手動配置:

1. 把 Taro 升級到 v3.5.0-canary.0 版本

首先需要安裝 v3.5.0-canary.0 的 CLI 工具

npm i -g @tarojs/cli@canary

然後更新專案本地的 Taro 相關依賴:把 package.json 檔案中 Taro 相關依賴的版本修改為 ~3.5.0-canary.0,再重新安裝依賴。

如果安裝失敗或開啟專案失敗,可以刪除 node_modulesyarn.lockpackage-lock.json 後重新安裝依賴再嘗試。

2. 安裝 taro 適配鴻蒙外掛

(1)Taro 專案中安裝鴻蒙外掛 @tarojs/plugin-platform-harmony

$ yarn add --dev @tarojs/plugin-platform-harmony

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


config = {
  // 配置使用外掛
  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)使用預覽器或真機檢視應用效果

《初窺鴻蒙》 《華為開發者工具》《鴻蒙開發文件》

4. 專案執行

執行命令

$ taro build —type harmony —watch

若您在步驟 2(2) 設定好了打包輸出到鴻蒙專案的路徑,即可檢視 Taro 適配鴻蒙的應用效果。

testHarmony 為您通過 DevEco Studio 建立的 JS 專案。

執行效果圖

四、最後

接下來我們會繼續完善對鴻蒙的適配工作,預計會在 2022 年 Q1 釋出 v3.5 正式版。

同時也希望社群有更多的開發者參與共建,無論是提出 Issues、在論壇發帖、提交 PR 還是幫助建設周邊生態等,對我們來說都是寶貴的財富,讓我們一起把 Taro 建設的更強。

Taro 團隊衷心感謝一路走來大家對我們的支援,正是因為大家的期待、信賴敦促我們走向更好。

最後的最後,如果您有任何疑問,可以掃描下方二維碼新增我們的 Harmony 小助手進行反饋,感謝您的支援!

Harmony 小助手

歡迎關注凹凸實驗室部落格:aotu.io

或者關注凹凸實驗室公眾號(AOTULabs),不定時推送文章:

歡迎關注凹凸實驗室公眾號

相關文章