鸿蒙 UTS 插件使用三方依赖

在鸿蒙开发中市场需要使用三方依赖，可能是三方包，可能是一个本地 har 包，这里介绍如何接入。

接入三方依赖

这里举例 https://ohpm.openharmony.cn/ 最受欢迎的三方库 @pura/harmony-utils 。这个库，提供了众多方法，可以加速功能开发。

更新：为了辅助说明，这里提供了 uts 源码，可对比参考 https://ext.dcloud.net.cn/plugin?id=24849

harmony-utils 一款功能丰富且极易上手的HarmonyOS工具库，借助众多实用工具类，致力于助力开发者迅速构建鸿蒙应用。其封装的工具涵盖了APP、设备、屏幕、授权、通知、线程间通信、弹框、吐司、生物认证、用户首选项、拍照、相册、扫码、文件、日志，异常捕获、字符、字符串、数字、集合、日期、随机、base64、加密、解密、JSON等一系列的功能和操作，能够满足各种不同的开发需求。

从原生鸿蒙角度开发，使用这个工具库，需要两个步骤

• 安装依赖
• 调用方法

在 UTS 中使用这个工具库，需要三个步骤

• 创建 UTS 插件
• 引用依赖
• 调用方法

下面介绍具体步骤

假设我们希望通过 harmony-utils 获取当前的工具包名。调用的是 AppUtil.getBundleName

1. 创建 UTS 插件

在 HBuilderX 中操作。首先创建 uni_modules 功能，如果当前目录中没有对应文件夹，可在项目文件夹节点单击右键选择 新建 uni_modules 目录

这会创建 uni_moduels 文件夹，在这个文件夹上单击右键。

在新窗口中选择 UTS 插件-API 插件，点击创建。

假定插件的 ID 是 invoke-utils，找到这个文件夹，观察是否存在对应的文件，如果没有就创建 uni_modules/invoke-utils/utssdk/app-harmony/index.uts 。

这样插件就创建好了。这部分可参考 UTS 插件介绍 和 原生混编 做进一步了解。

2. 安装依赖

创建 uni_modules/invoke-utils/utssdk/app-harmony/config.json，添加依赖。可参考文档 配置uts插件依赖。

鸿蒙的库管理工具是ohpm。类似于js的npm，Android的仓储。鸿蒙的三方sdk封装文件为.har，类似于Android的.aar
uts插件的utssdk/app-harmony/config.json文件内可以配置依赖使用鸿蒙的三方库

代码填写下面方案：

{  
   "dependencies": {  
     "@pura/harmony-utils":"1.3.6"  
   }  
}

接下来准备使用依赖功能。

3. 调用方法

在 index.uts 中添加下面逻辑

import { AppUtil } from '@pura/harmony-utils'  

UTSHarmony.onAppAbilityCreate(() => {  
  const abilityCtx = UTSHarmony.getUIAbilityContext();  
  const ctx = abilityCtx  
  AppUtil.init(ctx);  
})  

export const getAppId = () => {  
  let bundleName = AppUtil.getBundleName();  
  return bundleName  
}

在原始文档中要求在 AbilityCreate 中初始化，这里可以使用 UTSHarmony.onAppAbilityCreate 来实现初始化。

和 TS 代码类似，调用了提供的方法，返回了具体数据。

在实际的 Vue 逻辑中，比如 button 通过 click 调用下面逻辑即可

<script setup>  
  import { getAppId } from '@/uni_modules/invoke-utils'  
  function openTest() {  
    const res = getAppId()  
    console.log('获取应用ID：', res)  
  }  
</script>

调用此方法，观察控制台，可以看到包名。这说明工具调用成功。

接入 har 依赖

接入 har 依赖。如何制作 har 依赖，在下面单独说明。

假定已经得到了一个 localLib.har 文件。放置 har 文件在 uts 插件内，比如在 index.uts 的同级目录， libs/localLib.har 路径。

