单元1
微信小程序概述 1
情景引入 1
学习目标 1
思维导图 2
1.1　微信小程序介绍 2
1.1.1　初识微信小程序 2
1.1.2　微信小程序的功能 4
1.1.3　微信小程序的使用场景 4
1.1.4　微信小程序的发展历程 4
1.1.5　微信小程序带来的机会 6
1.1.6　十大小程序平台 6
1.2　微信小程序环境搭建 7
1.2.1　小程序环境搭建 7
1.2.2　基础技术准备 9
1.3　微信开发者工具的使用 9
1.3.1　如何创建项目 9
1.3.2　微信开发者工具界面 10
1.3.3　常用快捷键 16
1.4　项目实战：创建莫凡商城小程序 18
1.5　小结 19

单元2
莫凡商城小程序项目任务 20
情景引入 20
学习目标 20
思维导图 21
2.1 “我的”模块功能介绍 21
2.1.1　任务1——实现底部标签
导航功能 21
2.1.2　任务2——实现注册功能 22
2.1.3　任务3——实现登录功能 22
2.1.4　任务4——实现“我的”界面
简单和复杂列表式导航
功能 22
2.1.5　任务5——实现修改密码
功能 23
2.1.6　任务6——实现意见反馈
功能 23
2.1.7　任务7——实现清除缓存
功能 24
2.1.8　任务8——实现我的订单
功能 24
2.2 “首页”模块功能介绍 24
2.2.1　任务9——实现搜索区域
布局与海报轮播功能 24
2.2.2　任务10——实现图书列表
显示功能静态布局与动态
渲染 25
2.2.3　任务11——实现图书搜索
功能静态布局 25
2.2.4　任务12——实现更多图书
列表显示功能静态布局 25
2.3 “购物车”模块功能介绍 26
2.3.1　任务13——实现商品
详情页功能 26
2.3.2　任务14——实现商品加入
购物车功能 27
2.3.3　任务15——实现购物车
列表功能 27
2.3.4　任务16——实现商品立即
购买页功能 27
2.3.5　任务17——实现收货地址
列表功能 27
2.3.6　任务18——实现新增和
编辑收货地址功能 28
2.3.7　任务19——实现支付
功能 28
2.3.8　任务20——实现支付成功
页功能 29
2.3.9　任务21——实现订单
详情页功能 29
2.4 “分类”模块功能介绍 30
2.4.1　任务22——实现图书分类
功能 30
2.4.2　任务23——实现图书分类
结果列表功能 31
2.5　小结 31

单元3
莫凡商城小程序的项目
结构 32
情景引入 32
学习目标 32
思维导图 33
3.1　项目结构介绍 33
3.1.1　框架全局文件 33
3.1.2　项目实战：任务1——实现
底部标签导航功能 38
3.1.3　工具类文件 40
3.1.4　框架页面文件 40
3.2　微信小程序逻辑层框架接口 41
3.2.1　使用App()函数注册
小程序 41
3.2.2　使用Page()函数注册页面 42
3.3　微信小程序WXML视图层 44
3.3.1　WXML 44
3.3.2　动态绑定数据 44
3.3.3　组件属性动态绑定数据 44
3.3.4　控制属性动态绑定数据 44
3.3.5　关键字动态绑定数据 45
3.3.6　运算 45
3.4　微信小程序WXSS样式渲染 46
3.4.1　尺寸单位 46
3.4.2　样式导入 46
3.4.3　内联样式 46
3.4.4　选择器 47
3.4.5　常用样式属性 47
3.5　微信小程序条件渲染 50
3.5.1　使用wx: if判断单个
组件 50
3.5.2　使用block wx: if判断多个
组件 51
3.6　微信小程序列表渲染 51
3.6.1　使用wx:for列表渲染单个
组件 51
3.6.2　使用block wx: for列表渲染
多个组件 52
3.6.3　使用wx: key指定唯一
标识符 52
3.7　项目实战：任务4（1）——实现
“我的”界面简单列表式导航
功能 52
3.8　小结 56

