Web前端应用开发项目式教程（基于uni-app框架） 高秀艳 陈辉 马翔

uni-app是DCloud团队推出的一款使用Vue.js开发前端应用的开源框架，该框架最为突出的特点是“开发一次，多端覆盖”，即开发者编写一套代码，可发布到iOS、Android、Web（响应式），以及各种小程序（微信、支付宝、百度、头条、飞书、QQ、快手、钉钉、淘宝）、快应用等多种平台。使用uni-app框架可以很大程度地降低开发者跨平台开发的学习成本和开发成本。uni-app官方文档中介绍到，“即使不跨端，uni-app也是更好的小程序开发框架、更好的App跨平台框架、更方便的H5开发框架。”现在，uni-app已经是业内风靡的应用框架，支撑着数以亿计的活跃手机用户的庞大生态。
“启嘉校园”是一款集校园社交和二手交易于一体的小程序项目，由河北软件职业技术学院软件工程系的师生共同研发，目前已在河北软件职业技术学院上线运行。“启嘉校园”项目的应用场景与学生的校园生活紧密贴合，作为贯穿全书的项目案例，可以帮助读者更好地理解学习内容。
本书是一本以项目为导向、任务为驱动的理实一体化教材，以实际工作中的项目开发流程（“项目开发准备”“项目实施”“项目测试”和“项目部署与发布”），将“启嘉校园”项目的功能模块拆分成11个任务，每个任务中通过“任务描述”和“学习目标”明确学习内容和重、难点，通过“知识储备”讲解任务所需的理论知识，通过“任务实施”面向实际开发过程，分多个子任务和步骤介绍任务的实施过程，通过“任务测试”和“学习自评”检验任务实施效果和学习成果，通过“课后练习”巩固所学知识和技能，通过“任务拓展”拓展知识、强化实操练习。此外，本书还穿插名师解惑、逻辑分析、设计图分析等环节，帮助读者深入理解学习内容。
本书特点
（1）教材融入思政，提升思想品德素养。
本书将“实施科教兴国战略，强化现代化建设人才支撑”作为指导思想，坚持科技是第一生产力、人才是第一资源、创新是第一动力。同时探索将党的二十大精神和教材中的项目、知识、技术等内容有机融合，比如在任务实施过程中强调技术创新、科技创新和加强安全意识等。
（2）面向初学者，还原真实项目开发流程。
真实项目的开发全流程贯穿全书，不仅为读者提供了完整的项目开发资源，包括需求文档、设计图、项目源代码、API等，而且从需求分析到开发、测试，再到部署上线，覆盖了项目开发过程中的每一个环节。此外，本书还对开发规范和性能优化有详细的讲解，这对读者提升技术能力和开发经验有很大的帮助。
（3）名师解惑，优化重、难点知识讲解。
本书在代码讲解环节，针对重、难点知识和技术添加了工作经验丰富的高校教师与一线企业工程师的讲解，将晦涩难懂的知识通过通俗易懂的方式进行讲解，能够有效地帮助读者学习和理解所学内容。
（4）配套资源丰富，线上线下结合。
本书配套“启嘉书盘”（https://book.change.tm/）教材支撑平台，提供了丰富的数字化教材资源，如微课视频、教案、教学设计、作业、题库等，使读者可以更加立体、多样地阅读和学习，从而提高学习效果。
读本书之前需要掌握的知识
本书面向uni-app初学者，书中会尽量介绍那些必要的基础知识，但仍然希望读者在学习本书之前掌握如下知识。
? 掌握HTML5（H5）、CSS3和JavaScript（ECMAScript 6），能够完成静态页面开发。
? 掌握Vue.js的基本用法，如语法、条件/列表渲染、事件处理、组件等。
? 了解微信小程序开发流程，能够通过查阅微信开放平台学习小程序开发技术。
读者反馈
尽管我们对本书内容进行了多次检查，但书中仍然难免会出现一些不足之处，欢迎各界专业人士和读者提出宝贵意见，我们将不胜感激。您在阅读本书时，如果发现任何问题或有不认同之处，可以通过电子邮件与我们取得联系。电子邮箱：fanyuekun@ hbsi.edu.cn。
编 者

