Uni-APP+Vue3+鸿蒙 开发菜鸟流程

已于 2024-11-17 10:37:46 修改
阅读量1k 收藏 5
点赞数 6
CC 4.0 BY-SA版权
文章标签： uni-app 鸿蒙
于 2024-11-17 10:23:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Defry/article/details/143827698

参考文档

文档中心

运行和发行 | uni-app官网

AppGallery Connect

DCloud开发者中心

环境要求

  1. Vue3
  2. jdk 17 Java Downloads | Oracle 中国 【鸿蒙开发工具内置jdk17，本地不使用17会报jdk版本不一致问题】

  •  开发工具

  1. HBuilder
  2. DevEco Studio【目前只下载这一个就行】 下载中心 | 华为开发者联盟-HarmonyOS开发者官网，共建鸿蒙生态

DevEco Studio配置

创建一个空白项目

【主要为了生成签名】

创建鸿蒙模拟器

启动模拟器

生成签名

生成签名

签名拷贝到HBuilder

如果用Vue开发则将红框中的内容拷贝到Hbuilder中

HBuiler配置

新建vue3项目

运行到鸿蒙

DevEco的执行文件路径

签名信息同步

将DevEco 生成的签名更新到HBuilder项目中

配置完成再次运行到鸿蒙会出现如下页面【内容不一样，仅供演示使用】

