本书为高等院校计算机相关专业的教材，以培养跨平台移动混合开发高素质技术技能人才为目标，遵循"认知引领—实践进阶—创新应用”的递进式学习规律，系统构建了基于 uni-app 框架的跨平台移动应用开发知识体系。本书共设10个项目，将企业真实项目"移动商城”贯穿始终，实现理论与实践深度融合，助力读者全面掌握从跨平台移动混合开发环境搭建到应用打包上线的完整流程。项目1作为入门导引，通过分析社交、电商、医疗等领域的典型应用场景，帮助读者理解跨平台移动混合开发的核心优势与适用边界，深度解析原生开发、混合开发与跨平台移动混合开发框架的技术差异，重点讲解 uni-app 基于 Vue.js"一次编码、多端运行”的实现原理，为后续学习奠定坚实基础。项目2至项目8以校企合作案例"移动商城”为载体，按照企业级应用开发流程循序渐进展开。项目2引导读者搭建 HBuilderX 开发环境并创建商城项目；项目3至项目5聚焦首页静态布局、动态数据渲染及页面跳转实现，涵盖 Flex 布局、Vue 指令、组件应用、下拉刷新等核心技术；项目6至项目8深入用户登录注册、个人中心呈现及商品动态页交互，涉及表单验证、数据缓存、网络请求、页面通信、生命周期函数等关键知识模块。通过完整的商城项目开发，读者将熟练运用 uni-app 跨平台移动混合开发框架进行企业级应用开发。项目9和项目10引入"健康养护”移动应用全流程开发实战，从需求分析、原型设计到编码实现、测试打包，完整模拟跨平台移动开发前端工程师的工作岗位流程，培养读者独立分析问题、解决实际开发任务的能力，实现从技能学习到岗位胜任的跃升。

许莉丽，浙江经贸职业技术学院商务智能学院（原信息技术学院）副院长。2019年主持获得浙江省高职院校教师教学能力比赛团体三等奖；2020年主持获得浙江经贸职业技术学院校级教学成果二等奖；主持省厅级课题多项；发表论文20余篇，其中SCI和EI论文各 1 篇；参与大赛经验丰富，第一指导学生获全国高职院校移动应用开发相关赛项国赛二等 2 次国赛三等奖1次、省赛一等 2 次，第一指导学生获得浙江省国际互联网+大学生创新创业比赛团体三等奖2次，第一指导学生获得浙江省大学生电子商务大赛技术类赛道团体二等奖2次。

