uni-app for Harmony

2024-08-27 17:25:20 浏览数 (3)

今天带着大家一起 uni-app for Harmony

uni-app

uni-app 是一个使用 Vue.js[1] 开发所有前端应用的框架，开发者编写一套代码，可发布到 HarmonyOS、iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app在开发者数量、案例、跨端抹平度、扩展灵活性、性能体验、周边生态、学习成本、开发成本等 8 大关键指标上拥有更强的优势。

功能框架图

HarmonyOS

HarmonyOS 是新一代智能终端操作系统。 为不同设备的智能化、互联与协同提供了统一的语言。 设备可实现一碰入网，无屏变有屏，操作可视化，一键直达原厂服务等全新功能。 通过简单而智能的服务，实现设备智能化产业升级。

uni-app for Harmony

接下来我们以 Mac 电脑为例，开始今天的演示。

开发环境要求

  • DevEco-Studio 5.0.3.400 以上[2]
  • 鸿蒙系统版本 API 12 以上 （DevEco-Studio 有内置鸿蒙模拟器）
  • HBuilderX-alpha-4.22 以上[3]

大家先把上面两个工具安装配置好，这是最简单的，我们不过多阐释。操作完上面的步骤，我们就开始后面的内容

配置鸿蒙离线 SDK（鸿蒙项目模板）

  1. 下载 uni-app 鸿蒙离线 SDK template-1.3.7.tgz 下载地址[4]
  2. 解压刚下载的压缩包，将解压后的模板工程在 DevEco-Studio 中打开
  3. 等待 Sync 结束，再启动鸿蒙模拟器 或 连接鸿蒙真机。

启动鸿蒙模拟器

连接鸿蒙真机

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

配置签名

点击 DevEco-Studio 上方菜单 File - Project Structure...

在弹出的窗体中选择 Project - Signing Configs 并打钩 Automatically generate signature，即可自动生成签名

配置 HBuilderX settings.json

打开 HBuilderX，点击上方菜单 - 工具 - 偏好设置，在出现的弹窗右侧窗体新增如下配置

代码语言：javascript复制
{
"harmony.devTools.path" : "/Applications/DevEco-Studio.app/"
}

上面的报错就用下面的

代码语言：javascript复制
{
"harmony.devTools.path" : "/Applications/DevEco-Studio.app/Contents/MacOS/devecostudio"
}

接下来就进入真题

配置 uni-app 工程

选择新建项目

HBuilderX 新建一个空白的 uniapp 项目，选 vue3

在 manifest.json 文件中配置鸿蒙离线 SDK 路径

编辑 manifest.json 文件，新增如下配置：

代码语言：javascript复制
"app-harmony": {
  "projectPath": "上一步下载的template-1.3.7.tgz的解压地址/package"
}

我的是

代码语言：javascript复制
"app-harmony": {
   "projectPath": "/Users/jianguo/Desktop/teaching/next/package"
 },

编译 uni-app 到鸿蒙

点击 HBuilderX 上方【运行】菜单，运行到鸿蒙 DevEco Studio

在 DevEco-Studio 重新编译或运行

先等待 HBuilderX 编译完成，然后打开 DevEco-Studio，点击运行，下面这个报错是 HBuilderX settings.json 里的路径有问题，请检查。

然后重新启动

然后就能看到如图所示的效果啦。

使用 uts 调用鸿蒙原生 API

uni-app 在 Android 和 iOS 平台，支持 uts 插件和 App 原生语言插件。目前 App 原生语言插件已经停止维护。uts 插件是主推的扩展方式。

鸿蒙系统有很多原生 API，可以通过 uts 插件方式接入，被 uni-app 调用。大家可以期待一下后面的内容。

参考

  • 什么是 uni-app[5]
  • 开发指导[6]
  • uts 插件介绍[7]
  • uts 插件鸿蒙开发专题[8]

参考资料

[1]

Vue.js: https://vuejs.org/

[2]

DevEco-Studio 5.0.3.400 以上: https://developer.huawei.com/consumer/cn/download/

[3]

HBuilderX-alpha-4.22 以上: https://www.dcloud.io/hbuilderx.html

[4]

下载地址: https://web-ext-storage.dcloud.net.cn/uni-app/harmony/zip/template-1.3.7.tgz

[5]

什么是uni-app: https://uniapp.dcloud.net.cn/

[6]

开发指导: https://zh.uniapp.dcloud.io/tutorial/harmony/dev.html

[7]

uts插件介绍: https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html

[8]

uts插件鸿蒙开发专题: https://doc.dcloud.net.cn/uni-app-x/plugin/uts-for-harmony.html

配置 app 插件 开发 连接

1 人点赞