微信小程序开发项目实战（微课版）

◆ 项目驱动，真实案例，一案到底。

◆ 以用为本，学以致用，用而学之。

◆ 思政融合，资源丰富，代码详尽。

前 言

为贯彻落实党的二十大精神和党中央、国务院有关决策部署，按照《关于深化现代职业教育体系建设改革的意见》《国家职业教育改革实施方案》（国发〔2019〕4号）有关要求，坚持以教促产、以产助教，不断延伸教育链、服务产业链、支撑供应链、打造人才链、提升价值链，加快形成产教良性互动、校企优势互补的产教深度融合发展格局，持续优化人力资源供给结构，为全面建设社会主义现代化国家提供强大人力资源支撑，国家发展和改革委员会同有关部门研究制定的《职业教育产教融合赋能提升行动实施方案（2023—2025年）》指出“夯实职业院校发展基础”，为职业院校的教材开发指引了方向。

教材建设是高职院校教育教学工作的重要组成部分，高质量的教材是培养高质量人才的基本保证，高职教材作为体现高职教育特色的知识载体和教学的基本工具，直接关系到高职教育能否为一线岗位培养符合要求的高技术型、高应用型人才。但是长期以来，高职院校所使用的教材大多为传统模式的教材，本书是编者对高职教材的一次探索，以符合高职教育规律的、基于工作过程的角度进行编写。

本书以一个实际的商城小程序项目为中心，全面介绍了应用小程序基础知识和开发流程所涉及的各种操作，包括常用组件、新闻模块、商品模块和数据接口等内容。

本书具有以下特色：

（1）项目驱动。本书分为10个项目，每个项目包含若干个任务，每个任务通过多个案例来讲解。本书从小程序开发实际应用需求出发，从软件开发的角度组织知识内容，将知识点融入实际项目开发，注重解决具体应用问题的方法和实现技术。

（2）一案到底。本书以商城小程序项目为中心来组织内容，采用“一案到底”的组织方式使零散的知识具有连贯性，使学生对小程序开发流程的认识更加完整，同时加强案例与实际生活的联系，使案例具有实用性和趣味性。

（3）技能实用。本书选取内容遵循实用原则和“80/20”原则，实用原则指的是所选技术是能够解决工作中实际问题的技术，“80/20”原则是指企业80%的时间在使用20%的核心技术。因此，本书摒弃了大量非核心的理论知识及技术，而专注于常用的核心技术讲解及训练。“以用为本、学以致用、不用不学、学了就会”是本书内容选择的标准。

（4）“教、学、做”一体化。每一个任务均是先提出任务目标，再由案例演示完成任务过程，最后由学生模仿完成类似的任务。本书在“教、学、做”过程中，通过三重循环使学生掌握知识点，第一重为认识和模仿，第二重为熟练和深化，第三重为创新和提高。

为了方便教学和读者使用，本书配备了丰富的二维码资源和超星课程（https://www. xueyinonline.com/detail/249131016），帮助读者全面掌握微信小程序开发相关技能。

本书由广东科贸职业学院黄龙泉老师组织编写，由黄龙泉、郭峰（包头轻工职业技术学院）、朱倩（河源市职业技术学校）任主编，由杨玉凤（山东中医药大学）、李瑞国（山东中医药大学）、廖远来（河源职业技术学院）任副主编，广州国为信息科技有限公司黎晓锋、广州铂睿信息技术有限公司彭丹总监也参与了本书的编写工作。在本书编写过程中，我们得到了中国水利水电出版社和同行的大力支持和帮助，在此一并表示感谢。

由于编者水平有限，书中不足之处在所难免，恳请读者批评指正。

编 者

2024年10月

前言

