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

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

文章目录

• 快速搭建你的第一个鸿蒙APP
• 环境准备与工具配置
• • 开发环境搭建
  • 创建第一个鸿蒙APP
  • 项目结构与基础概念
• 基础组件与API使用
• • 常用组件
  • 常用API
  • 样式与布局
• 调试与发布
• • 调试技巧
  • 打包发布

环境准备与工具配置

开发环境搭建

要使用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包提交到华为应用市场