修改 config.json，配置相对路径。

{  
  "dependencies": {  
    "locallib": "./libs/localLib.har"  
  }  
}

在 index.uts 中引用和导出。

import { add } from 'locallib'  

export const addFun = (a:number, b:number):number => {  
  return add(a, b)  
}

在页面中引入这个 uts 插件并使用即可。

<script setup>  
  import { addFun} from '@/uni_modules/otto-thirdhar'  
  function openTest() {  
    console.log(addFun(3,4))  
  }  
</script>

执行这个方法，顺利的话可以看到控制台打印数字 7.

注意事项：

• 引入 har 可能有版本兼容性要求，可在 harmony-configs/build-profile.json5 内修改 compatibleSdkVersion
• har 可能构建内容有误，实际运行不正常，可在原生工程项目中自测，排除 har 文件内部问题

如何构建 har 模块

在 DevEco 中打开一个项目，选择 文件 - 新建 - 模块 - Static Library，定义模块名选择创建。

在创建的文件中选择 index.ets 找到模块入口，可导出组件、方法。

在 DevEco 中选择 构建（在重构和运行中间） - 构建模块（第一个选项），等待编译结束，观察模块目录中的 build/default/outputs/default 找到 har 文件。

har 文件本身是一个压缩文件，可自行拆包了解结构，内部存在方法 d.ets 等文件。

文档已迁移至 uni-app 文档：通过 URL Scheme 唤起鸿蒙应用

本示例至少需要在 HbuilderX 4.61 运行

在 uniapp 开发鸿蒙应用中,通过 UTS 插件,可以调用许多系统原生的 API,这里给出一个小功能:隐藏和显示系统状态栏

原始的界面效果:

隐藏系统状态栏之后的效果:

这个示例的参考文档有:

• 鸿蒙官方文档: https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-193
• UTS 插件: https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html
• UTSHarmony 的使用: https://doc.dcloud.net.cn/uni-app-x/uts/utsharmony.html

核心页面代码:

<template>  
    <view>  
        <button @click="show">显示原生状态栏</button>  
        <button @click="hide">隐藏原生状态栏</button>  
    </view>  
</template>  
<script>  
    import { showStatusBar, hideStatusBar } from '@/uni_modules/harmony-statusbar';  
    export default {  
        data() {  
            return {  
                message: 'Hello, World!'  
            }  
        },  
        methods: {  
            show() {  
                showStatusBar()  
            },  
            hide() {  
                hideStatusBar()  
            }  
        }  
    }  
</script>  
<style scoped>  
</style>

核心UTS插件代码:

import window from '@ohos.window';  

let _window : window.Window;  

UTSHarmony.onAppAbilityWindowStageCreate((windowStage : window.WindowStage) => {  
    _window = windowStage.getMainWindowSync()  
})  

export const hideStatusBar = () => {  
    _window.setWindowSystemBarEnable([])  
}  

export const showStatusBar = () => {  
    _window.setWindowSystemBarEnable(['status', 'navigation'])  
}

示例工程：

uni-app/uniappx 中调用鸿蒙原生扫码能力的实践

一、背景介绍

最近在开发一个鸿蒙应用时，遇到了扫码功能的需求。之前用过很多扫码方案，但都不太理想。直到发现了 hmos-scan 这个插件，终于解决了我们的痛点。下面分享一下使用心得。

1.1 为什么选择 hmos-scan？

说实话，之前踩过不少坑：

1. 传统扫码方案太坑了：

   • WebView 扫码慢得要死，经常卡住
   • 引入第三方库后，应用体积直接翻倍
   • 不同手机表现不一样，有的能扫，有的扫不了
   • 稍微模糊一点的码就识别不出来，用户体验太差

2. 原生开发太痛苦：

   • 写原生代码太费时间了
   • 每个平台都要写一遍，累死
   • 维护起来特别麻烦
   • 开发周期太长，老板等不及

