入门篇 - 快速搭建你的第一个鸿蒙APP

快速搭建你的第一个鸿蒙APP

---

环境准备与工具配置

开发环境搭建

要使用HBuilderX配合uniapp开发鸿蒙应用，需要准备以下环境：

1. HBuilderX安装：

• 前往DCloud官网下载最新版HBuilderX
• 推荐安装"App开发版"，已包含uniapp开发所需插件
• 安装完成后，在工具-插件安装中确认已安装"uni-app编译"插件

2. 鸿蒙开发环境准备：

# 安装Node.js（建议v14以上）
node -v
# 安装鸿蒙开发工具DevEco Studio（可选，用于最终打包）

3. 项目配置检查：
在HBuilderX中创建uniapp项目时，选择"uni-app"项目模板，确保manifest.json中包含鸿蒙配置项。

创建第一个鸿蒙APP

1. 新建项目：

文件 → 新建 → 项目

选择"uni-app" → 输入项目名称 → 选择默认模板

2. 配置鸿蒙平台：
打开manifest.json，在"基础配置"中勾选"鸿蒙"平台支持。

3. 编写测试页面：
在pages/index/index.vue中添加基本代码：

<template>
  <view class="content">
    <text class="title">欢迎使用uniapp开发鸿蒙APP</text>
    <button @click="showToast">点击测试</button>
  </view>
</template>

4. 运行与调试：

• 点击工具栏"运行" → “运行到HarmonyOS模拟器”
• 首次运行会自动安装鸿蒙编译插件

项目结构与基础概念

uniapp鸿蒙项目的核心目录结构：

├── common                  // 公共资源
├── components              // 组件目录
├── pages                   // 页面目录
│   └── index
│       ├── index.vue       // 页面组件
│       └── index.json      // 页面配置
├── static                  // 静态资源
├── App.vue                 // 应用入口
├── main.js                 // 入口JS
├── manifest.json           // 应用配置
└── pages.json              // 页面路由

关键文件说明：

• manifest.json：配置应用名称、图标、权限等
• pages.json：配置页面路由、窗口样式等
• App.vue：应用根组件，可设置全局样式和生命周期

基础组件与API使用

常用组件

uniapp为鸿蒙平台适配了以下核心组件：

1. 视图容器：

<view class="container">
  <scroll-view scroll-y style="height: 300px;">
    <text>可滚动内容</text>
  </scroll-view>
</view>

2. 表单组件：

<input v-model="inputValue" placeholder="请输入内容" />
<switch checked @change="switchChange" />
<button type="primary" @click="submit">提交</button>

3. 媒体组件：

<image src="/static/logo.png" mode="aspectFit"></image>
<video src="http://example.com/video.mp4" controls></video>

常用API

uniapp提供的跨平台API在鸿蒙上的表现：

// 网络请求
uni.request({
  url: 'https://example.com/api',
  success: (res) => {
    console.log(res.data);
  }
});

// 数据缓存
uni.setStorage({
  key: 'token',
  data: 'abc123'
});

// 设备信息
uni.getSystemInfo({
  success: (res) => {
    console.log(res.platform);  // 输出"harmony"
  }
});

样式与布局

uniapp在鸿蒙平台支持的样式特性：

/* 使用rpx实现响应式布局 */
.container {
  width: 750rpx; /* 相当于100%宽度 */
  padding: 20rpx;
}

/* 鸿蒙特有样式适配 */
@media platform-harmony {
  .title {
    font-family: HarmonyOS Sans;
  }
}

调试与发布

调试技巧

1. 控制台输出：

console.log('调试信息');
console.debug('详细调试');

2. 真机调试

• 鸿蒙手机开启开发者模式
• 通过USB连接电脑
• HBuilderX中选择"运行到HarmonyOS设备"

3. 性能分析：
使用HBuilderX内置的性能分析工具：

• 运行 → 性能分析 → 启动CPU分析

打包发布

1. 生成鸿蒙应用包：

• 发行 → 原生App-云打包 → 选择鸿蒙平台

• 或使用本地打包生成HAP文件

2. 签名配置：
   在manifest.json的"鸿蒙应用配置"中设置签名信息，或使用DevEco Studio进行签名。

3. 应用上架：
   将生成的HAP包提交到华为应用市场