微信小程序开发图解案例教程（附精讲视频）

微信小程序可以实现App软件的原生交互操作效果，无需安装卸载，解放用户手机内存。商家使用微信小程序也可以被更多用户找到自己的产品，成为有利的宣传。2017年是小程序发布的元年，它的市场广阔，提供了很多就业的机会，成为一名小程序员吧！《微信小程序开发图解案例教程》助你3步学会微信小程序设计Step1图文代码快速理解小程序基本原理和应用方法Step2海量案例，边练边学Step3综合实战，感受真实商业项目制作过程平台支撑，免费赠送资源1.全部案例源代码、素材、文件2.全书电子教案3.北风网部分配套高清精讲视频教程附赠资源可登陆人邮教育社区（www.ryjiaoyu.com.cn）或根据书中网盘地址下载使用。

《微信小程序开发图解案例教程》分两篇，介绍了微信小程序设计的基本知识和实战案例。为微信小程序快速入门，包括认识微信小程序、微信小程序框架分析、用微信小程序组件构建UI界面、微信小程序API、微信小程序设计及问答；第二篇为综合案例应用，包括仿智行火车票12306微信小程序、仿糗事百科微信小程序、仿中国婚博会微信小程序3个综合实战案例。本书采用图、表与详细说明的示例代码相结合的叙述方式，讲解微信小程序设计的基本原理和知识，简单易懂，提供了丰富详尽的实战案例，带读者边做边学，快速掌握微信小程序的设计和实现。

小刚老师，本名刘刚，参与过多个软件项目的研发、设计和管理工作，拥有项目管理师高级认证、项目监理师中级认证，出版过《原型设计大师：Axure RP网站与APP设计从入门到精通》、《Axure RP原型设计图解微课视频教程（Web+App）》书籍。在中国擎天公司、神州软件子公司任职过，在项目管理和项目实践、软件设计等方面有一定经验。曾负责过纪检监察廉政监督监管平台产品的设计与开发、国家邮政局项目的设计与开发、政务大数据项目的设计与开发等等项目。

