当前位置: 首页 > news >正文

【UniApp打包鸿蒙APP全流程】如何配置并添加UniApp API所需的鸿蒙系统权限

一、前言:为什么选择 UniApp 打包鸿蒙应用?

随着鸿蒙生态的快速发展,越来越多开发者希望将现有跨平台项目快速接入鸿蒙系统。而 UniApp 作为国内领先的跨平台开发框架,凭借其“一次开发,多端发布”的特性,成为接入鸿蒙(HarmonyOS)的理想选择。

本文将基于 Vue3 + UniApp 的项目架构,详细介绍如何通过 HBuilderX + DevEco Studio 联合打包,将项目发布为标准的鸿蒙应用(.hap 或 .app 包),并重点讲解如何为 UniApp 中使用的 API 添加对应的 鸿蒙系统权限(ohos.permission),确保功能正常运行。

二、开发环境准备

1. 基础工具
最好保证HBuilderX和DevEco Studio的版本都是最新的
HBuilderX(目前我使用的版本为4.75)
DevEco Studio(目前我使用的版本为5.0.5)
Node.js(16+)

2. 项目基础
使用 Vue3 语法开发的 UniApp 项目(底层必须使用vue3的语法,vue2不支持)

三、UniApp 项目打包为鸿蒙工程

步骤 1:在 HBuilderX 中生成鸿蒙工程
打开你的 UniApp 项目
点击菜单栏:运行 > 运行到手机或模拟器(N)> 运行到鸿蒙(H)
在这里插入图片描述
记得连接鸿蒙设备,并且配置调试证书(调试证书是支持自动生成的,开发阶段可以使用,打包发布时需要生成上线证书)
在这里插入图片描述
点击“自动申请调试证书”即可,调试证书会自动生成,注意应用包名,这个包名后续在华为开发者联盟-AppGallery Connect做应用分发的时候会用到,请认真命名!!!
在这里插入图片描述
点击“保存”后运行,HBuilderX 会生成一个标准的鸿蒙工程目录(通常为app-harmony)
在这里插入图片描述
⚠️ 注意:生成的工程是标准的 HarmonyOS 项目结构,包含 entry/、module.json5、resources 等。

四、使用 DevEco Studio 导入并构建鸿蒙应用

步骤 1:导入工程
打开 DevEco Studio
选择“Open an existing HarmonyOS project”
选择 HBuilderX 生成的鸿蒙工程目录
在这里插入图片描述
DevEco Studio汉化(安装汉化插件 Chinese(simplified)),打开项目右上角的设置图标,找到插件(Plugins),点击打开
在这里插入图片描述
在市场搜索Chinese(simplified)安装后重启即可
在这里插入图片描述

五、关键:为 UniApp API 添加鸿蒙系统权限

UniApp 在鸿蒙端运行时,部分 API 需要对应的 鸿蒙权限(ohos.permission) 才能正常使用。这些权限需在 module.json5 文件中声明。
可以参考uniapp提供的鸿蒙APP专题权限配置指南
在这里插入图片描述
在这里插入图片描述

六、做APP应用分发

1.首先打开华为开发者联盟点击AppGallery Connect,进行应用分发
如果是企业使用,建议先进行企业认证
在这里插入图片描述

点击“证书、APP ID和Profile”(我这里是旧版界面,可以切换成新版,新版界面与旧版界面的功能模块名称是一致的)
在这里插入图片描述
可以看我们已经有“调试证书”了,可以生成一个“发布证书”进行软件上架发布。
在这里插入图片描述

点击“新增证书”,证书类型选择“发布证书”,证书名称最好规范一些
在这里插入图片描述
这里还需要csr文件,回到DevEcostudio,在主菜单栏单击Build > Generate Key and CSR
在这里插入图片描述
没有密钥库文件,单击New进行创建
注意选择好“.p12”文件生成后存放的位置,后续还需要使用(可以创建一个harmony-configs的文件,后续所有的证书文件都可以生成到这个文件夹下)
在这里插入图片描述
在这里插入图片描述
选择已经生成好的文件,填写密码和别名,点击next
在这里插入图片描述