项目1 初识微信小程序 1
任务1.1 注册小程序 2
1.1.1 注册小程序账号 2
1.1.2 查看小程序ID 6
任务1.2 认识小程序开发者工具 7
1.2.1 安装微信开发者工具 7
1.2.2 体验微信小程序 9
1.2.3 开发者工具的介绍 11
任务1.3 小程序目录结构 15
1.3.1 小程序与普通网页开发的区别 15
1.3.2 项目配置文件 16
1.3.3 主体文件 18
1.3.4 页面文件 20
1.3.5 其他文件 21
项目小结 23
学习评价 23
项目实训 24
项目2 小程序编程基础 26
任务2.1 小程序的执行顺序 27
2.1.1 小程序注册函数App() 28
2.1.2 页面注册函数Page() 29
任务2.2 构建页面数据 31
2.2.1 页面数据 31
2.2.2 数据绑定 33
任务2.3 列表渲染 35
2.3.1 wx:for和wx:key的使用 35
2.3.2 block wx:for的使用 37
任务2.4 条件渲染 39
2.4.1 wx:if的使用 39
2.4.2 block wx:if的使用 39
2.4.3 hidden的使用 40
任务2.5 事件绑定 40
2.5.1 事件的使用方式 41
2.5.2 事件的分类 42
2.5.3 事件的捕获阶段 44
2.5.4 绑定事件示例 45
项目小结 48
学习评价 48
项目实训 48
项目3 小程序常用组件 52
任务3.1 Flex弹性盒模型布局 53
3.1.1 Flex布局相关属性 54
3.1.2 Flex布局案例 57
3.1.3 Flex项目布局属性 59
任务3.2 “天天打卡”布局设计 60
3.2.1 案例展示 60
3.2.2 案例初始化 61
3.2.3 页面基本结构 62
任务3.3 “天天打卡”功能实现 63
3.3.1 获得个人信息—开放数据 63
3.3.2 打卡名称—输入框组件 64
3.3.3 打卡地点—地理位置API 65
3.3.4 打卡时间—picker组件 67
3.3.5 重复日期—条件运算符 70
任务3.4 “天天打卡”数据处理 71
3.4.1 消息提示框API 71
3.4.2 数据保存—写入缓存 73
3.4.3 打卡标签—读取缓存 74
项目小结 76
学习评价 76
项目实训 76
项目4 商城首页模块开发 78
任务4.1 商城项目需求分析 79
4.1.1 首页功能需求 80
4.1.2 新闻页功能需求 80
4.1.3 产品页功能需求 80
4.1.4 购物车页功能需求 80
4.1.5 个人中心页功能需求 81
任务4.2 商城项目创建 81
4.2.1 新建小程序项目 82
4.2.2 新建页面文件 82
4.2.3 导航栏设计 83
任务4.3 商城首页视图的设计 84
4.3.1 tabBar组件的设计 84
4.3.2 swiper组件的设计 86
4.3.3 navigator组件的设计 88
4.3.4 scroll-view组件的设计 90
4.3.5 公共样式的设计 93
任务4.4 商城首页动画的实现 94
4.4.1 Animation动画实例 94
4.4.2 关键帧动画 95
4.4.3 实现商品动画效果 97
项目小结 99
学习评价 100
项目实训 100
项目5 新闻页面模块开发 102
任务5.1 新闻页面视图层的设计 103
5.1.1 项目展示 103
5.1.2 新闻列表页面的设计 104
5.1.3 新闻列表样式的设计 105
任务5.2 新闻列表页面的实现 106
5.2.1 静态数据的定义 106
5.2.2 新闻列表页面数据绑定 108
5.2.3 筛选功能的设计 109
5.2.4 下拉刷新示例 113
5.2.5 上拉触底示例 114
5.2.6 页面跳转API 115
任务5.3 新闻详情页面的实现 115
5.3.1 新闻详情页面的设计 116
5.3.2 获取对应的详情数据 117
5.3.3 收藏功能的实现 118
5.3.4 转发分享功能的实现 120
5.3.5 背景音乐的实现 123
项目小结 125
学习评价 125
项目实训 126
项目6 商品页面模块开发 128
任务6.1 商品分类视图层的设计 129
6.1.1 项目展示 129
6.1.2 定义静态数据 131
6.1.3 商品分类区域 132
6.1.4 商品分类展示区域 134
6.1.5 商品分类列表滚动 136
任务6.2 商品列表页面的设计 137
6.2.1 商品列表页的布局 138
6.2.2 商品列表页的样式 138
6.2.3 自定义组件的创建 140
6.2.4 自定义组件的使用 143
任务6.3 商品详情页面的设计 143
6.3.1 商品详情页轮播图 143
6.3.2 商品详情页标题信息 146
6.3.3 使用iconfont图标库 147
6.3.4 picker组件的使用 149
6.3.5 商品详情页长图的实现 151
6.3.6 商品详情页底部的实现 151
项目小结 154
学习评价 154
项目实训 154
项目7 购物车模块开发 156
任务7.1 定义购物车基础数据 157
7.1.1 项目展示 157
7.1.2 定义静态数据 157
7.1.3 购物车视图页面 158
任务7.2 购物车页面详情 159
7.2.1 购物车商品列表 159
7.2.2 购物车商品数量 161
7.2.3 购物车底部信息 163
7.2.4 购物车为空状态 165
任务7.3 购物车结算金额 166
7.3.1 单选商品金额计算 166
7.3.2 全选商品金额计算 167
项目小结 168
学习评价 168
项目实训 169
项目8 用户信息模块开发 171
任务8.1 用户信息页面 172
8.1.1 项目展示 172
8.1.2 用户登录流程 173
8.1.3 实现用户授权登录 175
8.1.4 退出登录 177
任务8.2 模板的使用 177
8.2.1 模板语法 177
8.2.2 创建模板 179
8.2.3 使用模板 180
任务8.3 ECharts在小程序中的运用 181
8.3.1 配置ECharts 181
8.3.2 柱状图的使用 182
8.3.3 饼图的使用 184
8.3.4 折线图的使用 186
项目小结 187
学习评价 187
项目实训 188
项目9 接口的设计与开发 190
任务9.1 Node.js 191
9.1.1 Node.js基础 191
9.1.2 Node.js安装配置 191
9.1.3 创建Node.js项目 192
9.1.4 获取项目静态资源 195
任务9.2 路由配置 196
9.2.1 路由配置的概念 196
9.2.2 GET请求方式 197
9.2.3 POST请求方式 198
任务9.3 小程序访问数据接口 202
9.3.1 配置合法域名 202
9.3.2 小程序请求数据接口 203
任务9.4 项目综合案例 206
9.4.1 小程序表单组件设计 206
9.4.2 创建Node.js项目 208
9.4.3 小程序与服务器数据交互 209
项目小结 210
学习评价 210
项目实训 211
项目10　新闻数据接口 213
任务10.1　数据库基本操作 214
10.1.1 创建数据库和数据表 214
10.1.2 新建项目 215
10.1.3 安装数据库 215
任务10.2　操作数据表 217
10.2.1 执行添加语句 217
10.2.2 执行查询操作 218
10.2.3 执行更新语句 219
10.2.4 执行删除语句 220
任务10.3 数据接口的实现 221
10.3.1 添加数据接口 221
10.3.2 查询数据接口 223
项目小结 225
学习评价 225
项目实训 225
参考文献 227

