使用京东Taro开发鸿蒙PC（附鸿蒙版Taro环境搭建流程）

Taro 是由京东发起并维护的开放式跨端跨框架解决方案，支持以 Web 的开发范式来实现小程序、H5、鸿蒙等平台的跨端统一开发。

一、配置鸿蒙环境

下载安装 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', {
        // useChoreLibrary: "4.1.1"
      }]
    ],
    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 中，点击运行按钮。

image-20250519091441660

image-20250519091441660

image-20250518181807378

image-20250518181807378

八、常见问题解答（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 文档[1]
• Taro 项目仓库[2]
• Taro 官方文档[3]
• Taro UI 项目仓库[4]
• Taro UI 官方文档[5]
• plugin-platform-harmony-cpp[6]
• taro-oh[7]

十、Taro 仓库概览

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

坚果派社区

坚果派社区由坚果、狼哥等人创建，团队成员包括数位华为 HDE 及 1000+ HarmonyOS 开发者，以及三十余位万粉博主/UP 主，专注于分享 HarmonyOS/OpenHarmony、仓颉、ArkUI-X、元服务、AI、BlueOS 操作系统等技术。团队成员主要分布在北京、上海、南京、深圳、广州、苏州、长沙、宁夏等地，已为华为、vivo、腾讯、亚马逊等提供开发咨询服务 100+ 次，累计粉丝 100w+，孵化开发者 10w+，覆盖高校 20+、企业 10+。自研应用 40 款，三方库 80 个，鸿蒙原生应用课程 500+，持续助力鸿蒙仓颉等生态繁荣发展。

参考资料

[1]

鸿蒙 & OpenHarmony | Taro 文档: https://docs.taro.zone/docs/harmony/

[2]

Taro 项目仓库: https://github.com/NervJS/taro

[3]

Taro 官方文档: https://docs.taro.zone/docs

[4]

Taro UI 项目仓库: https://github.com/NervJS/taro-ui

[5]

Taro UI 官方文档: https://taro-ui.jd.com/

[6]

plugin-platform-harmony-cpp: https://www.npmjs.com/package/@tarojs/plugin-platform-harmony-cpp?activeTab=versions

[7]

taro-oh: https://ohpm.openharmony.cn/#/cn/detail/@taro-oh%2Flibrary