3. hmos-scan 真香：

   • 用鸿蒙原生能力，扫码贼快
   • 识别率特别高，歪着扫都能识别
   • 几行代码就搞定了，太方便了
   • 性能好，不占内存
   • 还能从相册选图，太贴心了

1.2 实际使用案例

1. 电商比价：

   // 扫商品码比价  
   async function scanProduct() {  
    try {  
      const barcode = await scanapiSync()  
      // 调用比价接口  
      const priceInfo = await comparePrice(barcode)  
      showPriceResult(priceInfo)  
    } catch (error) {  
      showError('扫码失败，重试一下')  
    }  
   }  

2. 快递扫描：

   // 扫快递单号  
   async function scanExpress() {  
    try {  
      const trackingNumber = await scanapiSync()  
      // 查物流信息  
      const expressInfo = await queryExpress(trackingNumber)  
      showExpressInfo(expressInfo)  
    } catch (error) {  
      showError('扫码失败，重试一下')  
    }  
   }  

3. 会议签到：

   // 扫会议码签到  
   async function scanMeeting() {  
    try {  
      const meetingCode = await scanapiSync()  
      // 验证会议码  
      const checkInResult = await verifyMeeting(meetingCode)  
      showCheckInResult(checkInResult)  
    } catch (error) {  
      showError('签到失败，重试一下')  
    }  
   }  

二、环境准备

1. 开发工具：

   • HBuilderX 3.8.0 或以上版本
   • DevEco Studio（鸿蒙开发必备）

2. 项目要求：

   • 用 uni-app x 框架
   • 选 Vue 3 就对了

三、插件使用

1. 插件安装

1. 去插件市场：hmos-scan 插件
2. 下载后导入 HBuilderX 就完事了

四、在项目中使用

1. 基础示例

<!-- pages/index/index.uvue -->  
<template>  
  <view class="content">  
    <button @click="startScan">开始扫描</button>  
    <text v-if="scanResult">扫描结果：{{scanResult}}</text>  
  </view>  
</template>  

<script>  
import { scanapiSync } from "@/uni_modules/hmos-scan/utssdk/app-harmony";  

export default {  
  data() {  
    return {  
      scanResult: ''  
    }  
  },  
  methods: {  
    async startScan() {  
      try {  
        const result = await scanapiSync()  
        this.scanResult = result  
        console.log('扫描结果：', result)  
      } catch (error) {  
        console.error('扫描失败：', error)  
        this.scanResult = '扫描失败'  
      }  
    }  
  }  
}  
</script>  

<style>  
.content {  
  padding: 20px;  
}  
button {  
  margin: 20px 0;  
}  
</style>

2. 高级示例（带历史记录）

<!-- pages/advanced/index.uvue -->  
<template>  
  <view class="container">  
    <view class="scan-area">  
      <button @click="startScan" :disabled="isScanning">  
        {{isScanning ? '扫描中...' : '开始扫描'}}  
      </button>  
    </view>  

    <view class="result-area" v-if="scanHistory.length > 0">  
      <text class="title">扫描历史</text>  
      <view v-for="(item, index) in scanHistory" :key="index" class="history-item">  
        <text class="time">{{item.time}}</text>  
        <text class="content">{{item.content}}</text>  
      </view>  
    </view>  
  </view>  
</template>  

<script>  
import { scanapiSync } from "@/uni_modules/hmos-scan/utssdk/app-harmony";  

export default {  
  data() {  
    return {  
      isScanning: false,  
      scanHistory: []  
    }  
  },  
  methods: {  
    async startScan() {  
      if (this.isScanning) return  

      this.isScanning = true  
      try {  
        const result = await scanapiSync()  
        this.scanHistory.unshift({  
          time: new Date().toLocaleTimeString(),  
          content: result  
        })  
      } catch (error) {  
        console.error('扫描失败：', error)  
      } finally {  
        this.isScanning = false  
      }  
    }  
  }  
}  
</script>  

