本书是一本系统介绍热门前端多端框架uni-app的实用教程。全书共分7章，主要分为两个部分。第一部分 基础篇（第1-4章），内容包括初始uni-app、uni-app环境搭建、flex布局、生命周期、扩展组件安装与使用、常用内置组件等知识点，每章都有一个综合案例，展示如何在实际应用场景中应用本章知识点。第二部分 进阶篇（第5-7章），内容包括uni-app的API接口和三个综合案例：智云翻译、音乐播放器、智慧环保。

本书全面贯彻党的二十大精神，以新时代中国特色社会主义思想为引领，注重青年学生社会主义核心价值观的培育，紧跟时代脉络，把握青年学生发展规律和实际特点，开拓创造、守正创新。本书坚持立德树人，自然融入课程思政、二十大精神，培养学生社会责任感、使命感。本书大量的实训案例融入思政元素，旨在让学生在实践的过程中，掌握uni-app前端开发技能的同时，增强环保意识、法律意识、创新意识，增强学生的爱国热情和社会责任感，能够勇担科教兴国使命。

uni-app市面上的书籍较少，本教材注重实践应用，每章都会提供比较完整的案例，最后完整的综合案例。

教学资源丰富，教师易教。

各个实例、案例、实训项目的操作步骤详实，学生易学。

赵丙秀，副教授，现任职于武汉软件工程职业学院信息学院软件技术专业，先后获得 “武汉优秀青年教师”，武汉软件工程职业学院“双师素质”教师、“优秀中青年骨干教师”。 1. 《软件测试技术教程》，主编，8万字，2015年9月，电子工业出版社，ISBN978-7-121-26998-1 2.《VB程序设计》，副主编，8万字，2013年6月，冶金工业出版社，ISBN978-7-5024-6352-6 3.《数据结构》，参编，5万字，2013年7月，冶金工业出版社，ISBN978-7-5024-6356-4 4.《Linux操作系统配置与管理》，参编，2万字，2013年7月，中国水利水电出版社，SBN?978-7-5170-0983-2

第 1章 初识uni-app1

本章导读1

学习目标1

1.1 uni-app发展历程2

1.1.1uni-app的由来2

1.1.2 uni-app的特点3

1.2 第 1个uni-app应用5

1.2.1 uni-app开发工具5

1.2.2 新建项目6

1.2.3 项目目录结构7

1.2.4 运行项目10

1.3 uni-app打包14

1.3.1 打包原生App（云端）14

1.3.2 打包原生App（本地）16

1.3.3 发布为H516

1.3.4 发布为微信小程序17

1.4 案例：示例代码18

本章小结19

项目实战19

拓展实训项目19

第 2章 uni-app基础知识20

本章导读20

学习目标20

2.1pages.json21

2.1.1 globalStyle和pages21

2.1.2 tabBar22

2.1.3 subPackages26

2.2 资源引用26

2.3页面样式28

2.4 尺寸单位28

2.5 基础组件29

2.5.1 view29

2.5.2 text31

2.5.3 navigator32

2.5.4 image34

2.5.5 属性绑定和事件绑定35

2.5.6 v-for渲染数据37

2.6 flex布局38

2.6.1 flex布局的基本概念38

2.6.2 容器属性41

2.6.2 项目属性56

2.7 案例：九宫格导航页面62

本章小结66

项目实战66

拓展实训项目67

第3章 uni-app基础扩展67

本章导读67

学习目标67

3.1 生命周期68

3.1.1 应用生命周期68

3.1.2 页面生命周期69

3.1.3 组件生命周期函数73

3.2 条件编译73

3.3 扩展组件uni-ui76

3.3.1 安装组件76

3.3.2 uni-scss辅助样式80

3.3.3 使用组件84

3.4 案例：新闻列表87

本章小结90

实训项目90

拓展实训项目91

第4章 uni-app组件91

本章导读91

学习目标91

4.1容器组件92

4.1.1scroll-view92

4.1.2 swiper96

4.2基础组件101

4.2.1 rich-text101

4.2.2 progress104

4.3 表单组件106

4.3.1 button106

4.3.3 picker110

4.3.4 slider115

4.3.5 input117

4.3.6 radio和checkbox121

4.3.8 switch125

4.3.9 textarea127

4.3.10 form130

4.4 媒体组件133

4.4.1 camera133

4.4.2 video134

4.5地图138

4.6案例一：典型注册页139

4.7案例二：典型个人中心页143

本章小结147

实训项目147

拓展实训项目147

第5章 常用API148

本章导读148

学习目标148

5.1 API概述149

5.2 计时器150

5.2.1设置计时器150

5.2.2 取消计时器150

5.3 交互反馈153

5.3.1 信息提示框153

5.3.2 loading提示框156

5.3.3 模态框156

5.3.4 操作菜单158

5.4 网络159

5.4 .1 request发起请求159

3. Success属性的回调函数参数说明如表5-8所示。161

5.4.2 上传文件163

5.5 数据缓存166

5.5.1 将数据缓存到本地167

5.5.2 获取本地缓存数据168

5.5.3 清理本地缓存数据170

5.6路由174

5.6.1 路由API174

5.6.2 数据传递177

5.7 案例：智云翻译178

本章小结193

项目实战193

拓展实训项目194

第6章 常用API-2194

本章导读194

学习目标194

6.1 媒体控制195

6.1.1 音频组件控制195

6.1.2 录音管理203

6.1.3 图片209

6.1.4 视频组件控制212

6.1.5 相机组件控制216

6.2 文件操作218

6.2.1 文件保存218

6.2.2 文件选择219

6.3 设备219

6.3.1 得到系统信息219

6.3.2 扫码220

6.3.3 拨打电话223

6.3.4剪贴板223

6.4 登录224

6.5 案例：仿网易云播放器226

本章小结244

项目实战244

拓展实训项目245

第7章 智慧环保246

本章导读246

学习目标246

7.1 项目介绍247

7.1.1项目概述247

7.1.2 项目演示效果247

7.2 环境配置252

7.2.1 安装json-server252

7.2.2 配置json-server254

7.3 项目开发256

7.3.1 创建初始项目256

7.3.2 首页260

7.3.3 回收分类、分类搜索266

7.3.4 注册、登录、个人中心274

7.3.5 公司回收、公司详情、搜索结果285

7.3.6 下单、订单页、订单详情293

本章小结310

项目实战310

拓展实训项目311