鴻蒙版Taro 搭建開發環境

一、配置鴻蒙環境

下載安裝 DevEco

建議使用最新版本的 IDE，當前為 5.0.5Release 版本。

二、創建鴻蒙項目

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

1. Project name：tarooh

2. Bundle name：com.nutpi.taro

3. Save location：選擇需要創建的目錄，例如 ~/test/tarooh

4. Module name：entry

注意，當前 Taro 支持的 SDK 版本為 4.1.1。

點擊 Finish 完成項目創建。

三、安裝 Taro 4.1

npm install -g @tarojs/cli

安裝成功后，檢查 taro 是否生效：

taro --version

預期輸出：

👽 Taro v4.1.1
?
4.1.1
?

初始化項目

taro init taro-ohos

按照提示輸入以下配置：

注意：當前僅支持使用 Vite 編譯鴻蒙應用，所以在配置時請注意選擇。

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

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

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

四、安裝鴻蒙插件

cd taro-ohos

然后使用 npm 安裝：

npm i @tarojs/plugin-platform-harmony-cpp

或者使用 pnpm 安裝：

pnpm i @tarojs/plugin-platform-harmony-cpp

五、修改編譯配置

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

import os from 'os'
import path from 'path'
?
const config = {// ...plugins: [['@tarojs/plugin-platform-harmony-cpp', {
?}]],harmony: {// compiler: 'vite',projectPath: path.join(os.homedir(), '/Desktop/test/tarooh'),hapName: 'entry',},// ...
}

注意：將 projectPath 設置為 DevEco 創建的鴻蒙項目目錄。

六、編譯鴻蒙應用

# 編譯鴻蒙應用
taro build --type harmony_cpp
# 編譯鴻蒙原生組件
taro build native-components --type harmony_cpp

如果需要同時編譯鴻蒙應用和原生組件，可以在頁面配置中添加 entryOption: false 表示該頁面是組件，并通過 componentName 指定組件導出名：

export default {navigationBarTitleText: 'Hello World',
+  componentName: 'MyComponent',
+  entryOption: false,
}

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

七、運行鴻蒙應用

1.配置應用簽名

打開 File -> Project Structure...，點擊 Signing Configs，點擊 Sign In，登錄華為賬號，點擊右下角 Apply，然后點擊 OK，完成簽名配置。

{"name": "entry","version": "1.0.0","description": "Please describe the basic information.","main": "","author": "","license": "","dependencies": {"@taro-oh/library": "file:../static/@taro-oh/library-4.1.1.har"},"devDependencies": {}
}

2.運行應用

在 DevEco 中，點擊運行按鈕。

八、常見問題解答（FAQ）

1.不存在編譯平臺 ${platform}

若運行 Taro 時出現 throw new Error('不存在編譯平臺 ${platform}') 錯誤，可能是因為 config/index.ts 文件中未添加 @tarojs/plugin-platform-harmony-cpp 插件。

2.EPERM: operation not permitted

遇到權限問題時，可執行以下命令：

mkdir -p ~/.npm-global/lib/node_modules
npm config set prefix '~/.npm-global'
?
npm install -g @tarojs/cli

九、參考資料

• 鴻蒙 & OpenHarmony | Taro 文檔

• Taro 項目倉庫

• Taro 官方文檔

• Taro UI 項目倉庫

• Taro UI 官方文檔

• plugin-platform-harmony-cpp

• taro-oh

十、Taro 倉庫概覽

以下是 Taro 的主要 NPM 包及其功能：

路徑	描述
@tarojs/cli	CLI 工具
@tarojs/service	插件化內核
@tarojs/taro-loader	Webpack loaders
@tarojs/helper	工具庫，主要供 CLI、編譯時使用
@tarojs/runner-utils	工具庫，主要供小程序、H5 的編譯工具使用
@tarojs/shared	工具庫，主要供運行時使用
@tarojs/taro	暴露各端所需要的 Taro 對象
@tarojs/api	和各端相關的 Taro API
babel-preset-taro	Babel preset
eslint-config-taro	ESLint 規則
postcss-pxtransform	PostCSS 插件，轉換 px 為各端的自適應尺寸單位
postcss-html-transform	PostCSS 插件，用于 HTML、小程序標簽的類名相互轉換