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_modules、yarn.lock、package-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），不定時推送文章：

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

相關文章