微信小程序开发项目教程(慕课版)

第 1 章
微信小程序概述．．．．．．．．．．．．．．．．．　1
1．1　微信小程序介绍．．．．．．．．．．．．．．．．．．．．．．1
1．1．1　初识微信小程序．．．．．．．．．．．．．．．．．．．．．．．　1
1．1．2　微信小程序的功能．．．．．．．．．．．．．．．．．．．．2
1．1．3　微信小程序的使用场景．．．．．．．．．．．．．3
1．1．4　微信小程序的发展历程．．．．．．．．．．．．．3
1．1．5　微信小程序带来的机会．．．．．．．．．．．．　4
1．2　微信小程序环境搭建．．．．．．．．．．．．．．．　4
1．2．1　小程序环境搭建．．．．．．．．．．．．．．．．．．．．．．　4
1．2．2　基础技术准备．．．．．．．．．．．．．．．．．．．．．．．．．　6
1．3　微信小程序开发者工具的使用．．．　6
1．3．1　如何创建项目．．．．．．．．．．．．．．．．．．．．．．．．．　6
1．3．2　微信开发者工具界面．．．．．．．．．．．．．．．　8
1．3．3　常用快捷键．．．．．．．．．．．．．．．．．．．．．．．．．．．16
1．4　项目实战：创建莫凡商城小程序．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．16
1．5　小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．18
第　2 章 莫凡商城小程序项目任务．．．．　19
2．1　“我的”模块功能介绍．．．．．．．．．．．．19
2．1．1　任务1—实现底部标签导航功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19
2．1．2　任务2—实现注册功能．．．．．．．　20
2．1．3　任务3—实现登录功能．．．．．．．　20
2．1．4　任务4—实现“我的”界面列表式导航功能．．．．．．．．．．．．．．．．．．．　20
2．1．5　任务5—实现修改密码功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　21
2．1．6　任务6—实现意见反馈功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　21
2．1．7　任务7—实现清除缓存功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．22
2．1．8　任务8—实现我的订单功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．22
2．2　“首页”模块功能介绍．．．．．．．．．．．．22
2．2．1　任务9—实现搜索区域布局与海报轮播功能．．．．．．．．．．．．．．．．．．．．．．．22
2．2．2　任务10—实现图书列表显示功能静态布局与动态渲染．．．．．．．23
2．2．3　任务11—实现图书搜索功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．23
2．2．4　任务12—实现图书更多列表显示功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．23
2．3　“购买商品”模块功能介绍．．．．．．24
2．3．1　任务13—实现商品详情页功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．24
2．3．2　任务14—实现商品加入购物车功能．．．．．．．．．．．．．．．．．．．．．．．．．．25
2．3．3　任务15—实现购物车列表功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．25
2．3．4　任务16—实现商品立即购买页功能．．．．．．．．．．．．．．．．．．．．．．．．．．25
2．3．5　任务17—实现收货地址列表功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．25
2．3．6　任务18—实现新增和编辑地址功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．26
2．3．7　任务19—实现支付功能．．．．．．26
2．3．8　任务20—实现支付完成页功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．27
2．3．9　任务21—实现订单详情页功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　27
2．4　“图书分类”模块功能介绍．．．．．．．28
2．4．1　任务22—实现图书分类功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　28
2．4．2　任务23—实现图书分类结果列表功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　29
2．5　小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．29
第3　章 莫凡商城小程序的项目结构．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　30
3．1　项目目录树结构介绍．．．．．．．．．．．．．．30
3．1．1　框架全局文件．．．．．．．．．．．．．．．．．．．．．．．　30
3．1．2　项目实战：任务1—实现底部标签导航功能．．．．．．．．．．．．．．．．　36
3．1．3　工具类文件．．．．．．．．．．．．．．．．．．．．．．．．．．　38
3．1．4　框架页面文件．．．．．．．．．．．．．．．．．．．．．．　38
3．2　微信小程序逻辑层框架接口．．．．．39
3．2．1　使用App()函数注册小程序．．．　39
3．2．2　使用Page()函数注册页面．．．．　40
3．3　微信小程序WXML 视图层．．．．．42
3．3．1　WXML 标签语言．．．．．．．．．．．．．．．．．　42
3．3．2　动态绑定数据．．．．．．．．．．．．．．．．．．．．．．　42
3．3．3　组件属性动态绑定数据．．．．．．．．．．　42
3．3．4　控制属性动态绑定数据．．．．．．．．．．　43
3．3．5　关键字动态绑定数据．．．．．．．．．．．．．　43
3．3．6　运算．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　43
3．4　微信小程序WXSS 样式渲染．．．．44
3．4．1　尺寸单位．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　44
3．4．2　样式导入．．．．．．．．．．．．．．．．．．．．．．．．．．．．　44
3．4．3　内联样式．．．．．．．．．．．．．．．．．．．．．．．．．．．．　45
3．4．4　选择器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　45
3．4．5　常用样式属性．．．．．．．．．．．．．．．．．．．．．．　45
3．5　微信小程序条件渲染．．．．．．．．．．．．．．49
3．5．1　使用wx： if 判断单个组件．．．．．．．49
3．5．2　使用block wx： if 判断多个组件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．49
3．6　微信小程序列表渲染．．．．．．．．．．．．．．49
3．6．1　使用wx： for 列表渲染单个组件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．49
3．6．2　使用block wx： for 列表渲染多个组件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．50
3．6．3　使用wx： key 指定唯一标识符．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．50
3．7　项目实战：任务4—实现“我的”界面列表式导航功能（1）．．．51
3．8　小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．54
第4　章 莫凡商城首页静态布局设计．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　55
4．1　首页需求分析与知识点．．．．．．．．．．．55
4．2　视图容器组件在首页中的应用．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．55
4．2．1　view 视图容器组件．．．．．．．．．．．．．．．56
4．2．2　scroll-view 可滚动视图容器组件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．57
4．2．3　swiper 滑块视图容器组件．．．．．59
4．2．4　movable-view 可移动视容器组件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．62
4．2．5　cover-view 覆盖原生组件的视图容器组件．．．．．．．．．．．．．．．．．．．．．．．64
4．2．6　项目实战：任务9—实现搜索区域布局与海报轮播功能．．．．．．．65
4．3　基础内容组件．．．．．．．．．．．．．．．．．．．．．．68
4．3．1　icon 图标组件．．．．．．．．．．．．．．．．．．．．．．68
4．3．2　text 文本组件．．．．．．．．．．．．．．．．．．．．．．70
4．3．3　progress 进度条组件．．．．．．．．．．．　71
4．3．4　rich-text 富文本组件．．．．．．．．．．．　71
4．3．5　editor 富文本编辑器及API ．．．　73
4．4　image 图片组件及图片API 的应用．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．76
4．4．1　image 图片组件．．．．．．．．．．．．．．．．．．　76
4．4．2　图片API 的应用．．．．．．．．．．．．．．．．．．　79
4．4．3　项目实战：任务10（1）—实现图书列表显示功能静态布局．．．．　84
4．5　导航组件和导航API ．．．．．．．．．．．．．88
4．5．1　navigator 页面链接组件．．．．．．　88
4．5．2　wx．navigateTo 保留当前页跳转API ．．．．．．．．．．．．．．．．．．．．．．．．．．．．　90
4．5．3　wx．redirectTo 关闭当前页跳转API ．．．．．．．．．．．．．．．．．．．．．．．．．．．．．91
4．5．4　wx．switchTab 跳转到tabBar页面API ．．．．．．．．．．．．．．．．．．．．．．．．．．．．　92
4．5．5　wx．navigateBack 返回上一页API ．．．．．．．．．．．．．．．．．．．．．．．．．　93
4．5．6　wx．reLaunch 关闭所有页面，打开某个页面API．．．．．．．．．．．．．．．．　94
4．5．7　导航条API ．．．．．．．．．．．．．．．．．．．．．．．．．　94
4．5．8　Tab Bar 标签导航API ．．．．．．．．　96
4．5．9　项目实战：任务11—实现图书搜索功能．．．．．．．．．．．．．．．．．．．．．．　98
4．6　项目实战：任务12—实现图书更多列表显示功能静态布局．．．．．　102
4．7　小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．107
第5　章 莫凡商城首页动态绑定设计．．．．．．．．．．．．．．．．．．．．．．．．．．．　108
5．1　微信小程序函数处理．．．．．．．．．．．．108
5．1．1　生命周期函数．．．．．．．．．．．．．．．．．．．．．．108
5．1．2　页面事件函数．．．．．．．．．．．．．．．．．．．．．．110
5．1．3　页面路由管理．．．．．．．．．．．．．．．．．．．．．．110
5．1．4　自定义函数．．．．．．．．．．．．．．．．．．．．．．．．．　111
5．1．5　setData 设值函数．．．．．．．．．．．．．．．112
5．2　微信小程序网络请求．．．．．．．．．．．．　113
5．2．1　网络访问配置．．．．．．．．．．．．．．．．．．．．．．113
5．2．2　wx．request 请求数据API ．．．．116
5．2．3　wx．uploadFile 文件上传API ．．．．．．．．．．．．．．．．．．．．．．．．．．．．118
5．2．4　wx．downloadFile 文件下载API ．．．．．．．．．．．．．．．．．．．．．．．．．．．　120
5．2．5　WebSocket 会话API ．．．．．．．．121
5．2．6　项目实战：任务10（2）—实现图书列表显示功能动态渲染．．．．　124
5．3　微信小程序定义模板．．．．．．．．．．．．　126
5．3．1　定义模板．．．．．．．．．．．．．．．．．．．．．．．．．．．．　126
5．3．2　使用模板．．．．．．．．．．．．．．．．．．．．．．．．．．．　126
5．4　微信小程序的引用功能．．．．．．．．．　127
5．4．1　import 引用．．．．．．．．．．．．．．．．．．．．．．．　127
5．4．2　include 引用．．．．．．．．．．．．．．．．．．．．．　127
5．5　WXS 小程序脚本语言．．．．．．．．．　127
5．5．1　模块化．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　128
5．5．2　变量与数据类型．．．．．．．．．．．．．．．．．．　129
5．5．3　注释．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　130
5．5．4　语句．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．131
5．6　下拉刷新及窗口设置．．．．．．．．．．．．　132
5．6．1　下拉刷新API 及事件．．．．．．．．．．．　132
5．6．2　wx．setBackgroundColor动态设置窗口的背景色．．．．．．．．．　134
5．6．3　wx．setBackgroundTextStyle动态设置下拉背景字体．．．．．．．．．　135
5．6．4　wx．loadFontFace 引入第三方字体．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　136
5．6．5　wx．pageScrollTo 将页面滚动到目标位置．．．．．．．．．．．．．．．．．．　137
5．7　小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　137
第6　章 莫凡商城的注册、登录功能．．．．．．．．．．．．．．．．．．．．．．．．．．．　138
6．1　微信小程序表单组件．．．．．．．．．．．．138
6．1．1　button 按钮组件．．．．．．．．．．．．．．．．．138
6．1．2　checkbox 多选项目组件．．．．．　141
6．1．3　radio 单选项目组件．．．．．．．．．．．．．143
6．1．4　input 输入框组件．．．．．．．．．．．．．．．．143
6．1．5　textarea 多行输入框组件．．．．146
6．1．6　label 改进表单可用性组件．．．．148
6．1．7　picker 滚动选择器组件．．．．．．．．149
6．1．8　slider 滑动选择器组件．．．．．．．．．158
6．1．9　switch 开关选择器组件．．．．．．．160
6．1．10　form 表单组件．．．．．．．．．．．．．．．．．．162
6．1．11　项目实战：任务2—实现注册功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．163
6．2　微信小程序界面交互API ．．．．．167
6．2．1　wx．showToast/wx．hideToast显示/隐藏消息提示框API．．．．．168
6．2．2　wx．showModal 显示模态对话框API ．．．．．．．．．．．．．．．．．．．．．．．．169
6．2．3　wx．showLoading/wx．hideLoading 显示/隐藏loading 提示API．．．．．．．．．．．．170
6．2．4　wx．showActionSheet 显示操作菜单API ．．．．．．．．．．．．．．．．．．．．．170
6．3　定时器API ．．．．．．．．．．．．．．．．．．．．．．　171
6．4　数据缓存API 的获取．．．．．．．．．．　172
6．4．1　将数据缓存到本地．．．．．．．．．．．．．．．173
6．4．2　获取本地缓存数据．．．．．．．．．．．．．．．174
6．4．3　清理本地缓存数据．．．．．．．．．．．．．．．177
6．4．4　从缓存获取图书列表数据．．．．．178
6．5　登录相关API．．．．．．．．．．．．．．．．．．．．179
6．5．1　登录API ．．．．．．．．．．．．．．．．．．．．．．．．．．．179
6．5．2　获取账号信息API．．．．．．．．．．．．．．．　181
6．5．3　获取用户信息API ．．．．．．．．．．．．．．．181
6．5．4　授权API．．．．．．．．．．．．．．．．．．．．．．．．．．．　182
6．5．5　设置API．．．．．．．．．．．．．．．．．．．．．．．．．．．　184
6．6　项目实战：任务3—实现登录功能．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　185
6．7　项目实战：任务4—实现“我的”界面列表式导航功能（2） ．．．．　191
6．8　项目实战：任务5—实现修改密码功能．．．．．．．．．．．．．．．．．．．．．．．．．．　195
6．9　项目实战：任务6—实现意见反馈功能．．．．．．．．．．．．．．．．．．．．．．．．．．　199
6．10　项目实战：任务7—实现清除缓存功能．．．．．．．．．．．．．．．．．．．．．．．．　201
6．11　小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　202
第7　章 莫凡商城商品详情页设计．．．．．．．．．．．．．．．．．．．．．．．．．．．　203
7．1　页面间传递数据．．．．．．．．．．．．．．．．．203
7．2　媒体组件及媒体API 的应用．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．205
7．2．1　audio 音频组件及音频API ．．．．．．．．．．．．．．．．．．．．．．．．．．．205
7．2．2　video 视频组件及视频API ．．．．．．．．．．．．．．．．．．．．．．．．．．．208
7．2．3　camera 相机组件及相机API ．．．．．．．．．．．．．．．．．．．．．．．．．．．　210
7．2．4　live-player 实时音视频播放．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．211
7．2．5　live-pusher 实时音视频录制．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　212
7．3　项目实战：任务13—实现商品详情页功能．．．．．．．．．．．．．．．．．．　213
7．4　项目实战：任务14—实现商品加入购物车功能．．．．．．．．．．．．　221
7．5　项目实战：任务15—实现购物车列表功能．．．．．．．．．．．．．．．．．．224
7．6　商品详情页分享与转发API 的应用．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．228
7．7　小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．229
第8　章 莫凡商城获取收货地址功能设计．．．．．．．．．．．．．．．．．．．．．．．．．．．　230
8．1　位置API ．．．．．．．．．．．．．．．．．．．．．．．．．230
8．1．1　查看位置、获得位置、打开位置．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　230
8．1．2　开启/停止接收位置信息．．．．．．．　232
8．1．3　监听实时地理位置．．．．．．．．．．．．．．　232
8．2　收货地址API．．．．．．．．．．．．．．．．．．．．233
8．3　地图组件及地图API ．．．．．．．．．．．234
8．3．1　map 地图组件．．．．．．．．．．．．．．．．．．．　234
8．3．2　地图API 的应用．．．．．．．．．．．．．．．．　237
8．4　项目实战：任务16—实现商品立即购买页功能．．．．．．．．．．．238
8．5　项目实战：任务17—实现收货地址列表功能．．．．．．．．．．．．．．244
8．6　项目实战：任务18—实现新增和编辑地址功能．．．．．．．．．．．247
8．7　小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．252
第9　章 莫凡商城支付功能及订单详情页设计．．．．．．．．．．．．．．．．．．．　253
9．1　支付API ．．．．．．．．．．．．．．．．．．．．．．．．．253
9．2　项目实战：任务19—实现支付功能．．．．．．．．．．．．．．．．．．．．．．．．．．254
9．3　画布组件及画布API 的应用．．．257
9．4　项目实战：任务20—实现支付完成页功能．．．．．．．．．．．．．．．．．．　261
9．5　项目实战：任务8—实现我的订单功能．．．．．．．．．．．．．．．．．．．．．　262
9．6　项目实战：任务21—实现订单详情页功能．．．．．．．．．．．．．．．．．．269
9．7　小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．276
第　10 章 小程序扩展应用．．．．．．．．．．．．．　277
10．1　设备应用API ．．．．．．．．．．．．．．．．．．277
10．1．1　获得系统信息．．．．．．．．．．．．．．．．．．．．277
10．1．2　获取网络状态．．．．．．．．．．．．．．．．．．．．278
10．1．3　加速度计．．．．．．．．．．．．．．．．．．．．．．．．．．279
10．1．4　罗盘．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．279
10．1．5　拨打电话．．．．．．．．．．．．．．．．．．．．．．．．．．280
10．1．6　扫码．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．280
10．1．7　剪贴板．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　281
10．1．8　蓝牙．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　281
10．1．9　屏幕亮度．．．．．．．．．．．．．．．．．．．．．．．．．．282
10．1．10　震动．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．282
10．1．11　手机联系人．．．．．．．．．．．．．．．．．．．．．．282
10．2　文件操作API．．．．．．．．．．．．．．．．．．283
10．2．1　wx．saveFile 保存文件到本地．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．283
10．2．2　wx．getSavedFileList 获取本地文件列表．．．．．．．．．．．．．．．．．．．．284
10．2．3　wx．getSavedFileInfo 获取本地文件信息．．．．．．．．．．．．．．．．．．．．284
10．2．4　wx．removeSavedFile 删除本地文件．．．．．．．．．．．．．．．．．．．．．．．．．．285
10．2．5　wx．openDocument 打开文档．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　285
10．2．6　wx．getFileInfo 获取文件信息．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．　286
10．3　窗口API．．．．．．．．．．．．．．．．．．．．．．．．286
10．4　微信运动API ．．．．．．．．．．．．．．．．．．286
10．5　项目实战：任务22—实现图书分类功能．．．．．．．．．．．．．．．．．．287
10．6　项目实战：任务23—实现图书分类结果列表功能．．．．．．．290
10．7　小结．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．293