<style>  
.container {  
  padding: 20px;  
}  
.scan-area {  
  margin-bottom: 20px;  
}  
.result-area {  
  border-top: 1px solid #eee;  
  padding-top: 20px;  
}  
.title {  
  font-size: 16px;  
  font-weight: bold;  
  margin-bottom: 10px;  
}  
.history-item {  
  padding: 10px;  
  border-bottom: 1px solid #eee;  
}  
.time {  
  font-size: 12px;  
  color: #999;  
}  
.content {  
  margin-top: 5px;  
}  
</style>

五、功能特点

1. 多模式支持：

   • 二维码、条形码都能扫
   • 相册选图也支持

2. 错误处理：

   • 各种异常都处理好了
   • 提示信息很友好
   • 日志记录很详细

3. 用户体验：

   • 操作简单，一看就会
   • 有状态反馈，不会卡住
   • 异步处理，不阻塞界面

六、注意事项

1. 兼容性：

   • 只支持鸿蒙系统
   • 确保设备有扫码功能

2. 性能优化：

   • 注意内存使用
   • 及时释放资源
   • 别重复扫描

七、常见问题

1. 扫描失败：

   • 看看设备支不支持
   • 查查日志找原因

2. 结果解析错误：

   • 检查结果格式
   • 处理各种返回类型
   • 加好错误处理

八、总结

用了 hmos-scan 插件后，扫码功能开发变得特别简单。原生功能完整保留，开发体验又好，强烈推荐！

九、参考资料

1. uni-app x 开发文档
2. 鸿蒙开发文档
3. UTS 插件开发指南
4. hmos-scan 插件下载地址

UTS 插件鸿蒙端开发示例

以上示例已开源
项目地址 请参考 示例代码。

前言

虽然这个 UTS 插件鸿蒙端的示例看起来很简单，但说实话，这一步其实难住了不少开发者。很多人第一次做 UTS 插件，尤其是要跑通鸿蒙端，都会在这里卡壳。希望这份文档能帮你少走弯路，顺利迈过这道坎。

基础知识补充

什么是 UTS 插件？

UTS 插件其实就是 uni-app x 扩展 API 的标准插件形式。你可以把它理解成"写一份 TypeScript 风格的代码，编译后在不同平台都能用"。

说个实话，刚接触 uni-app x 的时候，很多人一看到"插件"两个字就头大，觉得一定很复杂。其实 UTS 插件的本质，就是把你想要的原生能力用 TypeScript 包一层，剩下的交给编译器搞定。

UTS 与 ArkTS 的关系

UTS 和 ArkTS 都是基于 TypeScript 的扩展，但有些细节不同。特别注意：鸿蒙端开发时，所有对象字面量都必须定义类型，不能用 any 类型，否则会直接编译报错。

比如 ArkTS 不允许无类型的对象字面量，UTS 会自动帮你加上类型，但你自己写代码时一定要养成良好习惯：

// 错误写法（鸿蒙端会报错）  
const obj = { a: 1 };  

// 正确写法  
interface Obj { a: number }  
const obj: Obj = { a: 1 };  
// 或  
const obj = { a: 1 } as Obj;

你只需要记住：UTS 写的代码，最终会被编译成 ArkTS（.ets）文件，然后就能愉快地调用鸿蒙的原生 API 了。

配置鸿蒙依赖

鸿蒙的依赖管理工具叫 ohpm，和 npm 很像。三方 SDK 用 .har 文件（有点像 Android 的 .aar）。

配置依赖时，记得在 utssdk/app-harmony/config.json 里写清楚：

{  
  "dependencies": {  
    "@cashier_alipay/cashiersdk": "15.8.26",  
    "local-deps": "./libs/local-deps.har"  
  }  
}

注意：config.json 不能有注释，本地依赖路径是相对的。

