用Uniapp开发鸿蒙项目 三 原创

一、准备工作

• HBuilderX：跨平台开发工具，官方下载地址：​​HBuilderX 官网​​

提示：建议下载最新稳定版，支持 uni-app x 框架及鸿蒙平台特性

• DevEco Studio：鸿蒙官方开发工具，下载地址：​​DevEco Studio 官网​​

注意：安装时需勾选鸿蒙 SDK 组件，确保后续真机调试环境可用

二、新建项目

1. 创建项目文件夹
   在本地磁盘新建项目根目录（例：​​​E:/HarmonyOS/project/ManagementSystem/​​）
2. HBuilderX 创建项目

• 打开 HBuilderX，点击菜单栏文件→新建→项目
• 选择uni-app x模板（关键！必须选择此模式以支持鸿蒙原生开发）

然后如果要开发鸿蒙应用，一定一定要选择uni-app x，如下图：

• 勾选启用 uniCloud（可选，按需开启云开发功能）
• 选择云服务供应商（支付宝云 / 阿里云 / 腾讯云）
• 点击创建生成项目骨架

创建完毕后就是如下页面

创建完成后，项目目录结构如下：

demo1/
├── pages/          # 页面文件目录
│   └── index/      # 首页文件夹
│       └── index.uvue  # 首页页面文件
├── static/         # 静态资源目录（图片、字体等）
├── App.uvue        # 应用全局入口文件
├── main.uts        # 原生启动入口文件（UTS语法）
├── manifest.json   # 应用配置文件（含平台特有配置）
├── pages.json      # 页面路由配置文件
└── uni.scss        # 全局样式文件

鸿蒙平台特有配置

1. manifest.json 配置要点

• 打开manifest.json→鸿蒙 App 配置

• 包名：需按规范设置（例：​​com.example.harmonyapp​​）
• 调试证书配置：
  点击配置按钮，按提示生成调试证书（需使用 DevEco Studio 生成签名文件）

• 注意事项： 未配置调试证书时，鸿蒙真机调试会提示签名错误；发布正式应用需配置发布证书

三、创建第一个页面

选择pages然后右键选择新建页面，给新页面命名，然后点击创建

就会多出如下文件目录

在pages.json里面的pages属性里面也会多出如下代码：

		{
			"path" : "pages/user/user",
			"style" : 
			{
				"navigationBarTitleText" : ""
			}
		}

其中：

• path是页面路径配置：指定小程序中用户页面的文件路径（基于项目根目录）
• style是页面样式配置：定义该页面的导航栏样式
• navigationBarTitleText是导航栏标题文字：空字符串表示不显示标题

那么我们就新建好了一个页面，并了解了在Uniapp里面新建好页面后会自动生成哪些信息

四、进阶开发建议

1. 学习资源推荐：

• ​​UniApp 官方文档​​
• ​​鸿蒙开发者文档​​
• ​​uni-ui 组件库​​：全端兼容的 UI 组件

##Uniapp##三方框架##商务##