uniapp极速上手鸿蒙开发

uniapp 团队 与版本 4.28.2024092502 起，支持鸿蒙应用开发，现在是 4.76.2025082103,同时支持鸿蒙应用和元服务开发了。

我们现在上手感受一下

环境配置

• HBuilderX 下载地址
• DevEco Studio

底下主要针对真机做的演示

项目要求

在创建uniapp项目的时候，需要选择 vue3，vue2不支持

搭建流程

1. AGC平台上新建项目，目的是活动boundleName以及调试和发布证书
2. 下载和安装 DevEco Studio
3. 使用 DevEco Studio 创建项目，然后配置boundleName和调试和发布证书
4. 复制证书相关的配置
5. 下载和安装 hbuilder
6. hbuilder 下载相关插件
7. hbuilder 配置 DevEco Studio 工具路径
8. hbuilder新建uniapp vue3工程
9. hbuilder配置鸿蒙应用的证书
10. hbuilder运行项目

AGC平台上新建项目

可以根据需求选择新建工程还是项目。 这里选择项目

下载和安装 DevEco Studio

下载和安装DevEco Studio

boundleName和调试和发布证书

因为真机在调试时候需要使用调试证书

应用在发布的时候需要使用发布整数，因此一次性都配置获得即可

配置链接

DevEco Studio 新建项目获得证书配置信息

这个步骤主要为了得到证书的配置代码，uniapp运行项目的时候需要用到

在使用DevEco Studio新建完项目后，参考链接 进行证书的配置

得到配置文件 build-profile.json5 后续复制整个代码到uniapp创建的项目即可

下载和安装 hbuilder

这里下载和安装

hbuilder 下载相关插件

工具-插件安装 关键是这几个 鸿蒙、vue3

hbuilder 配置 DevEco Studio 工具路径

这里配置DevEco Studio 工具的路径 工具-设置

hbuilder新建uniapp vue3工程

新建vue3工程

hbuilder配置鸿蒙应用的证书

在项目根目录下配置 \harmony-configs\build-profile.json5 如果不存在，则手动新建。

然后复制、粘贴证书代码进去

hbuilder运行项目

最后，运行项目

效果

鸿蒙应用如何注册和声明 DeepLink 和 AppLinking 可参考 《通过 URL Scheme 唤起鸿蒙应用》

这里重点介绍如何在应用中唤起其他应用和元服务。

鸿蒙唤起鸿蒙、元服务已经迁移到文档 《鸿蒙应用唤起鸿蒙应用、元服务》

鸿蒙元服务唤起鸿蒙应用已经迁移到文档 《鸿蒙元服务唤起鸿蒙应用》

鸿蒙 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 中引用和导出。

注意：这里提到的 locaLib 名称不是随便起的，类似于 npm 的 packages.json 依赖， "vue":"3.4" ，这里的 vue 要和实际安装的包名要一致。

包名和导出的内容如何知晓？把 har 包改成 zip 并解压，得到产物。有两个文件需要注意

• oh-package.json 里面的 name 是包的名字，可以复制出来，不要随意写成 localib 以实际为准
• 包导出的内容可以在 index.d.ts 中查看，看具体 export 的内容是什么，不要随意写成 add 以实际为准

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 等文件。

你是否在使用UniApp开发微信小程序时，遇到微信小程序主包超出2M，导致无法上传的问题？

题主自己所在团队曾被这个问题反复困扰，针对这个问题，我们尝试过不同的办法，例如：

1. 对图片下手腾大小：在编译阶段，对所有图片资源路径都替换成远端图片地址，主包内基本不存在图片资源。
2. 对项目进行了重构：1️⃣ 删除已下线业务代码；2️⃣ 合理拆分子包，将非首屏页面，或者业务层级较深的页面根据流程类别拆成独立子包；3️⃣ 主包只包含首页；
3. 尽量使用支持模块化的第三方库，规范import方式，以确保使用时只引用真实使用到的模块，例如lodash-es替换lodash，引入时 import {find} from 'lodash-es'，而不是import * as _ from 'loadash-es'

以上办法都有不错的效果，但随着业务功能的迭代，主包还是超了。 T_T

于是我们对主包体积进行分析，发现对主包影响最大的是公共组件，也即是components目录底下的组件，他们被多个子包共用，因此它们被放在主包，原理上是没有问题的（众所周知子包能应用主包的东西，但不能应用其他子包的东西）。