资源文件与权限配置

• 插件资源（图片、字体等）放在 utssdk/app-harmony/resources。
• 权限、模块信息等写在 utssdk/app-harmony/module.json5。

比如你要用定位权限，可以这样写：

{  
  "module": {  
    "requestPermissions": [  
      {  
        "name": "ohos.permission.LOCATION",  
        "usedScene": { "when": "inuse" },  
        "reason": "$string:permission_location_reason"  
      }  
    ]  
  }  
}

context 获取

很多鸿蒙原生 API 需要 context。大多数场景下直接用 getContext() 就行：

import settings from '@ohos.settings';  
const context: Context = getContext();  
settings.getValue(context, settings.display.SCREEN_BRIGHTNESS_STATUS, (err, value) => {  
  if (err) {  
    console.error(`Failed to get the setting. ${err.message}`);  
    return;  
  }  
  console.log(`SCREEN_BRIGHTNESS_STATUS: ${JSON.stringify(value)}`)  
});

有一次小王同学写插件，死活拿不到 context，结果发现是忘了在页面生命周期里调用，调试了半天才恍然大悟。遇到问题别慌，先查查官方文档和社区经验，很多"坑"其实大家都踩过。

更多细节和常见问题，建议随时查阅官方文档：UTS for HarmonyOS

步骤详解

友情提示：

虽然下面的步骤看起来很基础，但每一步都很关键。尤其是接口定义和鸿蒙端实现，很多人就是在这里卡住的。别嫌简单，能跑通才是王道。

再次强调：鸿蒙端开发时，所有对象字面量都必须定义类型，不能用 any 类型！

第一步：定义插件接口（interface.uts）

目的：

• 明确插件对外暴露的 API 规范，方便多端实现和 IDE 智能提示。
• 这是 UTS 插件开发的基础，所有端的实现都要遵循这里定义的接口。

操作：

• 在 uni_modules/你的插件名/utssdk/ 下新建或编辑 interface.uts 文件。
• 定义你要暴露的类型、方法签名。例如：

// uni_modules/tt-ost/utssdk/interface.uts  
export type MyApiSync1 = (paramA: string) => string;

第二步：鸿蒙端实现接口（app-harmony/index.uts）

目的：

• 按照接口定义，实现鸿蒙端的具体逻辑。
• 这是很多开发者卡壳的地方，需注意导入接口类型、调用鸿蒙 API、正确导出方法。
• 注意：所有对象字面量都要定义类型，不能用 any！

操作：

• 在 uni_modules/你的插件名/utssdk/app-harmony/ 下新建或编辑 index.uts 文件。
• 按照接口定义，实现方法。例如：

// uni_modules/tt-ost/utssdk/app-harmony/index.uts  
import { MyApiSync1 } from '../interface.uts';  
import { promptAction } from '@kit.ArkUI';  

interface ShowToastOptions {  
  message: string;  
}  

export const myApiSync1: MyApiSync1 = function (paramA: string): string {  
  let ddd: ShowToastOptions = { message: paramA };  
  promptAction.showToast(ddd);  
  return paramA;  
}

• 这里以 Toast 弹窗为例，实际可根据业务需求调用鸿蒙原生能力。

第三步：在页面中调用插件方法

目的：

• 验证插件功能是否生效。
• 体验 UTS 跨端调用的便捷性。

操作：

• 在页面脚本中引入并调用插件方法。例如：

<script>  
import { myApiSync1 } from '@/uni_modules/tt-ost';  
export default {  
  methods: {  
    showToast() {  
      const msg = 'Hello Harmony!';  
      const result = myApiSync1(msg);  
      console.log(result); // 输出: Hello Harmony!  
    }  
  }  
}  
</script>

说明

• 该插件支持多端，鸿蒙端实现了 myApiSync1，会调用 ArkUI 的 promptAction.showToast。
• 其他端（如 Android/iOS）可根据需要实现对应方法。
• 适合演示 UTS 跨端插件的基本用法。

