微信小程序开发图解案例教程 附精讲视频 第2版

  

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

  

篇微信小程序快速入门
章认识微信小程序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.6setData设值函数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.1wx:if判断单个组件39
2.5.2blockwx:if判断多个组件40
2.6微信小程序列表渲染40
2.6.1wx:for列表渲染单个组件40
2.6.2blockwx:for列表渲染多个组件40
2.6.3wx:key指定专享标识符40
2.7微信小程序定义模板41
2.7.1定义模板41
2.7.2使用模板41
2.8微信小程序的引用功能42
2.8.1import引用42
2.8.2include引用42
2.9WXS小程序脚本语言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.1view视图容器62
3.1.2scroll-view可滚动视图区域63
3.1.3swiper滑块视图容器66
3.1.4movable-view可移动视图容器69
3.1.5cover-view覆盖原生组件的视图容器70
3.2基础内容组件72
3.2.1icon图标72
3.2.2text文本73
3.2.3progress进度条74
3.2.4rich-text富文本74
3.3丰富的表单组件75
3.3.1button按钮75
3.3.2checkbox多项选择器77
3.3.3radio单项选择器78
3.3.4input单行输入框79
3.3.5textarea多行输入框82
3.3.6label改进表单可用性83
3.3.7picker滚动选择器85
3.3.8slider滑动选择器91
3.3.9switch开关选择器93
3.3.10form表单95
3.4导航组件96
3.4.1navigator页面链接组件97
3.4.2wx.navigateTo保留当前页跳转98
3.4.3wx.redirectTo关闭当前页跳转99
3.4.4跳转到tabBar页面101
3.4.5wx.navigateBack返回上一页102
3.4.6设置导航条103
3.5媒体组件104
3.5.1audio音频104
3.5.2image图片107
3.5.3video视频110
3.5.4camera相机112
3.5.5live-player实时音视频播放113
3.5.6live-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章推荐的微信小程序API139
4.1请求服务器数据API140
4.2文件上传与下载API142
4.2.1wx.uploadFile文件上传143
4.2.2wx.downloadFile文件下载145
4.3WebSocket会话API146
4.4图片处理API151
4.4.1wx.chooseImage(OBJECT)选择图片152
4.4.2wx.previewImage(OBJECT)预览图片152
4.4.3wx.getImageInfo(OBJECT)获得图片信息153
4.4.4wx.saveImageToPhotosAlbum保存图片到相册154
4.5文件操作API155
4.5.1wx.saveFile保存文件到本地155
4.5.2wx.getSavedFileList获取本地文件列表156
4.5.3wx.getSavedFileInfo获取本地文件信息157
4.5.4wx.removeSavedFile删除本地文件158
4.5.5wx.openDocument打开文档159
4.5.6wx.getFileInfo获取文件信息159
4.6数据缓存API160
4.6.1数据缓存到本地160
4.6.2获取本地缓存数据162
4.6.3移除和清理本地缓存数据165
4.7位置信息API166
4.7.1获得位置、选择位置、打开位置166
4.7.2地图组件控制169
4.8设备应用API171
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交互反馈API181
4.9.1消息提示框181
4.9.2模态弹窗183
4.9.3操作菜单184
4.10登录API185
4.11微信支付API191
4.11.1微信小程序支付介绍191
4.11.2微信小程序支付实战193
4.12分享API212
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