鴻蒙Taro實戰：01-搭建開發環境

zacks發表於2024-11-06
鴻蒙開發環境

配置鴻蒙環境

下載安裝 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, 完成簽名

  1. 執行

    在 DevEcho 中，點選執行按鈕，待控制檯執行完成，檢視裝置上，頁面中將輸出以下內容

    首頁

Hello world!

注意事項

運動 Taro 時報錯 throw new Error(不存在編譯平臺 ${platform})，config/index.ts檔案中沒有新增 @tarojs/plugin-platform-harmony-ets

參考資料

  • 鴻蒙 & OpenHarmony

相關文章