《Web前端应用开发项目式教程（基于uni-app框架）》是一本基于uni-app框架的全流程开发项目化实战教材，以真实项目“启嘉校园”贯穿全书，按项目开发流程拆分成11个任务，每个任务中通过“任务描述”和“学习目标”帮助学习者明确学习内容与重、难点，通过“知识储备”讲解完成任务所需的理论知识，通过“任务实施”面向实际开发过程，分多个子任务和步骤讲解任务的实施过程，通过“任务测试”和“学习自评”检验任务实施效果和学习成果，通过”课后练习”巩固所学知识和技能，通过”任务拓展“拓展知识、强化实操练习。此外，本书还穿插名师解惑、逻辑分析、设计图分析等教学环节，能够帮助学习者深入理解学习内容。
《Web前端应用开发项目式教程（基于uni-app框架）》可作为高职高专院校计算机相关专业的教材，也可作为对uni-app框架技术感兴趣人员的参考用书。

高秀艳，副教授职称，工学硕士学位，现任河北软件职业技术学院软件工程系副主任，兼任软件技术专业群带头人。2020年获“河北省优秀教师”荣誉称号。现为河北省教学能力大赛专家库成员，河北省首批职业教育创新型教师教学团队成员、河北省首批黄大年式教学团队核心成员、国家职业教育教师教学创新团队成员。

前言
任务1 项目开发准备
1.1 任务描述
1.2 任务效果
1.3 学习目标
1.4 知识储备
1.4.1　产品需求文档
1.4.2　页面设计图
1.4.3　字体图标
1.4.4　接口文档
1.4.5　项目源码
1.5 任务实施
1.5.1　搭建前端开发环境
1.5.2　搭建后端开发环境
1.5.3　创建项目开发目录
1.6 任务测试
1.7 学习自评
1.8 课后练习
1.9 任务拓展 
任务2 制作个人中心页
2.1 任务描述
2.2 任务效果
2.3 学习目标
2.4 知识储备
2.4.1　可滚动视图容器组件scroll-view
2.4.2　触摸事件touch
2.4.3　页面生命周期
2.4.4　导航栏
2.4.5　底部tabBar
2.5 任务实施
2.5.1　页面结构分析与搭建
2.5.2　制作头部区域
2.5.3　制作自定义导航栏
2.5.4　制作圆弧及功能列表区域
2.5.5　制作底部标签栏区域
2.5.6　制作“联系我们”模态框
2.6 任务测试
2.7 学习自评
2.8 课后练习
2.9 任务拓展 
任务3 制作个人资料页
3.1 任务描述
3.2 任务效果
3.3 学习目标
3.4 知识储备
3.4.1　picker组件
3.4.2　input组件
3.4.3　image组件
3.4.4　uni-app常用提示框
3.4.5　页面跳转
3.5 任务实施
3.5.1　页面结构分析与搭建
3.5.2　制作用户基本资料区域
3.5.3　制作用户扩展资料区域
3.6 任务测试
3.7 学习自评
3.8 课后练习
3.9 任务拓展 
任务4 制作社区首页
4.1 任务描述
4.2 任务效果
4.3 学习目标
4.4 知识储备
4.4.1　uni-app的组件化开发
4.4.2　uni-easyinput组件
4.4.3　uni-app页面转发
4.4.4　uni-app图片处理
4.4.5　movable-area组件
4.5 任务实施
4.5.1　页面结构分析与搭建
4.5.2　制作搜索区域
4.5.3　制作选项卡区域
4.5.4　制作文章列表区域
4.5.5　制作悬浮按钮
4.6 任务测试
4.7 学习自评
4.8 课后练习
4.9 任务拓展 
任务5 制作文章发布页
5.1 任务描述
5.2 任务效果
5.3 学习目标
5.4 知识储备
5.4.1　元素遮罩层
5.4.2　正则表达式
5.5 任务实施
5.5.1　页面结构分析与搭建
5.5.2　制作导航栏区域
5.5.3　制作文字信息区域
5.5.4　制作图片上传区域
5.5.5　制作选择话题区域
5.5.6　制作文章发布按钮区域
5.6 任务测试
5.7 学习自评
5.8 课后练习
5.9 任务拓展 
任务6 制作文章详情页
6.1 任务描述
6.2 任务效果
6.3 学习目标
6.4　知识储备
6.4.1　组件复用与拓展
6.4.2　uni-app跨端兼容
6.4.3　DOM更新回调
6.5　任务实施
6.5.1　页面结构分析与搭建
6.5.2　制作文章详情区域
6.5.3　制作评论区域
6.6　任务测试
6.7　学习自评
6.8　课后练习
6.9　任务拓展 
任务7 实现登录功能
7.1 任务描述
7.2　任务效果
7.3　学习目标
7.4　知识储备
7.4.1　HTTP请求
7.4.2　uni-app发送网络请求
7.4.3　应用生命周期函数
7.4.4　获取当前应用实例方法getApp
7.4.5　globalData全局变量机制
7.5　任务实施
7.5.1　微信授权登录
7.5.2　获取用户个人数据
7.5.3　维护用户登录状态
7.6　任务测试
7.7　学习自评
7.8　课后练习
7.9　任务拓展 
任务8 实现文章发布与文章列表分页功能
8.1 任务描述
8.2　任务效果
8.3　学习目标
8.4　知识储备
8.4.1　常见的分页方式
8.4.2　利用uni.uploadFile方法进行文件上传
8.4.3　uni-app页面间通信
8.5　任务实施
8.5.1　发布社区文章
8.5.2　获取文章列表
8.6　任务测试
8.7　学习自评
8.8　课后练习
8.9　任务拓展 
任务9 实现文章详情页相关功能
9.1 任务描述
9.2　任务效果
9.3　学习目标
9.4　知识储备
9.4.1　评论区互动形式
9.4.2　多向评论区展示结构
9.5　任务实施
9.5.1　获取文章详情
9.5.2　实现文章点赞、转发与关注作者功能
9.5.3　实现文章评论功能
9.6　任务测试
9.7　学习自评
9.8　课后练习
9.9　任务拓展 
任务10 项目测试
10.1 任务描述
10.2　任务效果
10.3　学习目标
10.4　知识储备
10.4.1　什么是测试
10.4.2　软件测试发展史
10.4.3　软件测试的作用
10.4.4　软件测试的重要性
10.4.5　软件测试的类型
10.4.6　软件测试最佳实践
10.4.7　软件测试常用工具
10.5　任务实施
10.5.1　划分功能模块
10.5.2　设计并编写测试用例
10.6　任务测试
10.7　学习自评
10.8　课后练习
10.9　任务拓展 
任务11 项目部署与发布
11.1 任务描述
11.2　任务效果
11.3　学习目标
11.4　知识储备—uni-app项目发布
11.5　任务实施
11.5.1　发布到H5端
11.5.2　发布到微信小程序
11.6　任务测试
11.7　学习自评
11.8　课后练习
11.9　任务拓展 
参考文献

