uniapp+vue3+鸿蒙系统的开发

实现效果:

鸿蒙pad端真机测试效果,下面是正常的日志效果。

uniapp+vue3+鸿蒙系统的开发

实现步骤:

1、安装鸿蒙的开发工具 (deveco-studio),点击安装,注意版本不能太旧了

uniapp+vue3+鸿蒙系统的开发

2、下载下来是个压缩包,解压后是个exe的安装包,安装即可

uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发

3、设置成中文,点击进来,file->plugin->勾选上这个插件->重启

uniapp+vue3+鸿蒙系统的开发

4、配置你需要的模拟器

uniapp+vue3+鸿蒙系统的开发

首先选择你的模拟器类型,比如手机、平板等等,记得修改保存位置,然后点击新建模拟器

uniapp+vue3+鸿蒙系统的开发

点击新建模拟器来到这里,注意找到你的鸿蒙的型号,一般模拟器会比真机版本要高一些,你可以根据你的真机上的鸿蒙型号来找适合你的版本,比如16-17是当前最常用的,选第二个,然后点击下载

uniapp+vue3+鸿蒙系统的开发

点击下载后,就进行下载状态,可以后天运行,不影响的,第二张图是下载好的,可以看区别

uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发

勾选你下载好的镜像,然后点击下一步

uniapp+vue3+鸿蒙系统的开发

可以自己给服务起名,然后内存和储存空间设置,然后点击完成就配置好了

uniapp+vue3+鸿蒙系统的开发

安装好以后,直接点击这个图标,运行就行,注意,有些配置需要鸿蒙系统才可以

uniapp+vue3+鸿蒙系统的开发

如果运行报错,可以看这些官方资料来解决

文档中心
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-emulator-faqs#section214296171615

5、安装最新的HBuilderX 工具,目前要求鸿蒙开发必须4.5版本以上

HBuilderX 文档
HBuilderX:极客开发工具, HBuilderX用户文档和插件开发文档
https://hx.dcloud.net.cn/Tutorial/install/windows

6、新建一个项目,或者用你自己的项目,然后运行到浏览器查看效果

7、注意鸿蒙要配置签名,这是必须的,没有签名是无法正常运行的

真机插入:

电脑弹出设备信息

uniapp+vue3+鸿蒙系统的开发

鸿蒙的开发者工具中查看设备信息

uniapp+vue3+鸿蒙系统的开发

鸿蒙开发者工具,可以看到刚插入的设备,点击他就可以操作了

uniapp+vue3+鸿蒙系统的开发

HBuilderX中点击运行到鸿蒙,可以看到设备信息,还有个配置签名的入口

uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发

8、配置调试证书

uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发

申请签名具体操作流程指南,鸿蒙官网提供

文档中心–申请调试证书
https://developer.huawei.com/consumer/cn/doc/app/agc-help-add-debugcert-0000001914263178?ha_source=Dcloud&ha_sourceId=89000448

1. 登录AppGallery Connect,选择“证书、APP ID和Profile”。

uniapp+vue3+鸿蒙系统的开发

2. 在左侧导航栏选择“证书、APP ID和Profile > 证书”,进入“证书”页面,点击“新增证书”。

uniapp+vue3+鸿蒙系统的开发

3. 在弹出的“新增证书”窗口填写要申请的证书信息,点击“提交”。

uniapp+vue3+鸿蒙系统的开发
参数说明
证书名称不超过100个字符。
证书类型选择“调试证书”。
选取证书请求文件(CSR)证书请求文件需要在DevEco Studio上申请,具体操作请参考生成证书请求文件

操作步骤:

1、打开鸿蒙开发工具,点击构建,找到生成私钥和请求文件

uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发

然后回到我们上面的第三步,继续填写资料

uniapp+vue3+鸿蒙系统的开发

点击提交以后,可以看到下面的内容,可以点击下载

uniapp+vue3+鸿蒙系统的开发

签名特别需要注意点

  • 证书申请成功即为“生效”状态。目前实名认证开发者的调试证书有效期为180天,未实名开发者的调试证书有效期为14天。
  • 若证书状态变为“失效”或“已吊销”,表示当前证书已不可用,且通过此证书申请的Profile也会全部失效或吊销。您需要重新申请证书与Profile。
  • 证书一旦废除将不可恢复,且通过此证书申请的Profile也会全部失效,请谨慎操作

到目前为止文件只剩下一个,签名描述文件还没有生成了

uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发

9、根据我们最新的签名数据,配置我们uniapp这边的签名信息

uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发

10、运行,直接在ipad上看效果

uniapp+vue3+鸿蒙系统的开发
uniapp+vue3+鸿蒙系统的开发

转载作品,原作者:浩星,文章来源:https://blog.csdn.net/qq_41619796/article/details/149402668

(0)
打赏 微信赞赏 微信赞赏 支付宝赞赏 支付宝赞赏
上一篇 2024-12-05 09:21
下一篇 2025-10-15 16:19

相关推荐

  • uniapp小程序自定义头部导航区域

    uniapp项目小程序中难免会有一些页面需要自定义头部导航区域,因为原生的头部太简陋了,本文记录下uniapp自定义小程序的头部导航。 首先要把小程序自带的头部去掉,在pages.…

    2024-08-06 前端开发
    1.7K0
  • 使用 Vue3 和 vue-print 实现打印功能票据文档

    在开发管理系统或票据打印功能时,打印功能是一个很常见的需求。本教程将详细介绍如何在 Vue3 项目中使用 vue-print 插件实现票据文档的打印功能。

    2024-06-03
    2.8K0
  • vue3打印解决方案:Vue-Plugin-HiPrint

    Vue-Plugin-HiPrint 是一个Vue.js的插件,旨在提供一个简单而强大的打印解决方案。通过 Vue-Plugin-HiPrint,您可以轻松地在Vue.js应用程序中实现高度定制的打印功能。但是本文只简单介绍 Vue-Plugin-HiPrint 在vue3中如何使用固定模板打印的使用方法,以便可以快速集成并使用它。

    2023-12-15
    2.3K0
  • UniApp开发秘籍:打造用户无法抗拒的公众号弹窗组件

    在移动端开发中,吸引用户关注公众号是一个常见需求。UniApp作为一个多平台开发框架,为此提供了便捷的解决方案。本文将介绍如何在UniApp中利用official-account组件封装一个灵活可控的公众号弹窗,提升用户互动体验并优化关注流程。

    2024-02-18
    1.9K0

发表回复

登录后才能评论
扫码了解
扫码了解
反馈建议
分享本页
返回顶部