本文作者：京東鴻蒙共建小組-江尚澤、JJ
一、背景
鴻蒙作為華為自研開發的一款可以實現萬物互聯的作業系統，一經推出就受到了很大的關注，被國人寄予了厚望。而鴻蒙也沒讓人失望，今年 Harmony2.0 正式推出供使用者進行升級之後，在短短的三個月內實現了 1.2 億的裝機量，並且在前不久的華為開發者大會上，華為宣佈 Harmony2.0 的裝機量已經突破了 1.5 億。
眾多應用廠商都逐步推出了適配的鴻蒙應用，Taro 作為一個開放式的 跨端跨框架 解決方案，不少開發者期待將小程式的能力移植到鴻蒙 OS 上，可以使用 Taro 開發鴻蒙 && OpenHarmony 應用。
鴻蒙的方舟開發框架提供類 Web 正規化程式設計，支援使用 JS 開發 UI 層，其語法與小程式相接近。經過前期調研，可以沿用 Taro 現有的架構適配鴻蒙
今年 6 月份我們新建了支援鴻蒙的提案，希望能達成三大目標：
- 開發者可以使用 Taro 開發鴻蒙應用。
- 開發者可以把現有的 Taro 應用適配到鴻蒙平臺。
- 開發者可以使用 Taro 的反向轉換工具，把原生開發的小程式轉換為 Taro 應用，再適配到鴻蒙平臺。
目前 Taro 和 OpenHarmony 建立了官方合作關係，受邀併成立了跨平臺前端框架興趣小組（SIG-CROSS-PLATFORM-UI），同時 Taro 與華為鴻蒙&&OpenHarmay保持著內部溝通與分享，Taro 擁有的海量開發者和優秀案例，能有效補充華為鴻蒙&&OpenHarmay生態。
二、實現細節
鴻蒙的 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 團隊衷心感謝一路走來大家對我們的支援，正是因為大家的期待、信賴敦促我們走向更好。
最後，該版本鴻蒙的適配由京東內鴻蒙共建小組共同完成，感謝以下同學：@AdvancedCat、@jiaozitang、@huozhongyi123、@troy-sxj、@JSZabc、@crazyonebyone、@evernoteHW、@soulhat、@xueshuai、@LuMeiling
最後的最後，如果您有任何疑問，可以掃描下方二維碼新增我們的 Harmony 小助手進行反饋，感謝您的支援！
歡迎關注凹凸實驗室部落格：aotu.io
或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章。