但是项目临上线才突然出现超包问题，时间紧急，我们好几次都是通过在UniApp项目里，将一些公共组件，从主包目录挪到子包目录里，并修正组件的引用，进而使得编译出来的小程序项目的主包目录中的组件减少，从而体积变小。

这种临时做法收效很快，但缺点也很明显：一方面，对于单次组件迁移操作，相对独立的组件比较好迁移，测试回归范围也不大，但不少组件之间存在相互依赖的关系，迁移的成本和风险会大大增加；另一方面，组件被迁移至多个子包后便有了多份副本，增加了长期维护成本和风险。另外，此举治标不治本，不知道后面还要踩多少次坑。

那么，有没有两全之法？答案当然是有的！

如果我们公共组件迁移的操作，不是基于UniApp项目工程本身，而是对编译出来微信小程序工程动刀子，问题就迎刃而解了。
为了实现这个目的，我们写了一个十分易用的vite插件，只需要引入插件，正常build一下，组件的迁移就自动完成了。

如果你也遇到了类似的问题，可以直接把插件down下来放到自己的项目里使用。

传送门：https://github.com/ohyeahhh/wechatMiniProgramPackageOptimizer

注：这个插件是基于我们团队的项目情况写的，具备一定的通用性，也存在一些限制（具体说明见上述链接readme），不完善之处欢迎大家一起指正、讨论、改善。笔芯。

^_^ 一起加油共同进步。

各位DCloud的开发者们：

在1024程序员节即将到来之际，DCloud 诚挚邀请您参与本次 “星光不负，码向未来” 鸿蒙主题征文活动。

我们特别希望看到基于 uni-app 和 uni-app x 在鸿蒙生态中的开发实践、经验总结与创新思考。无论是开发鸿蒙App、元服务，还是打造兼容鸿蒙的插件/UI库，你的每一行代码和每一次分享，都将是鸿蒙生态建设中闪耀的星光。

活动主题：星光不负，码向未来

活动时间：

• 征文招募期： 2025年10月20日 - 11月20日
• 文章展示期： 从2025年10月24日起，优秀投稿将陆续在专题页展示
• 文章评审期： 2025年11月21日 - 11月30日
• 结果公示期： 2025年12月1日之后

征文方向

我们特别关注以下方向与uni-app结合的实践

请选择以下任一方向，分享你的鸿蒙开发故事：

方向一 成长纪实

分享你从零开始，使用 uni-app 开发鸿蒙 App 或鸿蒙元服务 的学习之路。可以是从基础语法到核心概念的入门笔记，也可以是封装第一个兼容鸿蒙的组件、插件的经历，更欢迎你分享在学习、适配、调试过程中的心得、踩坑记录与解决方案。

方向二 案例实战

鸿蒙能力集成：分享你在结合 uni-app 的鸿蒙项目中，集成并应用鸿蒙开放能力（如云开发、云测试、预加载、Applinking、APMS、近场能力、应用分析、HarmonyOS SDK等）解决实际问题的过程、效果与心得。真实经历，尤为珍贵。

项目全流程落地：详细阐述基于 uni-app/uni-app x 的鸿蒙项目从需求制定、技术选型、技术适配（如元服务特性应用）、到最终上架、获取用户反馈的全流程经验。基于uni-app、uni-app x开发的鸿蒙应用已经有上千款，非常欢迎这些开发者分享自己的开发、上架经验。
方向二的文章，我们还设计了特别奖品，见下文。

方向三 参赛心得

如果你近两年参加过HarmonyOS创新赛、极客松等大赛，欢迎分享你的参赛作品案例与技术心得。请侧重讲解如何利用 uni-app 技术栈，结合HarmonyOS的新技术特性（特别是HarmonyOS NEXT）完成作品，并解说其中的创新点与技术难点。

奖项设置

我们为优秀的你准备了丰厚的礼品作为奖励：

一等奖（5名）：
如上奖品为二选一，随机发放；

• 华为手环7-NFC版
• 华为智能水杯450ml + 露营灯-无级调光-太阳能+Type-C充电 组合

二等奖（15名）：
露营灯-无级调光-太阳能+Type-C充电

三等奖（30名）：
HUAWEI 无线蓝牙鼠标-双模办公-灰色 (价值99元)