单元4
莫凡商城首页静态布局
设计 57
情景引入 57
学习目标 57
思维导图 58
4.1　首页需求分析与知识点 58
4.2　视图容器组件的应用 59
4.2.1　view视图容器组件 59
4.2.2　scroll-view可滚动视图
容器组件 60
4.2.3　swiper滑块视图容器
组件 63
4.2.4　movable-view可移动视图
容器组件 66
4.2.5　项目实战：任务9——实现
搜索区域布局与海报轮播
功能 68
4.3　基础内容组件的应用 71
4.3.1　icon图标组件 71
4.3.2　text文本组件 72
4.3.3　progress进度条组件 73
4.3.4　rich-text富文本组件 74
4.3.5　editor富文本编辑器及其
API 75
4.4　image图片组件及图片API的
应用 78
4.4.1　image图片组件 78
4.4.2　图片API的应用 81
4.4.3　项目实战：任务10（1）——
实现图书列表显示功能静态
布局 86
4.5　导航组件和导航API的应用 90
4.5.1　navigator页面链接组件 91
4.5.2　wx.navigateTo()保留
当前页跳转API 93
4.5.3　wx.redirectTo()关闭
当前页跳转API 94
4.5.4　wx.switchTab()跳转到
tabBar页面API 95
4.5.5　wx.navigateBack()返回
上一页API 96
4.5.6　wx.reLaunch()关闭所有
页面并打开某个页面
API 97
4.5.7　导航条API 97
4.5.8　tabBar标签导航API 98
4.5.9　项目实战：任务11——实现
图书搜索功能静态布局 100
4.6　项目实战：任务12——实现更多
图书列表显示功能静态布局 104
4.7　小结 110

单元5
莫凡商城首页动态绑定
设计 111
情景引入 111
学习目标 111
思维导图 112
5.1　微信小程序函数处理 112
5.1.1　生命周期函数 112
5.1.2　页面事件函数 114
5.1.3　页面路由管理 115
5.1.4　自定义函数 116
5.1.5　setData()设值函数 117
5.2　微信小程序网络请求 118
5.2.1　网络访问配置 119
5.2.2　wx.request()请求数据
API 121
5.2.3　wx.uploadFile()文件
上传API 123
5.2.4　wx.downloadFile()文件
下载API 125
5.2.5　WebSocket会话API 126
5.2.6　项目实战：任务10（2）——
实现图书列表显示功能动态
渲染 130
5.3　微信小程序定义模板 131
5.3.1　定义模板 131
5.3.2　使用模板 131
5.4　微信小程序的引用功能 132
5.4.1　import引用 132
5.4.2　include引用 132
5.5　WXS小程序脚本语言 132
5.5.1　模块化 133
5.5.2　变量与数据类型 134
5.5.3　注释 135
5.5.4　语句 136
5.6　下拉刷新及窗口设置 137
5.6.1　下拉刷新API及事件处理
函数 137
5.6.2　wx.setBackgroundColor()
动态设置窗口的
背景色API 139
5.6.3　wx.setBackgroundTextStyle()动态设置下拉背景字体
API 140
5.6.4　wx.loadFontFace()引入
第三方字体API 141
5.6.5　wx.pageScrollTo()将页面
滚动到目标位置API 142
5.7　小结 142

