第一篇 微信小程序快速入门 1
第1章 认识微信小程序 1
1.1微信小程序介绍 2
1.1.1初识微信小程序 2
1.1.2微信小程序的功能 3
1.1.3微信小程序的使用场景 3
1.1.4微信小程序能取代App吗 5
1.1.5微信小程序的发展历程 5
1.1.6微信小程序带来的机会 6
1.2微信小程序开发准备 6
1.2.1基础技术准备 6
1.2.2开发准备 6
1.3微信小程序开发工具的使用 8
1.3.1创建项目 8
1.3.2开发者工具界面 10
1.3.3模拟器区域 10
1.3.4编辑器区域 11
1.3.5调试器区域 13
1.3.6工具栏区域 15
1.3.7常用快捷键 17
1.4沙场大练兵：Hello World的创建 18
1.5小结 20
第2章 微信小程序框架分析 21
2.1微信小程序目录结构介绍 22
2.1.1框架全局文件 22
2.1.2工具类文件 26
2.1.3框架页面文件 27
2.1.4小试牛刀：制作猫眼电影底部标签导航 28
2.2微信小程序注册程序应用 29
2.3微信小程序注册页面的使用 31
2.3.1页面初始化数据 32
2.3.2生命周期函数 32
2.3.3页面相关事件处理函数 32
2.3.4页面路由管理 33
2.3.5自定义函数 34
2.3.6 setData设值函数 34
2.4微信小程序如何绑定数据 35
2.4.1组件属性绑定 35
2.4.2控制属性绑定 35
2.4.3关键字绑定 36
2.4.4运算 36
2.4.5小试牛刀：天气微信小程序 36
2.5微信小程序条件渲染 39
2.5.1 wx：if判断单个组件 39
2.5.2 block wx：if判断多个组件 40
2.6微信小程序列表渲染 40
2.6.1 wx：for列表渲染单个组件 40
2.6.2 block wx：for列表渲染多个组件 40
2.6.3 wx：key指定唯一标识符 40
2.7微信小程序定义模板 41
2.7.1定义模板 41
2.7.2使用模板 41
2.8微信小程序的引用功能 42
2.8.1 import引用 42
2.8.2 include引用 42
2.9 WXS小程序脚本语言 42
2.9.1模块化 43
2.9.2变量与数据类型 44
2.9.3注释 46
2.9.4语句 46
2.10沙场大练兵：仿香哈菜谱微信小程序 48
2.10.1底部标签导航设计 49
2.10.2宫格导航设计 50
2.10.3香哈头条初始化数据 53
2.10.4香哈头条列表渲染及绑定数据 54
2.10.5香哈头条模板引用 58
2.11小结 60
第3章 用微信小程序组件构建UI界面 61
3.1视图容器组件 62
3.1.1 view视图容器 62
3.1.2 scroll-view可滚动视图区域 63
3.1.3 swiper滑块视图容器 66
3.1.4 movable-view可移动视图容器 69
3.1.5 cover-view覆盖原生组件的视图容器 70
3.2基础内容组件 72
3.2.1 icon图标 72
3.2.2 text文本 73
3.2.3 progress进度条 74
3.2.4 rich-text富文本 74
3.3丰富的表单组件 75
3.3.1 button按钮 75
3.3.2 checkbox多项选择器 77
3.3.3 radio单项选择器 78
3.3.4 input单行输入框 79
3.3.5 textarea多行输入框 82
3.3.6 label改进表单可用性 83
3.3.7 picker滚动选择器 85
3.3.8 slider滑动选择器 91
3.3.9 switch开关选择器 93
3.3.10 form表单 95
3.4导航组件 96
3.4.1 navigator页面链接组件 97
3.4.2 wx.navigateTo保留当前页跳转 98
3.4.3 wx.redirectTo关闭当前页跳转 99
3.4.4跳转到tabBar页面 101
3.4.5 wx.navigateBack返回上一页 102
3.4.6设置导航条 103
3.5媒体组件 104
3.5.1 audio音频 104
3.5.2 image图片 107
3.5.3 video视频 110
3.5.4 camera相机 112
3.5.5 live-player实时音视频播放 113
3.5.6 live-pusher实时音视频录制 114
3.6地图组件 115
3.7画布组件 119
3.8沙场大练兵：表单登录注册微信小程序 121
3.8.1登录设计 122
3.8.2手机号注册设计 127
3.8.3企业用户注册设计 131
3.9小结 138
第4章 必备的微信小程序API 139
4.1请求服务器数据API 140
4.2文件上传与下载API 142
4.2.1 wx.uploadFile文件上传 143
4.2.2 wx.downloadFile文件下载 145
4.3 WebSocket会话API 146
4.4图片处理API 151
4.4.1 wx.chooseImage（OBJECT）选择图片 152
4.4.2 wx.previewImage（OBJECT）预览图片 152
4.4.3 wx.getImageInfo（OBJECT）获得图片信息 153
4.4.4 wx.saveImageToPhotosAlbum保存图片到相册 154
4.5文件操作API 155
4.5.1 wx.saveFile保存文件到本地 155
4.5.2 wx.getSavedFileList获取本地文件列表 156
4.5.3 wx.getSavedFileInfo获取本地文件信息 157
4.5.4 wx.removeSavedFile删除本地文件 158
4.5.5 wx.openDocument打开文档 159
4.5.6 wx.getFileInfo获取文件信息 159
4.6数据缓存API 160
4.6.1数据缓存到本地 160
4.6.2获取本地缓存数据 162
4.6.3移除和清理本地缓存数据 165
4.7位置信息API 166
4.7.1获得位置、选择位置、打开位置 166
4.7.2地图组件控制 169
4.8设备应用API 171
4.8.1获得系统信息 171
4.8.2获取网络状态 172
4.8.3加速度计 172
4.8.4罗盘 173
4.8.5拨打电话 174
4.8.6扫码 174
4.8.7剪贴板 175
4.8.8蓝牙 175
4.8.9屏幕亮度 179
4.8.10用户截屏事件 179
4.8.11振动 179
4.8.12手机联系人 180
4.9交互反馈API 181
4.9.1消息提示框 181
4.9.2模态弹窗 183
4.9.3操作菜单 184
4.10登录API 185
4.11微信支付API 191
4.11.1微信小程序支付介绍 191
4.11.2微信小程序支付实战 193
4.12分享API 212
4.13沙场大练兵：仿豆瓣电影微信小程序 213
4.13.1电影顶部页签切换效果 214
4.13.2电影海报轮播效果 218
4.13.3电影列表方式布局 220
4.13.4电影详情页布局 224
4.13.5项目上传与预览 231
4.14小结 232
第5章 微信小程序设计及问答 233
5.1微信小程序设计 234
5.1.1突出重点，减少干扰项 234
5.1.2主次动作区分明显 234
5.1.3流程明确，避免打断 235
5.1.4局部加载反馈 235
5.1.5模态窗口加载反馈 235
5.1.6弹出式操作结果 236
5.1.7模态对话框操作结果 236
5.1.8结果页 237
5.1.9表单填写友好提示 237
5.2微信小程序问答 238
5.3小结 240
第二篇 综合案例应用 241
第6章 综合案例：仿智行火车票12306微信小程序 241
6.1需求描述 243
6.2设计思路及相关知识点 244
6.2.1设计思路 244
6.2.2相关知识点 244
6.3准备工作 245
6.4设计流程 245
6.4.1底部标签导航设计 245
6.4.2海报轮播效果设计 248
6.4.3火车票查询界面设计 250
6.4.4火车票列表设计 261
6.4.5个人中心界面设计 273
6.4.6抢票界面设计 281
6.4.7项目上传和预览 290
6.5小结 291
第7章 综合案例：仿糗事百科微信小程序 292
7.1需求描述 293
7.2设计思路及相关知识点 294
7.2.1设计思路 294
7.2.2相关知识点 294
7.3准备工作 294
7.4设计流程 295
7.4.1顶部页签菜单滑动设计 295
7.4.2顶部页签菜单切换效果设计 297
7.4.3糗事列表页设计 299
7.4.4视频列表页设计 307
7.4.5分享设计 309
7.4.6项目预览 310
7.5小结 311
第8章 综合案例：仿中国婚博会微信小程序 312
8.1需求描述 314
8.2设计思路及相关知识点 315
8.2.1设计思路 315
8.2.2相关知识点 315
8.3准备工作 316
8.4设计流程 317
8.4.1底部标签导航设计 317
8.4.2海报轮播效果设计 319
8.4.3宫格导航设计 321
8.4.4全部分类导航设计 326
8.4.5现金券下拉菜单筛选条件设计 332
8.4.6现金券列表页设计 335
8.4.7婚博会索票界面设计 341
8.4.8获知渠道弹出层设计 346
8.5小结 352