《Web前端应用开发项目式教程（基于uni-app框架）》是一本基于uni-app框架的全流程开发项目化实战教材，以真实项目“启嘉校园”贯穿全书，按项目开发流程拆分成11个任务，每个任务中通过“任务描述”和“学习目标”帮助学习者明确学习内容与重、难点，通过“知识储备”讲解完成任务所需的理论知识，通过“任务实施”面向实际开发过程，分多个子任务和步骤讲解任务的实施过程，通过“任务测试”和“学习自评”检验任务实施效果和学习成果，通过”课后练习”巩固所学知识和技能，通过”任务拓展“拓展知识、强化实操练习。此外，本书还穿插名师解惑、逻辑分析、设计图分析等教学环节，能够帮助学习者深入理解学习内容。
《Web前端应用开发项目式教程（基于uni-app框架）》可作为高职高专院校计算机相关专业的教材，也可作为对uni-app框架技术感兴趣人员的参考用书。

高秀艳，副教授职称，工学硕士学位，现任河北软件职业技术学院软件工程系副主任，兼任软件技术专业群带头人。2020年获“河北省优秀教师”荣誉称号。现为河北省教学能力大赛专家库成员，河北省首批职业教育创新型教师教学团队成员、河北省首批黄大年式教学团队核心成员、国家职业教育教师教学创新团队成员。