单元6
莫凡商城的注册、登录
功能 143
情景引入 143
学习目标 143
思维导图 144
6.1　微信小程序表单组件 144
6.1.1　button按钮组件 144
6.1.2　checkbox多选项目
组件 147
6.1.3　radio单选项目组件 148
6.1.4　input输入框组件 149
6.1.5　textarea多行输入框
组件 153
6.1.6　label改进表单可用性
组件 154
6.1.7　picker滚动选择器组件 156
6.1.8　slider滑动选择器组件 165
6.1.9　switch开关选择器
组件 167
6.1.10　form表单组件 168
6.1.11　项目实战：任务2——实现
注册功能 170
6.2　微信小程序界面交互API 174
6.2.1　wx.showToast()/
wx.hideToast()显示/隐藏
消息提示框API 174
6.2.2　wx.showModal()显示模态
对话框API 176
6.2.3　wx.showLoading()/
wx.hideLoading()显示/隐藏
loading提示框API 177
6.2.4　wx.showActionSheet()
显示操作菜单API 177
6.3　定时器API 178
6.4　数据缓存API 180
6.4.1　将数据缓存到本地 180
6.4.2　获取本地缓存数据 181
6.4.3　清理本地缓存数据 184
6.4.4　从缓存获取图书列表
数据 185
6.5　登录相关API 186
6.5.1　登录API 186
6.5.2　获取账号信息API 188
6.5.3　获取用户信息API 188
6.5.4　授权API 189
6.5.5　设置API 191
6.6　项目实战：任务3——实现登录
功能 192
6.7　项目实战：任务4（2）——
实现“我的”界面复杂列表式
导航功能 199
6.8　项目实战：任务5——实现修改
密码功能 202
6.9　项目实战：任务6——实现意见
反馈功能 206
6.10　项目实战：任务7——实现清除
缓存功能 208
6.11　小结 209

单元7
莫凡商城商品详情页设计 210
情景引入 210
学习目标 210
思维导图 211
7.1　页面间传递数据 211
7.2　媒体组件及媒体API的应用 213
7.2.1　audio音频组件及音频
API 213
7.2.2　video视频组件及视频
API 216
7.2.3　camera相机组件及相机
API 220
7.2.4　live-player实时音视频
播放组件 221
7.2.5　live-pusher实时音视频
录制组件 222
7.2.6　视频号组件 223
7.3　项目实战：任务13——实现商品
详情页功能 223
7.4　项目实战：任务14——实现商品
加入购物车功能 231
7.5　项目实战：任务15——实现购物车
列表功能 234
7.6　商品详情页分享与转发API的
应用 239
7.7　小结 241

单元8
莫凡商城获取收货地址功能
设计 242
情景引入 242
学习目标 242
思维导图 242
8.1　位置API 243
8.1.1　获得当前位置API、选择
位置API、打开位置
API 243
8.1.2　开启/停止接收位置信息
API 245
8.1.3　监听实时地理位置API 245
8.2　收货地址API 246
8.3　地图组件及地图API 246
8.3.1　map地图组件 246
8.3.2　地图API的应用 250
8.4　项目实战：任务16——实现商品
立即购买页功能 251
8.5　项目实战：任务17——实现收货
地址列表功能 257
8.6　项目实战：任务18——实现新增和
编辑收货地址功能 261
8.7　小结 267

单元9
莫凡商城支付功能及订单
详情页设计 268
情景引入 268
学习目标 268
思维导图 268
9.1　支付API 269
9.2　项目实战：任务19——实现支付
功能 270
9.3　画布组件及画布API的应用 273
9.4　项目实战：任务20——实现支付
成功页功能 276
9.5　项目实战：任务8——实现我的
订单功能 278
9.6　项目实战：任务21——实现订单
详情页功能 284
9.7　小结 291

单元10
小程序扩展应用 292
情景引入 292
学习目标 292
思维导图 293
10.1　设备应用API 293
10.1.1　获得系统信息 293
10.1.2　获取网络状态 295
10.1.3　加速度计 295
10.1.4　罗盘 296
10.1.5　拨打电话 296
10.1.6　扫码 296
10.1.7　剪贴板 297
10.1.8　蓝牙 297
10.1.9　屏幕亮度 298
10.1.10　震动 298

10.1.11　手机联系人 298
10.2　文件操作API 299
10.2.1　wx.saveFile()保存文件到
本地API 300
10.2.2　wx.getSavedFileList()
获取本地文件列表
API 300
10.2.3　wx.getSavedFileInfo()
获取本地文件信息
API 301
10.2.4　wx.removeSavedFile()
删除本地文件API 301
10.2.5　wx.openDocument()
打开文档API 301
10.2.6　wx.getFileInfo()获取
文件信息API 302
10.2.7　FileSystemManager
文件管理器API 302
10.3　窗口API 302
10.4　微信运动API 303
10.5　项目实战：任务22——实现
图书分类功能 303
10.6　项目实战：任务23——实现
图书分类结果列表功能 307
10.7　小结 310