1. UniApp简介
1.1 什么是UniApp
UniApp是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
1.2 UniApp的优势
一套代码，多端运行：真正实现了跨平台开发
性能优异：App端支持原生渲染，小程序端支持分包和预加载
生态丰富：拥有丰富的插件市场和组件库
学习成本低：基于Vue.js语法，前端开发者容易上手
官方支持：DCloud官方维护，更新及时
1.3 UniApp架构
逻辑层：运行在JavaScript引擎中，负责业务逻辑处理
视图层：由WebView渲染，负责界面展示
原生层：提供设备能力访问，如相机、GPS等
2. 开发环境搭建
2.1 开发工具选择
HBuilderX（推荐）
UniApp官方IDE
内置UniApp项目模板
集成调试、预览、发布功能
支持语法提示和代码补全
VS Code
需要安装UniApp插件
配置相对复杂
适合有VS Code使用习惯的开发者
2.2 HBuilderX安装
下载HBuilderX
- 访问官网：https://www.dcloud.io/hbuilderx.html
- 选择正式版下载
- 推荐下载App开发版
安装步骤 “`bash
Windows
直接运行下载的exe文件
macOS
解压dmg文件，拖拽到Applications文件夹
Linux
解压tar.gz文件到指定目录
”`
首次启动配置
选择工作空间
登录DCloud账号（可选）
安装必要插件
2.3 Node.js环境
“`bash
检查Node.js版本
node –version npm –version
推荐使用Node.js 14.x或更高版本
如果没有安装，请访问 https://nodejs.org/ 下载安装
”`
2.4 移动端调试环境
Android开发环境
安装Android Studio
- 下载地址：https://developer.android.com/studio
- 安装Android SDK
- 配置环境变量
配置模拟器 “`bash
创建AVD（Android Virtual Device）
在Android Studio中打开AVD Manager
创建新的虚拟设备
”`
iOS开发环境（仅macOS）
安装Xcode
- 从App Store下载安装
- 安装Command Line Tools
配置iOS模拟器 “`bash
启动iOS模拟器
open -a Simulator “`
2.5 微信开发者工具
下载安装
配置
登录微信开发者账号
开启服务端口（用于HBuilderX调试）
3. 创建第一个UniApp项目
3.1 使用HBuilderX创建项目
新建项目
- 文件 → 新建 → 项目
- 选择uni-app项目
- 选择模板（推荐默认模板）
- 输入项目名称和存储位置
项目结构
my-uniapp-project/ ├── pages/ # 页面文件 │ ├── index/ │ └── logs/ ├── static/ # 静态资源 ├── components/ # 组件 ├── common/ # 公共文件 ├── App.vue # 应用配置 ├── main.js # 入口文件 ├── manifest.json # 应用配置 ├── pages.json # 页面配置 └── uni.scss # 全局样式3.2 使用CLI创建项目
“`bash
安装vue-cli
npm install -g @vue/cli
创建项目
vue create -p dcloudio/uni-preset-vue my-project
进入项目目录
cd my-project
安装依赖
npm install
运行项目
npm run dev:mp-weixin # 微信小程序 npm run dev:h5 # H5 npm run dev:app-plus # App “`
4. 项目运行与调试
4.1 运行到不同平台
运行到微信小程序
在HBuilderX中点击”运行” → “运行到小程序模拟器” → “微信开发者工具”
首次运行会自动打开微信开发者工具
在微信开发者工具中预览效果
运行到H5
点击”运行” → “运行到浏览器” → “Chrome”
自动打开浏览器预览
支持热重载
运行到App
连接真机或启动模拟器
点击”运行” → “运行到手机或模拟器”
选择设备进行安装调试
4.2 调试技巧
控制台调试
javascript // 在代码中添加调试信息 console.log('调试信息', data); // 使用uni.showToast显示信息 uni.showToast({ title: '调试信息', icon: 'none' });真机调试
启用USB调试模式
使用HBuilderX的真机运行功能
通过Chrome DevTools进行调试
5. 常见问题解决
5.1 环境问题
问题：HBuilderX无法识别设备 “`bash
解决方案
检查USB调试是否开启
安装设备驱动程序
重启HBuilderX和设备
**问题：微信开发者工具无法打开**bash解决方案
检查微信开发者工具是否正确安装
在HBuilderX中配置微信开发者工具路径
确保微信开发者工具开启了服务端口 “`
5.2 编译问题
问题：编译失败 “`bash
常见解决方案
清理项目缓存
重新安装依赖
检查代码语法错误
更新HBuilderX版本 “`
6. 开发规范建议
6.1 目录结构规范
project/ ├── api/ # API接口 ├── components/ # 公共组件 ├── pages/ # 页面 ├── static/ # 静态资源 ├── store/ # 状态管理 ├── utils/ # 工具函数 └── config/ # 配置文件6.2 命名规范
文件名：使用kebab-case
组件名：使用PascalCase
变量名：使用camelCase
常量名：使用UPPER_CASE
6.3 代码规范
使用ESLint进行代码检查
统一使用分号结尾
合理使用注释
保持代码简洁易读
7. 总结
本章介绍了UniApp的基本概念、开发环境搭建和项目创建流程。通过学习本章内容，你应该能够：
- 理解UniApp的核心概念和优势
- 成功搭建UniApp开发环境
- 创建并运行第一个UniApp项目
- 掌握基本的调试方法
- 了解开发规范和最佳实践 下一章我们将深入学习UniApp的项目结构和基础配置。