第一篇 微信小程序快速入门
第１章　认识微信小程序
1.1　微信小程序介绍 1　1
1.1.1　初识微信小程序　1
1.1.2　微信小程序的功能*　2
1.1.3　微信小程序能否取代App*　3
1.1.4　微信小程序的发展历程*　3
1.1.5　微信小程序带来的机会*　3
1.2　微信小程序开发准备　3
1.2.1　基础技术准备*　3
1.2.2　开发准备*　4
1.3　微信小程序开发工具的使用　5
1.3.1　创建项目*　5
1.3.2　编辑*　7
1.3.3　常用快捷键*　9
1.3.4　调试*　10
1.3.5　项目*　12
1.3.6　编译*　13
1.3.7　前台/后台*　13
1.3.8　缓存*　14
1.4　沙场大练兵：Hello World 的创建　14
1.5　小结　17
第2章　微信小程序框架分析　18
2.1　微信小程序目录结构介绍　18
2.1.1　框架全局文件*　18
2.1.2　工具类文件*　23
2.1.3　框架页面文件*　24
2.1.4　小试牛刀：制作猫眼电影底部标签导航*　24
2.2　微信小程序注册程序的应用　27
2.3　微信小程序注册页面的使用　29
2.3.1　页面初始化数据*　30
2.3.2　生命周期函数*　30
2.3.3　页面相关事件处理函数*　30
2.3.4　页面路由管理*　31
2.3.5　自定义函数*　32
2.3.6　setData设值函数*　32
2.4　微信小程序如何绑定数据　33
2.4.1　组件属性绑定*　33
2.4.2　控制属性绑定*　34
2.4.3　关键字绑定*　34
2.4.4　运算*　34
2.4.5　小试牛刀：天气微信
小程序*　35
2.5　微信小程序条件渲染　38
2.5.1　wx:if 判断单个组件*　38
2.5.2　block wx:if 判断多个
组件*　39
2.6　微信小程序列表渲染　39
2.6.1　wx:for 列表渲染单个
组件*　39
2.6.2　block wx:for 列表渲染多个组件*　39
2.6.3　wx:key 指定唯一标识符*　40
2.7　微信小程序定义模板　40
2.7.1　定义模板*　40
2.7.2　使用模板*　41
2.8　微信小程序的引用功能　41
2.8.1　import引用*　41
2.8.2　include引用*　42
2.9　沙场大练兵：仿香哈菜谱微信小程序　42
2.9.1　底部标签导航设计*　43
2.9.2　宫格导航设计*　45
2.9.3　香哈头条初始化数据*　48
2.9.4　香哈头条列表渲染及绑定数据*　50
2.9.5　香哈头条模板的引用*　54
2.10　小结　56
第3章　用微信小程序组件构建UI界面　57
3.1　视图容器组件　57
3.1.1　view视图容器*　57
3.1.2　scroll-view可滚动视图区域*　58
3.1.3　swiper滑块视图容器*　61
3.2　基础内容组件　65
3.2.1　icon图标组件*　65
3.2.2　text文本组件*　66
3.2.3　progress进度条组件*　67
3.3　丰富的表单组件　68
3.3.1　button按钮*　68
3.3.2　checkbox多项选择器*　70
3.3.3　radio单项选择器*　71
3.3.4　input单行输入框*　72
3.3.5　textarea多行输入框*　75
3.3.6　label组件*　77
3.3.7　picker滚动选择器*　79
3.3.8　slider滑动选择器*　85
3.3.9　switch开关选择器*　87
3.3.10　form表单*　89
3.4　导航组件　92
3.4.1　navigator页面链接组件*　92
3.4.2　wx.navigateTo保留当前页
跳转*　94
3.4.3　wx.redirectTo关闭当前页
跳转*　95
3.4.4　wx.switchTab跳转到
tabBar页面*　96
3.4.5　wx.navigateBack返回上一页*　97
3.4.6　设置导航条*　98
3.5　导媒体组件　100
3.5.1　audio音频*　100
3.5.2　image图片*　103
3.5.3　video视频*　107
3.6　地图组件　110
3.7　画布组件　114
3.8　沙场大练兵：表单登录注册微信
小程序　116
3.8.1　登录设计*　117
13.8.2　手机号注册设计*　123
13.8.3　企业用户注册设计*　128
3.9　小结　136
第4章　必备的微信小程序API　137
4.1　请求服务器数据API　137
4.2　文件上传与下载API　140
4.2.1　wx.uploadFile文件
上传*　140
4.2.2　wx.downloadFile文件下载*　143
4.3　WebSocket会话API　145
4.4　图片处理API　150
4.4.1　wx.chooseImage(OBJECT)选择图片*　150
4.4.2　wx.previewImage
(OBJECT)预览图片*　151
4.4.3　x.getImageInfo
(OBJECT)获得图片信息*152
4.5.1　wx.saveFile保存文件到
本地*　153
4.5　文件操作API　153
4.5.2　wx.getSavedFileList获取本地文件列表*　154
4.5.3　wx.getSavedFileInfo获取本地文件信息*　156
4.5.4　wx.removeSavedFile删除本地文件*　156
4.5.5　wx.openDocument打开
文档*　157
4.6　数据缓存API　158
4.6.1　数据缓存到本地*　158
4.6.2　获取本地缓存数据*　160
4.6.3　移除和清理本地缓存数据*　164
4.7　位置信息API　165
4.7.1　获得位置、选择位置、打开位置*　165
4.7.2　地图组件控制*　169
4.8　设备应用API　170
4.8.1　获得系统信息*　171
4.8.2　获取网络状态*　172
4.8.3　重力感应*　172
4.8.4　罗盘*　173
4.8.5　拨打电话*　173
4.9　交互反馈API　174
4.8.6　扫码*　174
4.9.1　消息提示框*　174
4.9.2　模态弹窗*　176
4.9.3　操作菜单*　177
4.10　登录API　179
4.11　微信支付API　183
4.12　分享API　184
4.13　沙场大练兵： 仿豆瓣电影微信小程序　185
4.13.1　电影顶部页签切换效果*　186
4.13.2　电影海报轮播效果*　190
4.13.3　电影列表方式布局*　192
4.13.4　电影详情页布局*　197
4.13.5　项目上传与预览*　206
4.14　小结　207
第5章　微信小程序设计及
问答　208
5.1　微信小程序设计　208
5.1.1　突出重点，减少
干扰项*　208
5.1.2　主次动作区分明显*　208
5.1.3　流程明确，避免打断*　209
5.1.4　局部加载反馈*　210
5.1.5　模态窗口加载反馈*　210
5.1.6　弹出式操作结果*　211
5.1.7　模态对话框操作结果*　212
5.1.8　结果页*　212
5.1.9　表单填写友好提示*　212
5.2　微信小程序问答　213
5.3　小结　215
第二篇　综合案例应用
第6章　综合案例：仿智行火车票
12306微信小程序　217
6.1　需求描述　218
6.2　设计思路及相关知识点　220
6.2.1　设计思路*　220
6.2.2　相关知识点*　221
6.3　准备工作　221
6.4　设计流程　222
6.4.1　底部标签导航设计*　222
6.4.2　海报轮播效果设计*　225
6.4.3　火车票查询界面设计*　227
6.4.4　火车票列表设计*　239
6.4.5　个人中心界面设计*　254
6.4.6　抢票界面设计*　263
6.4.7　项目上传和预览*　272
6.5　小结　273
第7章　综合案例：仿糗事百科
微信小程序　275
7.1　需求描述　275
7.2.1　设计思路*　277
7.2.2　相关知识点*　277
7.2　设计思路及相关知识点　277
7.3　准备工作　277
7.4　设计流程　278
7.4.1　顶部页签菜单滑动设计*　278
7.4.2　顶部页签菜单切换效果 设计*　280
7.4.3　糗事列表页设计*　282
7.4.4　视频列表页设计*　292
7.4.5　分享设计*　295
7.4.6　项目预览*　297
7.5　小结　298
第8章　综合案例：仿中国婚博会
微信小程序　299
8.1　需求描述　300
8.2　设计思路及相关知识点　302
8.2.1　设计思路*　302
8.2.2　相关知识点*　303
8.3　准备工作　303
8.4　设计流程　305
8.4.1　底部标签导航设计*　305
8.4.2　海报轮播效果设计*　308
8.4.3　宫格导航设计*　310
8.4.4　全部分类导航设计*　314
8.4.5　现金券下拉菜单筛选条件设计*　323
8.4.6　现金券列表页设计*　326
8.4.7　婚博会索票界面设计*　333
8.4.8　获知渠道弹出层设计*　338
8.5　小结　345