方向二特别奖（10名）：
针对【方向二·案例实战】的优质投稿，额外设立10份 华为手环 9 NFC版作为激励！

惊喜提示：积极参与、文章优质的开发者，将有机会获得 DCloud官方推荐 和 HarmonyOS开发者社区联合曝光，让你的技术影响力更进一步！

参与方式

在 DCloud 问答社区 发布新帖，选择【分享经验】，发布博客文章，并给文章添加【鸿蒙征文】的话题，无需单独报名，社区会通过话题自动筛选征文文章。

评审标准

社区将根据以下维度进行综合评选：

1. 内容质量：内容详实、逻辑清晰、案例完整。
2. 技术价值：技术深度、创新性、对uni-app与鸿蒙结合点的挖掘。
3. 影响力与实用性：对其他开发者的借鉴、启发和帮助程度；如文章的阅读数、点赞数都将作为评选参考指标，欢迎大家将自己的文章分享到微博、微信等，扩散自己的文章影响力。
4. 原创与真实性：必须为原创内容，分享真实开发经验。

行动起来吧！

技术之路，因分享而璀璨；鸿蒙生态，因你而精彩。
这不仅是赢取奖品的机会，更是向整个开发者社区展示你技术风采的舞台。

立即执笔，分享你的 uni-app 鸿蒙开发实践，与我们一起，码向未来！

============

目前已经有不少优秀的征文发布，大家可以移步鸿蒙征文系列阅读欣赏。

介绍一下背景：本项目是uni cli搭建的项目，区分是不是uni cli项目看一下项目存不存在src文件夹就行，本文介绍内容都是基于uni cli项目的。
需求：

1. uniapp项目需要打包鸿蒙上线App，本次调研是基于Mac环境，不涉及Windows。
2. 第三方SDK插件对接UTS
   准备工作：
3. 下载安装HBuilderX（最新版）
4. DevEco Studio下载安装，鸿蒙模拟器安装（或通过真机来进行调试）
5. Dcloud开发者中心注册账号
6. 华为开发者联盟 AppGallery Connect 注册账号
7. 调试证书/发布证书（需要和本项目鸿蒙App管理员要）
   鸿蒙App配置：
   manifest.json-鸿蒙App配置
   包名：uni.app.snsk.ydbz
   证书签名配置包括调试证书和发布证书，调试证书相关配置如下图所示

应用包名：Android端、iOS端、HarmonyOS端可能有自己定义的包名，只要在本端下做好统一即可。在HarmonyOS端我们用的包名是uni.app.snsk.ydbz，项目中的配置要和华为开发者联盟一致。
运行设备：需要启动虚拟机或USB连接鸿蒙手机以后才能检测到。
开发调试可以选择自动申请调试证书，也可以手动配置下边的私钥库文件及证书文件。点自动申请调试证书以后会登录华为开发者联盟，生产证书回填下边的私钥库文件和证书文件等。
不选择自动申请调试证书，也可以和本项目鸿蒙端的管理员要调试证书，然后手动选择文件。
私钥库文件是.p12结尾的文件
证书文件是.cer结尾的文件
签名描述文件是.p7p结尾的文件
管理员账号在申请调试证书的时候，需要选取证书请求文件（CSR），证书请求文件需要在DevEco Studio上申请，具体操作请参考生成证书请求文件。
下载签名描述文件前需要先通过UDID将设备注册到AGC设备列表，后续Profile中指定的调试设备将从此设备列表中选取。具体步骤：华为开发者联盟的“证书、APP ID和Profile”-设备-添加设备。
配置完成以后点击保存。
发布证书相关配置如下图所示

发布证书的配置参考调试证书即可，签名描述文件分调试和正式两个文件，私钥库文件和证书文件和调试是同一个文件。
图标配置
前景图和背景图标准

标准如下：
前景图是核心图形（如Logo）必须是透明底色的PNG
背景图纯色背景（如纯白色）必须是不透明的PNG
图标资源必须为分层资源（一张前景图和一张背景图）
图标资源尺寸必须为 1024*1024px
启动界面配置
启动界面背景色，根据项目需求填写，本项目为空
启动界面中部图标，推荐选择软件logo
模块配置
根据项目勾选，本项目未勾选
运行到鸿蒙
具体操作：运行-运行到手机或模拟器-运行到鸿蒙

