vue3 + uniapp 可以直接开辟鸿蒙啦!
7 月 20 号,uniapp 官网上线了 uniapp 开辟鸿蒙应用的文档,标志着 Vue3 + uniapp 开辟鸿蒙应用时代的开启。https://i-blog.csdnimg.cn/blog_migrate/652056a925369d6ff51188022a5f68ca.png
鸿蒙开辟的支持与限定
[*]鸿蒙开辟仅支持 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 竣事等,还涉及开辟者申请。
https://i-blog.csdnimg.cn/blog_migrate/c1e9c5f7842d1f7e207f9ad99ed7976a.png
[*]安装完模仿器后,点击启动按钮启动模仿器
https://i-blog.csdnimg.cn/blog_migrate/8f996ef71652776271b8f5e199e7b47f.png
[*]启动模仿器成功后,如果提示必要先署名,则进行设置署名
https://i-blog.csdnimg.cn/blog_migrate/68debc9d39acbcc07423b0799106f6ed.png
连接鸿蒙真机
留意:真机必要鸿蒙系统版本 API 12 以上
[*]打开鸿蒙手机开辟者模式,开启USB调试,通过USB线连接电脑,在此处选择你的手机名称,再启动项目即可,如果提示必要先署名,则进行设置署名
https://i-blog.csdnimg.cn/blog_migrate/dc354f171c0f702fe78bef53155af4a3.png
[*]设置 HBuilderX 吊起 DevEco-Studio:在 HBuilderX 中进行相干设置,填写 DevEco-Studio 启动路径。
[*]创建 uni-app 工程:在 BuilderX 新建空缺项目,选 vue3,在 manifest.json 文件中设置鸿蒙离线 SDK 路径。
设置署名
留意:设置署名必要先启动模仿器或连接真机后才气设置
https://i-blog.csdnimg.cn/blog_migrate/a84fce80774efd2a9ac79ea08d5f4029.png
设置 HBuilderX settings.json
需在 HBuilderX 中进行特定的设置操作
[*]打开HBuilderX,点击上方菜单 - 工具 - 设置,在出现的弹窗右侧窗体新增如下设置
[*]留意:值填你自己的 DevEco-Studio 启动路径
"harmony.devTools.path" : "D:/Huawei/DevEco Studio"
https://i-blog.csdnimg.cn/blog_migrate/ab6be5da1bb28471b43a00e20487838a.png
使用 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插件内再引入鸿蒙第三方库调用
发布鸿蒙应用
鸿蒙官方文档提供了怎样发布鸿蒙应用,详见 文档
https://i-blog.csdnimg.cn/blog_migrate/6d66d2fd29708dfcade2085e39d4a4ba.png
留意事项
[*]移植已有的 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企服之家,中国第一个企服评测及商务社交产业平台。
页:
[1]