配置鴻蒙環境

下載安裝 DevEco

配置IDE

打開 Prefreences, OpenHarmony SDK, 勾選 API Version 12

創建鴻蒙項目

打開 DevEco，點擊 右上角Create Project， 在 Application 處選擇 Empty Ablity, 點擊 Next, 進入配置頁，根據需求調整內容，這裏使用默認配置，

1. Project name: MyApplication,
2. Bundle name: com.example.myapplication,
3. Save location 選擇需要創建的目錄，這裏使用 MyApplication 目錄 （~/projects/MyApplication)
4. Compatible SDK, 選擇 4.0.0
5. Module name: entry

注意，上面當前 Taro 支持的 SDK 版本為 4.0.0

點擊 Finish 完成項目創建。

安裝 Taro 4.x

yarn global add @tarojs/cli

安裝成功後檢查 taro 是否生效

➜  ~ taro --version
👽 Taro v4.0.7

4.0.7

初始化項目

taro init taro-ohos

按照提示輸入，這裏使用以下配置

? 請輸入項目介紹 taro ohos
? 請選擇框架 React
? 是否需要使用 TypeScript ？ Yes
? 請選擇 CSS 預處理器（Sass/Less/Stylus） Sass
? 請選擇包管理工具 yarn
? 請選擇編譯工具 Vite
? 請選擇模板源 Gitee（最快）
✔ 拉取遠程模板倉庫成功！
? 請選擇模板 默認模板

等待項目創建成功，直到輸出以下提示：

Done in 44.95s.
✔ 安裝項目依賴成功
創建項目 taro-ohos 成功！
請進入項目目錄 taro-ohos 開始工作吧！😝

安裝鴻蒙插件

yarn add @tarojs/plugin-platform-harmony-ets
yarn add path

修改編譯配置

找到 config/index.ts 文件, 在 plugin 處添加 @tarojs/plugin-platform-harmony-ets, 在 rn 下方添加 harmony 配置：

import path from 'path'

...

   ...
    plugins: [
      '@tarojs/plugin-platform-harmony-ets'
    ],
    ...
    rn: {...},
    harmony: {
        // 將編譯方式設置為使用 Vite 編譯
        compiler: 'vite',
        // 【必填】鴻蒙主應用的絕對路徑，例如：
        projectPath: path.resolve(process.cwd(), '../MyApplication'),
        // 【可選】HAP 的名稱，默認為 'entry'
        hapName: 'entry',
        // 【可選】modules 的入口名稱，默認為 'default'
        name: 'default',
    }

注意這裏要把 projectPath 設置成 Deveco 創建的鴻蒙項目目錄

修改 package.json

在 scripts 處添加以下配置

"scripts": {
    ...
    "build:harmony": "taro build --type harmony",
    "dev:harmony": "npm run build:harmony -- --watch"
}

運行 Taro 項目

yarn run dev:harmony

控制枱輸出以下內容，顯示構建成功：

<details>

<summary>build started... 點擊查看完整輸出
</summary>

yarn run v1.22.22
$ npm run build:harmony -- --watch

> taro-ohos@1.0.0 build:harmony
> taro build --type harmony --watch

👽 Taro v4.0.7

watching for file changes...

build started...
✓ 7 modules transformed.
rendering chunks (6)...

開始 ohpm install 腳本執行...

install completed in 0s 36ms
執行 ohpm install 腳本成功。

../MyApplication/entry/src/main/ets/app.scss.xss.js                 0.10 kB │ gzip: 0.10 kB │ map: 0.10 kB
../MyApplication/entry/src/main/ets/index.scss.xss.js               0.10 kB │ gzip: 0.10 kB │ map: 0.10 kB
../MyApplication/entry/src/main/ets/app_comp.js                     0.27 kB │ gzip: 0.21 kB │ map: 0.70 kB
../MyApplication/entry/src/main/ets/pages/index/index_taro_comp.js  0.40 kB │ gzip: 0.27 kB │ map: 0.11 kB
../MyApplication/entry/src/main/ets/app_taro_comp.js                0.83 kB │ gzip: 0.46 kB │ map: 0.13 kB
../MyApplication/entry/src/main/ets/pages/index/index_comp.js       0.89 kB │ gzip: 0.42 kB │ map: 0.99 kB
../MyApplication/entry/src/main/ets/app.ets                         2.21 kB │ gzip: 0.86 kB
../MyApplication/entry/src/main/ets/render.ets                      5.76 kB │ gzip: 1.23 kB
../MyApplication/entry/src/main/ets/pages/index/index.ets           9.04 kB │ gzip: 2.44 kB
built in 2489ms.

</details>

<br/>

Taro 會將編譯好的文件輸出至鴻蒙項目目錄

運行鴻蒙

1. 配置應用簽名

打開 File -> Project Structure..., 點擊 Siging Configs, Sign In, 例如華為賬號，點擊右下角 Apply, OK, 完成簽名

2. 運行

   在 DevEcho 中，點擊運行按鈕，待控制枱執行完成，查看設備上，頁面中將輸出以下內容

   首頁
   
   Hello world!

注意事項

運動 Taro 時報錯 throw new Error(不存在編譯平台 ${platform})，config/index.ts文件中沒有添加 @tarojs/plugin-platform-harmony-ets

參考資料

• 鴻蒙 & OpenHarmony