第1章 微信小程序入门 1
学习目标 1
1.1 初识微信小程序 2
1.1.1 什么是微信小程序 2
1.1.2 微信小程序的特点 3
1.1.3 微信小程序的发展前景 4
1.1.4 微信小程序的宿主环境 4
1.2 微信小程序开发前的准备 5
1.2.1 注册微信小程序开发账号 5
1.2.2 获取微信小程序AppID 8
1.2.3 安装微信开发者工具 8
1.2.4 创建微信小程序项目 9
1.3 微信小程序开发基础 11
1.3.1 微信小程序的项目结构 11
1.3.2 微信小程序的页面组成 12
1.3.3 微信小程序的通信模型 12
1.4 微信开发者工具的使用 13
1.4.1 认识微信开发者工具 13
1.4.2 微信小程序的项目设置 15
1.4.3 微信小程序开发常用快捷键 16
1.5 微信小程序的项目成员 18
1.5.1 项目成员的组织结构 18
1.5.2 项目成员的分工 18
1.5.3 项目成员和体验成员的管理 19
1.5.4 项目成员的权限 20
1.6 微信小程序的发布上线 21
1.6.1 微信小程序的版本 21
1.6.2 微信小程序的上线流程 22
AI实践：体验AI编程工具 24
本章小结 24
课后练习 24
第2章 微信小程序页面制作 26
学习目标 26
【案例2-1】个人信息 27
案例分析 27
知识储备 27
1．WXML简介 27
2．WXSS简介 28
3．渲染引擎 29
4．常用组件 29
5．页面路径配置 30
6．导航栏配置 31
7．view组件 32
8．image组件 33
案例实现 35
【案例2-2】本地生活 37
案例分析 37
知识储备 37
1．swiper组件 37
2．text组件 39
3．Flex布局 39
案例实现 42
【案例2-3】婚礼邀请函 44
案例分析 44
知识储备 46
1．标签栏配置 46
2．vw、vh单位 48
3．scroll-view组件 48
4．video组件 49
5．表单组件 50
案例实现 54
AI实践：运用AI编程工具自动生成页面 64
本章小结 64
课后练习 64
第3章 微信小程序页面交互 66
学习目标 66
【案例3-1】比较数字大小 67
案例分析 67
知识储备 67
1．Page( )函数 67
2．数据绑定 68
3．事件绑定 69
4．事件对象 71
5．this关键字 72
6．setData( )方法 72
7．条件渲染 73
8．<block>标签 73
9．hidden属性 74
案例实现 74
【案例3-2】计算器 76
案例分析 76
知识储备 76
1．data-*自定义属性 76
2．模块 77
案例实现 78
【案例3-3】美食列表 86
案例分析 86
知识储备 86
1．列表渲染 86
2．网络请求 88
3．提示框 89
4．WXS 90
5．上拉触底 92
6．下拉刷新 92
案例实现 93
【案例3-4】调查问卷 99
案例分析 99
知识储备 99
双向数据绑定 99
案例实现 100
AI实践：运用AI编程工具实现交互效果 103
本章小结 103
课后练习 103
第4章 微信小程序常用API（上） 105
学习目标 105
【案例4-1】音乐播放器 106
案例分析 106
知识储备 107
1．slider组件 107
2．<include>标签 108
3．背景音频API 109
案例实现 110
【案例4-2】录音机 121
案例分析 122
知识储备 122
1．录音API 122
2．音频API 123
案例实现 124
【案例4-3】头像上传下载 127
案例分析 128
知识储备 128
1．选择媒体API 128
2．图片预览API 129
3．文件上传API 130
4．文件下载API 131
案例实现 131
【案例4-4】模拟时钟 134
案例分析 134
知识储备 134
1．canvas组件 134
2．画布API 135
案例实现 137
AI实践：运用AI编程工具生成API示例代码 142
本章小结 142
课后练习 143
第5章 微信小程序常用API（下） 144
学习目标 144
【案例5-1】指南针 145
案例分析 145
知识储备 145
罗盘API 145
案例实现 146
【案例5-2】用户登录 148
案例分析 149
知识储备 149
1．登录流程 149
2．登录API 151
3．数据缓存API 151
4．头像昵称填写 153
5．App( )函数 155
案例实现 156
【案例5-3】查看附近美食餐厅 160
案例分析 160
知识储备 161
1．腾讯地图SDK 161
2．map组件 165
3．地图API 166
4．位置API 167
5．路由API 168
案例实现 170
【案例5-4】在线聊天 173
案例分析 173
知识储备 174
1．WebSocket API 174
2．SocketTask 175
案例实现 177
AI实践：运用AI编程工具生成服务器接口 181
本章小结 181
课后练习 181
第6章 综合项目——“点餐”微信小程序 183
学习目标 183
【任务6-1】项目开发准备 184
项目介绍 184
项目初始化 184
【任务6-2】封装网络请求 186
任务分析 186
任务实现 186
【任务6-3】用户登录 190
任务分析 190
任务实现 190
【任务6-4】商家首页 193
任务分析 193
任务实现 194
【任务6-5】菜单列表页 198
任务分析 198
任务实现 199
【任务6-6】购物车 207
任务分析 207
任务实现 207
【任务6-7】订单确认页 219
任务分析 219
任务实现 219
【任务6-8】订单详情页 226
任务分析 226
任务实现 226
【任务6-9】订单列表页 229
任务分析 229
任务实现 230
【任务6-10】消费记录页 236
任务分析 236
任务实现 236
AI实践：运用AI编程工具生成代码解释 238
本章小结 238
第7章 微信小程序开发进阶 239
学习目标 239
【案例7-1】自定义标签栏 240
案例分析 240
知识储备 240
1．创建自定义组件 240
2．使用自定义组件 242
3．使用自定义组件渲染标签栏 243
4．Vant Weapp组件库 244
案例实现 245
【案例7-2】电影列表 248
案例分析 249
知识储备 249
1．样式导入 249
2．WeUI组件库 250
3．navigator组件 251
案例实现 252
【案例7-3】待办事项 257
案例分析 258
知识储备 258
1．uni-app框架概述 258
2．HBuilder X开发工具 259
3．创建uni-app项目 260
4．uni-app项目的目录结构 260
5．将uni-app项目运行至微信小程序 261
6．uni-app项目的全局配置文件 262
案例实现 262
AI实践：运用AI编程工具修改代码 266
本章小结 266
课后练习 266
第8章 uni-app项目——“短视频”微信小程序 268
学习目标 268
【任务8-1】项目开发准备 269
项目介绍 269
项目初始化 270
【任务8-2】公共头部区域 271
任务分析 271
任务实现 271
【任务8-3】导航栏区域 273
任务分析 273
任务实现 273
【任务8-4】轮播图区域 275
任务分析 275
任务实现 275
【任务8-5】视频列表区域 277
任务分析 277
任务实现 277
【任务8-6】视频详情页 279
任务分析 279
任务实现 280
AI实践：运用AI编程工具开发uni-app项目 286
本章小结 286