微信小程序开发图解案例教程
微信小程序可以实现App软件的原生交互操作效果，无需安装卸载，解放用户手机内存。商家使用微信小程序也可以被更多用户找到自己的产品，成为有利的宣传。《微信小程序开发图解案例教程》助你3步学会微信小程序设计：Step1图、文、代码、视频快速理解小程序基本原理和应用方法；Step2海量案例，边练边学；Step3综合实战，感受真实商业项目制作过程；平台支撑，免费赠送资源1.全部案例源代码、素材、*终文件2.全书电子教案3.全书配套1399分钟高清精讲视频教程，手机扫码看或登录人邮学院免费观看4.赠送8大类商业案例1332分钟视频课程
内容简介
本书分两篇，介绍了微信小程序设计的基本知识和实战案例。*篇为微信小程序快速入门，包括认识微信小程序、微信小程序框架分析、用微信小程序组件构建UI界面、必备的微信小程序API、微信小程序设计及问答；第二篇为综合案例应用，包括仿智行火车票12306微信小程序、仿糗事百科微信小程序、仿中国婚博会微信小程序3个综合实战案例。本书采用图、表与详细说明的示例代码相结合的叙述方式，讲解微信小程序设计的基本原理和知识，简单易懂，提供了丰富详尽的实战案例，带读者边做边学，快速掌握微信小程序的设计和实现。
作者简介
一线项目研发、设计、管理工程师，高级项目管理师、项目监理师，负责纪检监察廉政监督监管平台、国家邮政局项目、政务大数据等多个国家级项目的设计与开发。极客学院、北风网金牌讲师畅销书《微信小程序开发图解案例教程（附精讲视频）》《小程序实战视频课：微信小程序开发全案精讲》《AxureRP8原型设计图解微课视频教程（WebApp）》作者
-------------
目录
第 一篇微信小程序快速入门
第 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 沙场大练兵：HelloWorld的创建 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 blockwx:if判断多个组件 40
2.6 微信小程序列表渲染 40
2.6.1 wx:for列表渲染单个组件 40
2.6.2 blockwx: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
第二篇 综合案例应用
第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
内容简介
本书分两篇，介绍了微信小程序设计的基本知识和实战案例。*篇为微信小程序快速入门，包括认识微信小程序、微信小程序框架分析、用微信小程序组件构建UI界面、必备的微信小程序API、微信小程序设计及问答；第二篇为综合案例应用，包括仿智行火车票12306微信小程序、仿糗事百科微信小程序、仿中国婚博会微信小程序3个综合实战案例。本书采用图、表与详细说明的示例代码相结合的叙述方式，讲解微信小程序设计的基本原理和知识，简单易懂，提供了丰富详尽的实战案例，带读者边做边学，快速掌握微信小程序的设计和实现。
作者简介
一线项目研发、设计、管理工程师，高级项目管理师、项目监理师，负责纪检监察廉政监督监管平台、国家邮政局项目、政务大数据等多个国家级项目的设计与开发。极客学院、北风网金牌讲师畅销书《微信小程序开发图解案例教程（附精讲视频）》《小程序实战视频课：微信小程序开发全案精讲》《AxureRP8原型设计图解微课视频教程（WebApp）》作者
-------------目录
第 一篇微信小程序快速入门
第 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 沙场大练兵：HelloWorld的创建 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 blockwx:if判断多个组件 40
2.6 微信小程序列表渲染 40
2.6.1 wx:for列表渲染单个组件 40
2.6.2 blockwx: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
第二篇 综合案例应用
第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
精选留言