IT评测·应用市场-qidao123.com技术社区

标题: vue3 + uniapp 可以直接开辟鸿蒙啦！ [打印本页]

作者: 惊落一身雪 时间: 2024-9-19 11:52
标题: vue3 + uniapp 可以直接开辟鸿蒙啦！
7 月 20 号，uniapp 官网上线了 uniapp 开辟鸿蒙应用的文档，标志着 Vue3 + uniapp 开辟鸿蒙应用时代的开启。

鸿蒙开辟的支持与限定

鸿蒙开辟仅支持 Vue3，不支持 Vue2 和 plus，
支持 nvue，nvue 编译到鸿蒙后非原生渲染。

开辟环境要求

DevEco-Studio 5.0.3.400 以上 (DevEco-Studio 较大，达10G*)
鸿蒙系统版本 API 12 以上，HBuilderX-alpha-4.22 以上
Windows 系统使用模仿器需开启特定功能，且家庭版需升级。

设置鸿蒙离线 SDK 及相干操作

包括下载、解压、在 DevEco-Studio 中打开、启动模仿器或连接真机、设置署名等步调。
启动鸿蒙模仿器

分为三步，包括下载、解压、等待 Sync 竣事等，还涉及开辟者申请。

安装完模仿器后，点击启动按钮启动模仿器

启动模仿器成功后，如果提示必要先署名，则进行设置署名

连接鸿蒙真机

留意：真机必要鸿蒙系统版本 API 12 以上

打开鸿蒙手机开辟者模式，开启USB调试，通过USB线连接电脑，在此处选择你的手机名称，再启动项目即可，如果提示必要先署名，则进行设置署名

设置 HBuilderX 吊起 DevEco-Studio：在 HBuilderX 中进行相干设置，填写 DevEco-Studio 启动路径。
创建 uni-app 工程：在 BuilderX 新建空缺项目，选 vue3，在 manifest.json 文件中设置鸿蒙离线 SDK 路径。

设置署名

留意：设置署名必要先启动模仿器或连接真机后才气设置

设置 HBuilderX settings.json

需在 HBuilderX 中进行特定的设置操作

打开HBuilderX，点击上方菜单 - 工具 - 设置，在出现的弹窗右侧窗体新增如下设置
留意：值填你自己的 DevEco-Studio 启动路径

"harmony.devTools.path" : "D:/Huawei/DevEco Studio"

复制代码

使用 uts 调用鸿蒙原生 API, 第三方API

调用鸿蒙原生 API
uni-app在Android和iOS平台，支持uts插件和App原生语言插件。现在App原生语言插件已经停止维护。uts插件是主推的扩展方式。
鸿蒙系统有很多原生API，可以通过uts插件方式接入，被uni-app调用。

uts插件介绍
uts插件鸿蒙开辟专题

调用第三方 API
新增于 HBuilderX 4.25，有特定的使用流程和限定。
鸿蒙的包用法和npm包差不多，在鸿蒙项目内里用ohpm安装三方库后，在 /uni_modules/uts插件名/utssdk/app-harmony/index.uts 内即可直接 import
留意：只能在满足uts插件 /uni_modules//utssdk/app-harmony/.uts 的文件下使用，无法直接在项目的pages中使用
详细使用流程：在项目的pages引入uts插件，uts插件内再引入鸿蒙第三方库调用
发布鸿蒙应用

鸿蒙官方文档提供了怎样发布鸿蒙应用，详见文档

留意事项

移植已有的 uni-app 项目源码时，如有其他 npm 依赖，请自行安装
现阶段条件编译仅 APP-HARMONY、APP 可以掷中鸿蒙平台
每次HBuilderX改动源码后，DevEco-Studio 内必要点重新运行才气见效
如果模仿器白屏了，尝试重启软件 DevEco-Studio，再重启项目
如果模仿器无法连接了，尝试重启电脑
在HBuilderX里运行后，必要再去鸿蒙 DevEco Studio里运行
在HBuilderX里修改代码后，必要去鸿蒙 DevEco Studio里重新运行
如果有多个uni-app项目要编译到鸿蒙，那么鸿蒙离线sdk必要放置多份，每个uni-app的manifest中设置不同的离线sdk地点，否则会冲突，鸿蒙设备上现在没有基座概念

总结

这样我们就有了一个初始的鸿蒙项目，并且可以在鸿蒙模仿器上运行。关于更多 uniapp 开辟鸿蒙的 API，大家可以直接参考 uniapp
官方文档

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)