uni-app 开发华为鸿蒙HarmonyOS NEXT初体验

最新推荐文章于 2025-06-16 21:31:03 发布

原创最新推荐文章于 2025-06-16 21:31:03 发布 · 4.5k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#华为 #uni-app #harmonyos

引言

随着华为鸿蒙系统的不断发展，越来越多的开发者开始尝试使用uni-app来开发跨平台应用，特别是针对华为最新的HarmonyOS NEXT版本。本文将分享我在使用uni-app开发HarmonyOS NEXT应用的一些经验和心得，并提供具体的代码示例。

1. 开发环境准备

1.1 安装必备工具

为了开始开发，你需要安装以下工具：

Node.js：推荐使用LTS版本。
uni-app CLI：可以通过npm安装。
DevEco Studio：华为官方IDE，支持鸿蒙开发。
HBuilderX：uni-app推荐的IDE，支持鸿蒙离线SDK。

1.2 配置IDE

打开HBuilderX，点击上方菜单 - 工具 - 设置 - 源码视图 - 用户设置。
配置鸿蒙离线SDK（sdk由uniapp提供）：
- 下载uni-app鸿蒙离线SDK，例如template-1.3.4.tgz。
- 解压并配置到HBuilderX中。

1.3 创建项目

新建一个空白的uniapp项目，选择Vue3版本。
选择uni-ui模板，便于快速构建界面。

2. 开发过程

2.1 项目初始化

配置项目名称、描述等基本信息。
选择目标平台：在项目配置中选择支持HarmonyOS。

初始化项目命令行示例

bash

深色版本

1# 全局安装uni-app CLI
2npm install -g @dcloudio/uni-cli
3
4# 创建一个新的uni-app项目
5uni init my-harmonyos-app --template https://github.com/dcloudio/uni-app-template-harmonyos
6
7# 进入项目目录
8cd my-harmonyos-app

2.2 编写代码

页面布局示例

使用uni-app的组件和样式来构建界面。

pages/index.vue

vue

深色版本

1<template>
2  <view class="container">
3    <view class="header">
4      <text class="title">Hello HarmonyOS</text>
5    </view>
6    <view class="content">
7      <button type="primary" @click="showToast">点击我</button>
8    </view>
9  </view>
10</template>
11
12<script>
13export default {
14  methods: {
15    showToast() {
16      uni.showToast({
17        title: '这是个提示',
18        icon: 'none'
19      });
20    }
21  }
22}
23</script>
24
25<style scoped>
26.container {
27  display: flex;
28  flex-direction: column;
29  align-items: center;
30  justify-content: center;
31}
32
33.header {
34  padding: 20rpx;
35}
36
37.title {
38  font-size: 32rpx;
39  color: #333;
40}
41</style>

2.3 调试与测试

使用DevEco Studio内置模拟器：DevEco Studio提供了鸿蒙模拟器，方便进行调试。
真机调试：通过USB连接华为设备，使用DevEco Studio进行真机调试。

调试步骤

打开DevEco Studio，选择你的项目。
在模拟器列表中选择一个设备模拟器。
点击运行按钮，在模拟器上运行你的应用。

3. 特色功能体验

3.1 实况窗

HarmonyOS NEXT提供了改进的实况窗功能，可以创建更丰富的桌面小部件。

实现实况窗示例

创建实况窗：需要在manifest.json文件中定义实况窗。
编写实况窗逻辑：使用特定的API来更新实况窗的内容。

manifest.json

json

深色版本

1{
2  "pages": [
3    "pages/index/index",
4    ...
5  ],
6  "subPackages": [],
7  "window": {
8    "backgroundTextStyle": "light",
9    "navigationBarBackgroundColor": "#fff",
10    "navigationBarTitleText": "Hello HarmonyOS",
11    "navigationBarTextStyle": "black"
12  },
13  "usingComponents": {},
14  "harmonyos": {
15    "appType": "ohos",
16    "quickApp": {
17      "quickAppList": [
18        {
19          "name": "pages/index/index",
20          "icon": "static/icon.png",
21          "type": "service",
22          "title": "Hello HarmonyOS"
23        }
24      ]
25    }
26  }
27}

3.2 锁屏大卡片

锁屏大卡片让用户无需解锁手机即可查看重要信息，增强了用户体验。

锁屏大卡片示例

定义锁屏大卡片：在manifest.json中添加锁屏大卡片配置。

manifest.json

json

深色版本

1"harmonyos": {
2  "lockScreenWidget": {
3    "enable": true,
4    "icon": "static/icon.png",
5    "title": "Hello HarmonyOS",
6    "type": "service",
7    "pagePath": "pages/index/index"
8  }
9}

3.3 通知服务

改进的通知服务让开发者能够创建更丰富、更互动的通知体验。

通知服务示例

发送通知：使用uni-app的通知API。

main.js

javascript

深色版本

1// 发送通知
2function sendNotification(title, content) {
3  uni.showNotification({
4    title: title,
5    content: content
6  });
7}
8
9// 示例调用
10sendNotification('新消息', '你有一条新的未读消息');