1. 零基础玩转国产大模型DeepSeek [徐永冰 张帅 编著]
2. 网络工程师5天修炼（适配第6版考纲） [主编　朱小平 施游]
3. 信息系统项目管理师考试32小时通关（适用第4版考纲） [薛大龙]
4. 信息系统管理工程师考试32小时通关（适配第2版考纲） [薛大龙　刘伟]
5. 土木工程材料检测实训 [洪晓江 达则晓丽 钱波]
6. 科技信息检索与论文写作实用教程 [李振华]
7. 传统山水画论解读与实践 [陈钠 著]
8. Python数据库编程 [主编 殷树友 邢 翀]
9. 计算机基础实训指导 [主编 袁春萍 朱妮]
10. 嵌入式人工智能技术应用（数字教材） [主编 胡娜 杨国勇 晏廷荣]
11. Vienna整流器技术 [桂存兵 著]
12. 变频器与伺服应用 [陈刚 叶云飞]
13. 物联网工程设计与实践 [汤琳 李敏]
14. 炉边夜话——深入浅出话AI [汪建　著]
15. 电商运营与管理 [钟肖英 陈潇]
16. Java面向对象程序设计 [主编 姜春磊 陈虹洁]
17. 信息技术基础（Windows 10+WPS Office）（微课版） [主编　石利平　田辉平　谢盛嘉]
18. 人工智能应用 [主编　陈　萍　刘培培　陈孟军]
19. 大学生职业发展与就业指导 [主编　刘志坚]
20. 高级办公应用项目教程 [主编 屈晶 赵成丽]
21. 企业档案工作实战宝典百问百答 [华俊 卢秀英 邵甜甜 著]
22. 计算机网络原理及应用 [主编 唐继勇 叶坤 孙梦娜]
23. 大学生创业基础 [主编 王丽莉 王 杨]
24. 船舶辅机 [主编 王连海 于洋 姜淑翠]
25. 大学生就业指导 [主编 王丽莉 董宴廷]
26. 系统架构设计师章节习题与考点特训 [主编 薛大龙 邹月平]
27. 高校学生工作探索与实践 [郭亮 著]
28. 大学生情商管理 [方雄 著]
29. 2023年长沙市会展业发展报告 [主编 周栋良]
30. 2023年长沙市金融业发展报告 [主编 任璐 王志辉]