如需更多信息，请参考 uni-app x 官方 UTS 插件开发文档。

你们上架有没有遇到过这个问题？

好久不见，大家还好不好

问题：

华为mate60 rs 鸿蒙next系统在hbuilder4.6.1中打包到鸿蒙连接不上的问题

解决方式：

连接手机弹出USB连接方式的时候，选择仅充电，别选传输文件或者传输图片，希望能帮到碰到此问题的小伙伴。

满足以下几点条件可以联系我，这周帮忙改了2个到原生鸿蒙，后续可以慢慢来
1、应用或者小程序已经处于上架状态，证书备案的齐全了
2、vue3写的，vue2的话改造比较耗时，暂时先帮忙搞vue3开发的应用

APP往webview通过evalJS注入方法时
鸿蒙不支持this.$scope.$getAppWebview().children()[0] ，使用uni.createWebviewContext

//template  
<web-view id="webviewId" src="xxxxxx"></web-view>  
//javascript  

// #ifdef APP-HARMONY  
this.currentWebview = uni.createWebviewContext('webviewId', this);  
// #endif  
// #ifdef APP-PLUS  
this.currentWebview = this.$scope.$getAppWebview().children()[0];  
// #endif  
let token = uni.getStorageSync('token');  
let tenant = uni.getStorageSync('tenantCode');  
// 准备要传递的数据  
let dataToPass = JSON.stringify({  
    token: token  
});  
this.currentWebview.evalJS(`uniappReceiveData('${JSON.stringify({ token: token,tenant: tenant})}')`)

7月20号，uniapp 官网“悄咪咪”的上线了 uniapp 开发鸿蒙应用 的文档，算是正式开启了 Vue3 + uniapp 开发鸿蒙应用 的时代。

<顺便吆喝一声，技术大厂年前捞人，前后端测试，待遇给的还不错，感兴趣可以试试~>

开发鸿蒙的前置准备
想要使用 uniapp 开发鸿蒙，我们需要具备三个条件：

DevEco-Studio 5.0.3.400 以上（下载地址：https://developer.huawei.com/consumer/cn/deveco-studio/）
鸿蒙系统版本 API 12 以上 （DevEco-Studio有内置鸿蒙模拟器）
HBuilderX-alpha-4.22 以上

PS： 这里不得不吐槽一下，一个 DevEco-Studio 竟然有 10 个 G......

安装好之后，我们就可以通过 开发工具 运行 示例代码

运行时，需要用到 鸿蒙真机或者模拟器。但是这里需要 注意： Windows系统需要经过特殊配置才可以启动，mac 系统最好保证系统版本在 mac os 12 以上
windows 系统配置方式（非 windows 用户可跳过）：
打开控制面板 - 程序与功能 - 开启以下功能

Hyper-V
Windows 虚拟机监控程序平台
虚拟机平台

注意: 需要win10专业版或win11专业版才能开启以上功能，家庭版需先升级成专业版或企业版

启动鸿蒙模拟器
整个过程分为三步（中间会涉及到鸿蒙开发者申请）：

下载 uni-app 鸿蒙离线SDK template-1.3.4.tgz （下载地址：https://web-ext-storage.dcloud.net.cn/uni-app/harmony/zip/template-1.3.4.tgz）
解压刚下载的压缩包，将解压后的模板工程在 DevEco-Studio 中打开

等待 Sync 结束，再 启动鸿蒙模拟器 或 连接鸿蒙真机（如无权限，则需要申请（一般 3 个工作日），申请地址：https://developer.huawei.com/consumer/cn/activity/201714466699051861/signup）

配置 HBuilderX 吊起 DevEco-Studio
打开HBuilderX，点击上方菜单 - 工具 - 设置，在出现的弹窗右侧窗体新增如下配置