模块一 入门级基础认知
项目 1 跨平台移动混合开发认知 ·····································································.1
任务 1 跨平台移动应用场景初识 ································································.2
1.1.1 任务效果 ···················································································.2
1.1.2 任务知识 ···················································································.5
任务 2 跨平台移动混合开发技术了解 ··························································.7
1.2.1 任务效果 ···················································································.7
1.2.2 任务知识 ···················································································.7
活页笔记 ·································································································.9
自我评价 ·······························································································.10
项目 2 启动“移动商城”跨平台混合开发项目 ··················································.11
任务 1 uni-app 跨平台移动混合开发环境搭建 ··············································.12
2.1.1 任务效果 ·················································································.12
2.1.2 任务知识 ·················································································.12
2.1.3 任务实施 ·················································································.14
任务 2 创建“移动商城”uni-app 项目并构建核心模块页面 ·····························.17
2.2.1 任务效果 ·················································································.17
2.2.2 任务知识 ·················································································.17
2.2.3 任务实施 ·················································································.18
活页笔记 ·······························································································.21
自我评价 ·······························································································.22
拓展自主实操 ·························································································.22
模块二 技能级实践提升
项目 3 “移动商城”首页静态布局 ·································································.23
任务 1 首页搜索与轮播广告静态布局 ························································.24
3.1.1 任务效果 ·················································································.24
3.1.2 任务知识 ·················································································.25
3.1.3 任务实施 ·················································································.38
任务 2 首页热销商品静态布局 ·································································.41
3.2.1 任务效果 ·················································································.41
3.2.2 任务知识 ·················································································.41
3.2.3 任务实施 ·················································································.46
任务 3 首页商品列表静态布局 ·································································.48
3.3.1 任务效果 ·················································································.48
3.3.2 任务知识 ·················································································.48
3.3.3 任务实施 ·················································································.54
活页笔记 ·······························································································.57
自我评价 ·······························································································.58
拓展自主实操 ·························································································.59
项目 4 “移动商城”首页动态实现 ·································································.60
任务 1 首页样式动态切换 ·······································································.61
4.1.1 任务效果 ·················································································.61
4.1.2 任务知识 ·················································································.62
4.1.3 任务实施 ·················································································.63
任务 2 首页标签数据动态绑定 ·································································.66
4.2.1 任务效果 ·················································································.66
4.2.2 任务知识 ·················································································.66
4.2.3 任务实施 ·················································································.68
任务 3 Flex 容器弹性布局 ·······································································.70
4.3.1 任务效果 ·················································································.70
4.3.2 任务知识 ·················································································.70
4.3.3 任务实施 ·················································································.73
活页笔记 ·······························································································.74
自我评价 ·······························································································.75
拓展自主实操 ·························································································.76
项目 5 “移动商城”首页跳转 ·······································································.77
任务 1 首页轮播图跳转 ··········································································.78
5.1.1 任务效果 ·················································································.78
5.1.2 任务知识 ·················································································.78
5.1.3 任务实施 ·················································································.86
任务 2 首页商品下拉刷新 ·······································································.87
5.2.1 任务效果 ·················································································.87
5.2.2 任务知识 ·················································································.88
5.2.3 任务实施 ·················································································.91
任务 3 首页导航跳转 ·············································································.92
5.3.1 任务效果 ·················································································.92
5.3.2 任务知识 ·················································································.92
5.3.3 任务实施 ·················································································.97
活页笔记 ·······························································································.99
自我评价 ······························································································.100
拓展自主实操 ························································································.100
项目 6 “移动商城”用户登录注册实现 ·························································.101
任务 1 用户登录功能实现 ······································································.102
6.1.1 任务效果 ················································································.102
6.1.2 任务知识 ················································································.102
6.1.3 任务实施 ················································································.114
任务 2 用户注册功能实现 ······································································.118
6.2.1 任务效果 ················································································.118
6.2.2 任务知识 ················································································.118
6.2.3 任务实施 ················································································.125
任务 3 用户保存账号密码实现 ································································.128
6.3.1 任务效果 ················································································.128
6.3.2 任务知识 ················································································.128
6.3.3 任务实施 ················································································.131
活页笔记 ······························································································.133
自我评价 ······························································································.134
拓展自主实操 ························································································.134
项目 7 “移动商城”个人中心呈现 ·······························································.135
任务 1 “个人中心”页面设置 ································································.136
7.1.1 任务效果 ················································································.136
7.1.2 任务知识 ················································································.136
7.1.3 任务实施 ················································································.141
任务 2 个人中心数据渲染 ······································································.144
7.2.1 任务效果 ················································································.144
7.2.2 任务知识 ················································································.144
7.2.3 任务实施 ················································································.150
任务 3 个人中心“修改密码”功能实现 ····················································.151
7.3.1 任务效果 ················································································.151
7.3.2 任务知识 ················································································.151
7.3.3 任务实施 ················································································.155
任务 4 个人中心“意见反馈”功能实现 ····················································.157
7.4.1 任务效果 ················································································.157
7.4.2 任务知识 ················································································.157
7.4.3 任务实施 ················································································.161
活页笔记 ······························································································.163
自我评价 ······························································································.164
拓展自主实操 ························································································.164
项目 8 “移动商城”商品动态页交互 ····························································.165
任务 1 商品动态页设计 ·········································································.166
8.1.1 任务效果 ················································································.166
8.1.2 任务知识 ················································································.166
8.1.3 任务实施 ················································································.168
任务 2 商品动态页数据交互 ···································································.173
8.2.1 任务效果 ················································································.173
8.2.2 任务知识 ················································································.173
8.2.3 任务实施 ················································································.176
任务 3 商品动态页刷新 ·········································································.178
8.3.1 任务效果 ················································································.178
8.3.2 任务知识 ················································································.178
8.3.3 任务实施 ················································································.181
活页笔记 ······························································································.182
自我评价 ······························································································.183
拓展自主实操 ························································································.184
模块三 企业级应用进阶
项目 9 “健康养护”移动应用项目设计 ·························································.185
任务 1 需求文档设计 ············································································.186
9.1.1 需求分析概述 ··········································································.186
9.1.2 需求分析设计 ··········································································.187
9.1.3 产品定义 ················································································.188
9.1.4 应用环境 ················································································.188
9.1.5 功能规格 ················································································.189
9.1.6 性能需求 ················································································.190
任务 2 项目原型设计 ············································································.191
9.2.1 任务目标 ················································································.191
9.2.2 任务实施 ················································································.191
任务 3 页面数据 Mock 设计 ····································································.193
9.3.1 任务目标 ················································································.193
9.3.2 任务实施 ················································································.193
活页笔记 ······························································································.194
自我评价 ······························································································.195
项目 10 “健康养护”移动应用项目开发 ·······················································.196
任务 1 UI 界面开发 ··············································································.197
10.1.1 任务目标 ···············································································.197
10.1.2 任务实施 ···············································································.197
任务 2 接口设计 ··················································································.202
10.2.1 任务目标 ···············································································.202
10.2.2 任务实施 ···············································································.202
任务 3 接口开发 ··················································································.206
10.3.1 任务目标 ···············································································.206
10.3.2 任务实施 ···············································································.207
任务 4 测试用例 ··················································································.211
10.4.1 任务目标 ···············································································.211
10.4.2 任务实施 ···············································································.212
任务 5 测试应用 ··················································································.212
10.5.1 任务目标 ···············································································.212
10.5.2 任务实施 ···············································································.213
任务 6 打包部署 ··················································································.214
10.6.1 任务目标 ···············································································.214
10.6.2 任务实施 ···············································································.214 活
页笔记 ······························································································.217
自我评价 ······························································································.218