使用uni-app x 开发鸿蒙pc应用

坚果派_坚果
214 阅读3分钟

使用uni-app x 开发鸿蒙pc应用

uni-app x

uni-app x 简介

uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎，现已支持编译成 HarmonyOS Next 原生应用(4.61+)

uni-app x 包括 uvue 渲染引擎、uts 语言、uni的组件和API、以及扩展机制。

uvue 渲染引擎

用 vue3 框架快速编写页面，最终编译为不同平台的、高性能的纯原生界面。

  1. 模板式写法
  2. 数据双向绑定
  3. 组件机制

在 HarmonyOS Next 平台，uni-app x 的工程被整体编译为 ArkTS + ArkUI 代码，本质上是换了 vue 写法的原生鸿蒙应用。

uts 语言

uts 全称 uni typescript，是一门强类型的现代编程语言。支持跨平台，最终会被编译为不同平台的 native语言，如：

  • web/小程序平台，编译为JavaScript
  • 鸿蒙next平台，编译为ArkTS
  • Android平台，编译为Kotlin
  • iOS平台，编译Swift

uts 和 ts 很相似，但为了跨端，uts 进行了一些约束和特定平台的增补。详见 uts语言介绍

注意：在 ts 中，常通过 interface 或 type 定义对象类型，但在 uts 中，需使用 type 定义对象类型。因为 interface 在 kotlin 和 swift 中有差异。

uni 组件

ni-app x 的组件主要分三类：

  • 内置基础组件：如 view、text、image、scroll-view、input... 等，详见组件清单
  • 自定义组件：开发者自己通过 vue 语法封装的组件。
  • uts组件插件：第三方组件，可通过插件市场下载。

准备工作

开发环境准备

下载安装 HBuilderX 编辑器

www.dcloud.io/hbuilderx.h…

通过 HbuilderX 创建 uni-app x 项目

image-20250520000158957

编译运行

  • 安装 uni-app x 编译器插件
  • 编译并运行鸿蒙原生应用

image-20250520065600400

image-20250520070813717

项目 NutPICommunity 开始编译
06:55:07.568 正在下载编译工具，请稍后...
06:55:29.857 编译工具下载成功
06:55:30.503 请注意运行模式下，因日志输出、sourcemap 以及未压缩源码等原因，性能和包体积，均不及发行模式。
06:55:30.503 编译器版本：4.65（uni-app x）
06:55:30.503 正在编译中...
06:55:33.230 项目 NutPICommunity 编译成功。           
06:55:34.703 ready in 4481ms.
06:55:34.706 新增了 harmony-configs 目录，可用于对鸿蒙应用进行自定义配置，用法请参考 配置文档
06:55:35.263 已自动生成鸿蒙工程目录，如有需要请用 DevEco Studio 打开如下目录: /Users/jianguo/Desktop/teaching/NutPICommunity/unpackage/dist/dev/app-harmony
06:55:35.515 本机安装的 DevEco Studio 版本为 5.0.13.200
06:55:35.519 未正确配置鸿蒙应用的包名，请参考 配置文档
06:55:35.519 没有配置签名证书
06:55:35.519 安装鸿蒙工程的依赖 ...
06:55:36.611 安装鸿蒙工程依赖成功
06:55:36.611 开始制作运行包 .hap，请耐心等待 .........
06:55:57.158 由于未配置相关数字证书，打包未签名，请参考 配置文档
06:55:57.158 运行包制作成功
06:55:57.158 安装 .hap 到鸿蒙设备 ...
06:55:58.917 安装成功
06:55:58.917 在鸿蒙设备上启动运行 .hap ...
06:55:59.202 未正确配置鸿蒙应用的包名，请参考 配置文档
06:56:02.066 运行成功
avatar
文章
阅读
粉丝