勾选设备-点击运行，成功以后会显示如下信息

这个地方，本项目出现了好多编译错误，最终通过升级uniapp-cli解决
运行成功以后生成鸿蒙工程目录，用DevEco Studio打开即可，打开以后到项目结构如图：

1. 在DevEco Studio中需要检查一下app.json5中的bundleName是不是我们的包名，改为包名即可
2. 在DevEco Studio里配置调试证书

调试过程可以勾选自动生成证书，打正式包要选择正式的描述文件Profile file(*.p7p)，该配置和HbuilderX中的配置大同小异。
OpenHarmony SDK配置

选择设备，可以是USB连接鸿蒙手机，或者在设备管理器中下载虚拟机。

点击右侧运行，鸿蒙app就运行到手机上了。

背景

近期有开发者反馈web端升级到 4.76 之后报错 can't find module 'vue-router/dist/vue-router.esm-bundler.js'，这个是因为你可能是安装到了 4.6.0 版本的 vue- router，这个版本移除了 vue-router.esm-bundler.js 文件，此行为导致了开发环境和生产环境不能正常运行。github上有人反馈了这个问题 详见 https://github.com/vuejs/router/issues/2569

解决方案

如果你使用 npm，需要先删除 node_modules，再重新执行 npm install，检查node_modeuls下面的vue-router依赖是否是最新的 4.6.3 版本，这个版本恢复了 vue-router.esm-bundler.js 文件

vue3-electron38-os：最新原创vite7.1+electron38.2+vue3 setup+pinia3+arcoDesign+echarts跨平台仿macOS/windows风格桌面os管理系统模板。自研可拖拽栅格布局结构、自定义JSON配置桌面菜单/Dock菜单。

使用技术

• 跨平台框架：electron^38.2.0
• 前端技术框架：vite^7.1.7+vue^3.5.21+vue-router^4.5.1
• 组件库：@arco-design/web-vue^2.57.0 (字节前端vue3组件库)
• 状态管理：pinia^3.0.3
• 拖拽插件：sortablejs^1.15.6
• 图表组件：echarts^6.0.0
• markdown编辑器：md-editor-v3^6.0.1
• 模拟数据：mockjs^1.1.0
• 打包构建：electron-builder^24.13.3
• electron+vite插件：vite-plugin-electron^0.29.0

项目结构目录

使用最新版跨平台框架electron38+vite7创建项目模板，vue3 setup语法开发。

electron-vue3-os桌面端os项目已经同步到我的原创作品集。
electron38+vue3+arco-design客户端os系统

热文推荐

electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
原创uniapp+vue3+deepseek+uv-ui跨端实战仿deepseek/豆包流式ai聊天对话助手。
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋友圈
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板
Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序

提个建议---插件 、 广告 等 所有的收益不足100不能体现，有效期时间长了，钱就没有了,这钱也是我们辛辛苦苦 赚的，好伤心。

解决方案一：
新增一个 账户充值功能 然后 凑够 100 能体现。

解决方案二：
到了有效期，提示我们，手动体现 到了 有效期 不足100也能体现

解决方案三：
账户余额不消失，不能体现，但可是用于支付 ，uniapp 等其他产品的支付也行 比如 unicloud 等。。。

等。。。。。

小程序链接：

小程序://吖唏接单/Tm0Y19RMgyRQOYb

使用uniapp开发应用程序，结果部分用户使用三星手机无法正常安装，总结了下原因大概如下两点：

原因一：targetVersion 设置过低无法兼容最新版。

解决方式：查看自己手机系统版本，找到对应API等级。我这里是Android15，对应API等级35。重新打包发布后，下载安装可以正常安装到三星Android15版本手机。

https://uniapp.dcloud.net.cn/tutorial/app-android-targetsdkversion.html

https://uniapp.dcloud.net.cn/tutorial/app-android-targetsdkversion.html

原因二：CPU不兼容。

解决方式：勾选对应CPU，如果不确定，全部勾选，不要漏掉。

介绍内容：

一键检测iOS证书是否有效、是否被封或撤销

全面支持G3协议证书检测机制

支持IPA包内部证书验证功能

检测结果精准可靠，提升证书管理效率

以高亮方式显示证书状态，更直观易懂

显示掉签时间与证书类型，方便追踪与管理

https://cert.signstack.cc/