前排放相关链接

UniApp 官网: https://zh.uniapp.dcloud.io/
UniApp 手册: https://zh.uniapp.dcloud.io/tutorial/

uni-app介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）、以及各种小程序（微信/支付宝/百度/抖音/飞书/QQ/快手/钉钉/淘宝/京东/小红书）、快应用、鸿蒙元服务等多个平台。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，你都可以快速交付，不需要转换开发思维、不需要更改开发习惯。

所以说uni-app就是一整套非常完整体系，学会了这一套，就可以快速得进行项目初版本的交付，是一个非常好用的工具。

开发工具 HBuilderX

uni-app有一个非常好用的可视化开发工具：HBuilderX

下载地址：https://www.dcloud.io/hbuilderx.html

我们在官网下载完zip包后，解压，运行exe文件即可运行

创建项目

点开HX后，我们左上角新建一个项目，选择合适的项目位置，什么都不用改，我这里选择的是vue3版本，因为uniapp是基于vue开发的，所以有vue基础是最好的。

alt text

请严格遵循以下规范生成文档：

初始项目结构与入口说明

我们在创建完项目之后，HX就会为我们生成初始模板

uni-app Vue 3 版本典型目录结构如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


my-project/
├── manifest.json          # 应用配置文件（应用名称、appid、版本等）
├── pages.json             # 页面路由与窗口样式配置（核心路由文件）
├── index.html             # Web 端入口 HTML（仅 H5 平台使用）
├── main.js                # 应用主入口文件（初始化 Vue 实例）
├── App.vue                # 应用根组件（全局样式、生命周期）
├── pages/                 # 页面目录（每个页面一个子目录）
│   └── index/             
│       └── index.vue      # 首页（默认页面）
├── static/                # 静态资源目录（图片、字体等，不被编译）
└── uni.scss               # 全局样式文件（可定义变量、通用样式）

关键文件说明

`manifest.json`

配置应用基本信息：名称、图标、启动页、权限、各平台特有配置（如小程序 appid）
多端发布时，不同平台的配置可在此差异化设置（通过条件编译）
这是uniapp特有的，HX对其做了专门的优化，编辑可视化效果极佳

`pages.json`

核心路由文件：定义所有页面路径、窗口样式

示例：

1
2
3
4
5
6


{
  "pages": [{
    "path": "pages/index/index",
    "style": { "navigationBarTitleText": "首页" }
  }]
}

修改此文件可添加新页面、配置 tabBar、设置全局窗口行为

`main.js`

应用启动入口，创建 Vue 应用实例并挂载到 App.vue

通常包含：

1
2
3
4
5
6


import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
  return { app }
}