Taro 3.5 canary 發布：支援適配 鴻蒙

  • 2021 年 12 月 9 日
  • 筆記

一、背景

鴻蒙作為華為自研開發的一款可以實現萬物互聯的作業系統，一經推出就受到了很大的關注，被國人寄予了厚望。而鴻蒙也沒讓人失望，今年 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），不定時推送文章：

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

VirMach 便宜 VPS

QNews

QNews