注意：值填你自己的 DevEco-Studio 启动路径
js 代码解读复制代码"harmony.devTools.path" : "/Applications/DevEco-Studio.app"

创建 uni-app 工程

BuilderX 新建一个空白的 uniapp 项目，选vue3
在 manifest.json 文件中配置鸿蒙离线SDK路径（SDK 路径可在 DevEco-Studio -> Preferences(设置) z中获取）

编辑 manifest.json 文件，新增如下配置：

然后点击 运行到鸿蒙即可

总结
这样我们就有了一个初始的鸿蒙项目，并且可以在鸿蒙模拟器上运行。关于更多 uniapp 开发鸿蒙的 API，大家可以直接参考 uniapp 官方文档：https://zh.uniapp.dcloud.io/tutorial/harmony/dev.html#nativeapi

——转载自作者：程序员Sunday

​
Hello，大家好，我是 Sunday（顺便吆喝一句，技术大厂，前、后端/测试机会，多地捞人）
7月20号，uniapp 官网“悄咪咪”的上线了 uniapp 开发鸿蒙应用 的文档，算是正式开启了 Vue3 + uniapp 开发鸿蒙应用 的时代。

开发鸿蒙的前置准备
想要使用 uniapp 开发鸿蒙，我们需要具备三个条件：

1. DevEco-Studio 5.0.3.400 以上（下载地址：https://developer.huawei.com/consumer/cn/deveco-studio/）
2. 鸿蒙系统版本 API 12 以上 （DevEco-Studio有内置鸿蒙模拟器）
3. HBuilderX-alpha-4.22 以上

PS： 这里不得不吐槽一下，一个 DevEco-Studio 竟然有 10 个 G......

> 安装好之后，我们就可以通过 开发工具 运行 示例代码

运行时，需要用到 鸿蒙真机或者模拟器。但是这里需要 注意： Windows系统需要经过特殊配置才可以启动，mac 系统最好保证系统版本在 mac os 12 以上

windows 系统配置方式（非 windows 用户可跳过）：
打开控制面板 - 程序与功能 - 开启以下功能

Hyper-V
Windows 虚拟机监控程序平台
虚拟机平台

注意: 需要win10专业版或win11专业版才能开启以上功能，家庭版需先升级成专业版或企业版

启动鸿蒙模拟器
整个过程分为三步（中间会涉及到鸿蒙开发者申请）：

1.下载 uni-app 鸿蒙离线SDK template-1.3.4.tgz （下载地址：https://web-ext-storage.dcloud.net.cn/uni-app/harmony/zip/template-1.3.4.tgz）
2.解压刚下载的压缩包，将解压后的模板工程在 DevEco-Studio 中打开

3.等待 Sync 结束，再 启动鸿蒙模拟器 或 连接鸿蒙真机（如无权限，则需要申请（一般 3 个工作日），申请地址：https://developer.huawei.com/consumer/cn/activity/201714466699051861/signup）

配置 HBuilderX 吊起 DevEco-Studio
打开HBuilderX，点击上方菜单 - 工具 - 设置，在出现的弹窗右侧窗体新增如下配置

注意：值填你自己的 DevEco-Studio 启动路径

harmony.devTools.path" : "/Applications/DevEco-Studio.app"

创建 uni-app 工程

1.BuilderX 新建一个空白的 uniapp 项目，选vue3
2.在 manifest.json 文件中配置鸿蒙离线SDK路径（SDK 路径可在 DevEco-Studio -> Preferences(设置) z中获取）

编辑 manifest.json 文件，新增如下配置：

然后点击 运行到鸿蒙即可

总结
这样我们就有了一个初始的鸿蒙项目，并且可以在鸿蒙模拟器上运行。关于更多 uniapp 开发鸿蒙的 API，大家可以直接参考 uniapp 官方文档：https://zh.uniapp.dcloud.io/tutorial/harmony/dev.html#nativeapi

——转自作者：程序员Sunday