Defry
关注
鸿蒙开发基础教程
07-13 962
概述 官网说： HarmonyOS是一款“面向未来”、面向全场景（移动办公、运动健康、社交通信、媒体娱乐等）的分布式操作系统。在传统的单设备系统能力的基础上，HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持多种终端设备。 在我看来： HarmonyOS是一款可以用Java或JS开发的国产手机操作系统。也就意味着我们可以更快的入门鸿蒙开发。 对的，可以使用JS或Java开发鸿蒙应用，相比于Google推出的Fuchsia OS使用dart语言开发，简直良心到..
uni-app使用vue3、ts开发小程序微信分享到朋友和朋友圈
前端菜鸟好先森的博客
02-15 2410
uni-app使用vue3、ts开发小程序实现微信分享到朋友和朋友圈
Vue3版本的uniapp项目运行至鸿蒙系统
kjprime的博客
11-04 890
注意，先将HbuilderX升级至最新版本，这样才支持鸿蒙系统的调试与运行；按照如下图片点击，快速升级皆可。
uniapp如何编译成鸿蒙运行
Mingmingzhaomi的博客
06-17 559
本文介绍了如何将UniApp项目编译为鸿蒙应用的详细步骤。首先阐述UniApp作为跨平台框架的优势，然后具体讲解从创建新项目(demo1)、运行配置到调试证书申请的全流程。重点包括：通过设备管理器启动鸿蒙模拟器、自动申请调试证书并进行身份验证、创建证书存放文件夹、生成密钥文件等关键操作。最后说明如何完成编译并在模拟器上查看运行效果，实现UniApp项目向鸿蒙系统的成功迁移。整个过程涵盖了项目初始化、环境配置、证书管理和编译测试等核心环节。
鸿蒙开发-ArkUI封装interface接口+自定义组件(菜鸟学习01)
a1009698473的博客
04-30 1131
提示：首先，定义了一个Item接口来描述商品的数据结构，这有助于提高代码的可读性和可维护性。
Vue学习之使用HBuilderX创建并使用vue3.0项目
qq_38527427的博客
02-01 8091
本文简述HBuilderX中如何使用vue3.0项目
鸿蒙开发-状态管理器@State：对象数组的增删及属性更新(菜鸟学习02)
a1009698473的博客
05-08 4160
在鸿蒙HarmonyOS应用开发中，@State装饰器是管理组件状态的重要工具，尤其在处理对象数组时，它能确保UI与数据模型的同步更新。本文档将深入探讨如何利用@State有效地执行对象数组的增删操作以及属性更新，确保状态变化的正确反映。
vue create -p dcloudio/uni-preset-vue my-uni-app为啥我装出来是vue2项目交互式菜单中选择：也没有选择vue3
最新发布
07-09
首先，用户的问题是关于使用 `vue create -p dcloudio/uni-preset-vue my-uni-app` 命令创建 uni-app 项目时，为什么生成的是 Vue 2 项目而不是 Vue 3，并且交互式菜单中没有选项可以选择 Vue 3。 我需要参考提供的...
uni-app实战社区交友类app开发视频教程【超清完整版】
05-18
uni-app实战社区交友类app开发视频教程
uni-app跨平台开发
o1dkdj的博客
06-15 963
Uni-app 框架提供了许多平台原生的 UI 控件和 API 的访问，但是这些控件和 API 在不同平台之间的支持和表现情况会有所不同，因此我们需要注意在编写代码时尽量避免使用不同平台独有的 API 或特性，同时要特别关注不同平台之间的差异，以便在不同平台上运行时代码能够正确地工作。Uni-app 运行在多个平台上，每个平台的特点是不同的。最后，总体来说，Uni-app 的跨平台开发提供了许多可能性和便利性，但也需要在搭建过程中注意兼容性问题，同时进行版本控制和测试，从而确保应用程序能够稳定地运行。
基于微信小程序的办公系统，基于vite,Vue3,Pinia,Typesrcipt,uni-app等技术栈开发.zip
12-13
【标题】基于微信小程序的办公系统，基于vite,Vue3,Pinia,Typescript,uni-app等技术栈开发 【描述】这是一个计算机类的毕业设计项目，它使用了最新的前端开发工具和技术，构建了一个微信小程序应用，适用于日常办公...
uniapp vue3 转换华为鸿蒙（以及问题一些解决方案）
m0_61382303的博客
08-06 4654
uniapp vue3 转换华为鸿蒙（以及问题一些解决方案）
【Web】使用Vue3开发鸿蒙的HelloWorld！
沙师弟专栏
05-10 1815
本文介绍了如何利用Vue3与HarmonyOS ArkUI框架进行鸿蒙原生应用开发。通过Vue3的响应式编程范式和ArkUI的声明式UI语法，开发者可以快速构建高性能的跨端应用。文章详细描述了从环境搭建到应用落地的全流程，包括开发环境的配置、Vue项目的创建与修改、静态资源的生成与导入，以及如何在DevEco Studio中进行应用签名和运行。最终，开发者可以将Vue3项目成功移植到华为Mate 60 Pro上，实现“一次开发，多端部署”的目标。
uni-app开发华为鸿蒙Harmony Next实践（保姆级）
热门推荐
weixin_46591361的博客
07-19 1万+
HBuilderX 新建一个空白的 uniapp 项目，选vue3(我选的是 uni-ui模板)创建好后，在 manifest.json 文件中配置鸿蒙离线SDK路径（就是上面3-2中的路径）},到这里就配置完成了，下一步运行自动失败不要怕，我们来手动启动3-3中打开的DevEco Studio直接运行我还在里面加了点uni-ui组件也是正常展示的到这整个配置运行就结束了。
vue3 HarmonyOS 华为鸿蒙浏览器的支付宝支付问题解决
郊眠寺
06-20 1953
事情是这样的，现在的vue3+ts项目需要用到支付宝支付，支付的方式都很简单，就是获取form表单然后提交即可，但是在鸿蒙的自带浏览器中出现了诡异的情况，主要表现在机智如我，先是尝试了生命周期的调试，无效，根本没有任何反应，遂放弃！于是我先，如果判断华为浏览器，然后将表单的在新页面打开呢？嘿，结果您猜怎么着？这个属性华为浏览器直接没反应，诶，就是雷打不动…怎么办呢？看来曲线救国是不行了，得来硬的，好在 这个方法还能用，思路大概是通过浏览器标识判断是华为浏览器，此时新开一个页面，将请求到的form数据存在（
uni-app 开发的应用快速构建成鸿蒙原生应用
zzlyx99的专栏
10-09 2570
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它支持编译到 iOS、Android、小程序等多个平台。对于 HarmonyOS（鸿蒙系统），uni-app 提供了特定的支持，允许开发者构建鸿蒙原生应用。
鸿蒙(HarmonyOS)应用开发——安装DevEco Studio安装
weixin_46282323的博客
11-23 1359
HarmonyOS华为开发的操作系统，旨在为多种设备提供统一的体验。它采用了分布式架构，可以在多个设备上同时运行，提供更加流畅的连接和互动。HarmonyOS的目标是提供更高的安全性、更高效、响应更快的用户体验，并通过跨设备功能提供更大的便利性。在鸿蒙开发者工具刚发布的时候，他支持C++、 javascript、 java(安卓)来开发基于鸿蒙系统的应用，c++ 和java 和传统的开发是没有什么区别的。但是HarmonyOS 新增加了js支持。让前端开发者也可以加入其中。
uniapp开发鸿蒙next应用设置桌面图标角标
微笑的季节的专栏
11-01 1472
最近在使用uniapp开发纯血鸿蒙应用，有一起的小伙伴可以私信加好友进群有问题可以一起讨论，还是有很多地方需要学习，互帮互助！uniapp没有提供api直接修改桌面图标角标，所以需要自己编写uts插件调用鸿蒙next系统的api去修改桌面图标角标，下面详细介绍下操作以及代码。
记录uniapp运行到鸿蒙流程及遇到的坑们
qq_41537593的博客
10-12 9605
记录一次uniapp运行到鸿蒙模拟器，及中间遇到的问题和坑
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值