接着选择.csr文件生的位置,及填写csr文件生成之后的名称。点击Finish即可
在这里插入图片描述
在这里插入图片描述
注意所有生成的文件都统一放在一个文件夹下(我创建的文件夹名称为“harmony-configs”)

csr文件选择在harmony-configs文件夹创建的csr文件夹里,点击finish和确定。这样我们的csr文件搞定了在上述界面可以选取刚刚的csr,点击提交即可
在这里插入图片描述
下载后的cer文件,放在harmony-configs文件夹下的新增文件夹调试
在这里插入图片描述
2.配置APPID,点击新增
在这里插入图片描述
填写应用名称和应用包名后点击下一步
在这里插入图片描述选择所属项目和需要的开发能力,点击确定
在这里插入图片描述
这就创建了APPID
在这里插入图片描述
3.新增应用,填写名称、选择设备类型和UDID
在这里插入图片描述
UDID获取方法

在手机、平板、PC/2in1、智能手表上获取UDID的方法如下:

  1. 在设备上打开USB调试权限。
  2. 使用PC连接设备后,打开命令行工具,进入HDC目录(一般为:DevEco Studio安装目录/sdk/default/openharmony/toolchains),输入hdc shell bm get --udid命令,获取设备的UDID。

4.添加profile,选择应用和profile名称 ,类型为调试等信息,点击右上角“添加”,调试Profile申请成功,“Profile”页面展示Profile信息。点击“下载”,将生成的p7b文件保存至harmony-configs文件夹,供后续签名使用。
在这里插入图片描述
5.文件齐全后就可以回到下列界面,选择“项目结构”
在这里插入图片描述
点击“签名配置”后并点击新增,增加一个release的配置用于发版
在这里插入图片描述
去掉自动生成签名的勾选,并且从harmony-configs文件夹中选取到对应的文件,填入进去点击“Apply”即可

在这里插入图片描述
点击“Product”,把构建模式改为“release”后点击“Apply”
在这里插入图片描述
6.点击“构建” > 选择编译成Hap 或 APP 即可
在这里插入图片描述
最后构建出来的包都会在这里。
在这里插入图片描述

至此,前期准备工作已全部完成,我们已成功将 UniApp 项目打包为鸿蒙应用,后续可进入应用的发布阶段。

http://www.dtcms.com/a/344646.html

相关文章:

  • MySQL B+树索引使用
  • QT之QSS的使用方法和常用控件的样式设置
  • Qt 的事件类QEvent及其他子类事件的开发详解:从基础到实践的全方位指南
  • 高并发用户数峰值对系统架构设计有哪些影响?
  • Qt-窗口类部件
  • 极验demo(float)(一)
  • 数据结构:队列 二叉树
  • vivo“空间计算-机器人”生态落下关键一子
  • 码蹄杯进阶
  • 笔试——Day46
  • 基于SpringBoot+Vue框架的高校论坛系统 博客论坛系统 论坛小程序
  • 企业版Idea 无快捷键的启动方式
  • 和AI Agent一起读论文——A SURVEY OF S ELF EVOLVING A GENTS(五)
  • 如何监控和管理微服务之间的调用关系
  • 微信开发者工具:更改 AppID 失败
  • Unreal Engine Class System
  • 滑动窗口+子串+普通数组算法
  • Spring AI调用本地大模型实战
  • 【LINUX】CentOS7在VMware15中,从命令行界面切换到图形界面的异常汇总
  • Day10 Go语言深入学习(2)
  • 零成本 Redis 实战:用Amazon免费套餐练手 + 缓存优化
  • skywalking-agent与logback-spring.xml中的traceId自动关联的原理
  • 使用C#的 PdfDocument 实现 PDF 页眉页脚的编辑
  • 我用Photoshop Firefly+Blender,拯救被环境毁掉的人像大片
  • Blender模型动画导入到UE5
  • uniappx新增的几个api
  • AI + 教育:个性化学习如何落地?教师角色转变与技术伦理的双重考验
  • 文字提取技术让文档实现数字化效率翻倍-文字识别接口
  • Kubernetes概念:ETCD 的本质与备份恢复实践
  • 永磁同步电机控制算法-反馈线性化滑模直接转矩控制