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

第 1篇　微信小程序快速入门
第 1章 认识微信小程序 1
1．1　微信小程序介绍 1
1．1．1　初识微信小程序 1
1．1．2　微信小程序的功能 2
1．1．3　微信小程序的使用场景 3
1．1．4　微信小程序能取代App吗 3
1．1．5　微信小程序的发展历程 3
1．1．6　微信小程序带来的机会 4
1．2　微信小程序开发准备 5
1．2．1　基础技术准备 5
1．2．2　开发准备 5
1．3　微信小程序开发工具的使用 6
1．3．1　创建项目 6
1．3．2　开发者工具界面 8
1．3．3　菜单栏 9
1．3．4　模拟器区域 9
1．3．5　编辑器区域 10
1．3．6　调试器区域 11
1．3．7　工具栏区域 13
1．3．8　常用快捷键 16
1．4　沙场大练兵：Hello World的创建 17
1．5　小结 18


第 2章 微信小程序框架分析 19
2．1　微信小程序目录结构介绍 19
2．1．1　框架全局文件 19
2．1．2　工具类文件 24
2．1．3　框架页面文件 25
2．1．4　小试牛刀：制作“猫眼电影”底部标签导航 26
2．2　微信小程序注册程序的应用 27
2．3　微信小程序注册页面的使用 28
2．3．1　页面初始化数据 29
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　微信小程序条件渲染 37
2．5．1　wx：if判断单个组件 37
2．5．2　block wx：if判断多个组件 37
2．6　微信小程序列表渲染 37
2．6．1　wx：for列表渲染单个组件 37
2．6．2　block wx：for列表渲染多个组件 38
2．6．3　wx：key指定唯一标识符 38
2．7　微信小程序定义模板 39
2．7．1　定义模板 39
2．7．2　使用模板 39
2．8　微信小程序的引用功能 39
2．8．1　import引用 39
2．8．2　include引用 40
2．9　WXS小程序脚本语言 40
2．9．1　模块化 41
2．9．2　变量与数据类型 41
2．9．3　注释 43
2．9．4　语句 44
2．10　微信小程序WXSS样式渲染 45
2．10．1　尺寸单位 45
2．10．2　样式导入 45
2．10．3　内联样式 46
2．10．4　选择器 46
2．10．5　常用样式属性 46
2．11　沙场大练兵：仿“香哈菜谱”微信小程序 50
2．11．1　底部标签导航设计 51
2．11．2　宫格导航设计 53
2．11．3　香哈头条初始化数据 54
2．11．4　香哈头条列表渲染及绑定数据 55
2．11．5　香哈头条模板引用 59
2．12　小结 60

第3章 用微信小程序组件构建UI界面 61
3．1　视图容器组件 61
3．1．1　view视图容器 61
3．1．2　scroll-view可滚动视图区域 62
3．1．3　swiper滑块视图容器 65
3．1．4　movable-view可移动视图容器 68
3．1．5　cover-view、cover-image覆盖原生组件的视图容器 70
3．2　基础内容组件 71
3．2．1　icon图标 71
3．2．2　text文本 72
3．2．3　progress进度条 73
3．2．4　rich-text富文本 74
3．3　表单组件 75
3．3．1　button按钮 75
3．3．2　checkbox多项选择器 78
3．3．3　radio单项选择器 79
3．3．4　input单行输入框 79
3．3．5　textarea多行输入框 82
3．3．6　label改进表单可用性 83
3．3．7　picker滚动选择器 85
3．3．8　slider滑动选择器 94
3．3．9　switch开关选择器 95
3．3．10　form表单 96
3．3．11　editor富文本编辑器 98
3．4　导航组件 99
3．4．1　navigator页面链接组件 100
3．4．2　wx．navigateTo保留当前页跳转 102
3．4．3　wx．redirectTo关闭当前页跳转 103
3．4．4　wx．switchTab跳转到tabBar页面 104
3．4．5　wx．navigateBack返回上一页 105
3．4．6　设置导航条 106
3．5　媒体组件 107
3．5．1　audio音频 108
3．5．2　image图片 109
3．5．3　video视频 113
3．5．4　camera相机 115
3．5．5　live-player实时音视频播放 117
3．5．6　live-pusher实时音视频录制 117
3．6　地图组件 119
3．7　画布组件 123
3．8　沙场大练兵：表单登录注册微信小程序 125
3．8．1　登录设计 126
3．8．2　手机号注册设计 129
3．8．3　企业用户注册设计 132
3．9　小结 138

第4章 **的微信小程序API 139
4．1　请求服务器数据API 139
4．2　文件上传与下载API 142
4．2．1　wx．uploadFile文件上传API 142
4．2．2　wx．downloadFile文件下载API 144
4．3　WebSocket会话API 145
4．4　图片处理API 148
4．4．1　wx．chooseImage选择图片API 148
4．4．2　wx．previewImage预览图片API 149
4．4．3　wx．getImageInfo获得图片信息API 150
4．4．4　wx．saveImageToPhotosAlbum保存图片到相册API 151
4．4．5　wx．compressImage压缩图片API 152
4．4．6　wx．chooseMessageFile从客户端会话选择文件API 152
4．5　文件操作API 153
4．5．1　wx．saveFile保存文件到本地API 153
4．5．2　wx．getSavedFileList获取本地文件列表API 154
4．5．3　wx．getSavedFileInfo获取本地文件信息API 155
4．5．4　wx．removeSavedFile删除本地文件API 156
4．5．5　wx．openDocument打开文档API 157
4．5．6　wx．getFileInfo获取文件信息API 157
4．5．7　FileSystemManager文件管理器 158
4．6　数据缓存API 159
4．6．1　数据缓存到本地 159
4．6．2　获取本地缓存数据 161
4．6．3　移除和清理本地缓存数据 164
4．7　位置信息API 165
4．7．1　获得位置、选择位置、打开位置 166
4．7．2　监听位置事件 169
4．7．3　地图组件控制API 169
4．7．4　收货地址API 170
4．8　设备应用API 171
4．8．1　获得系统信息 171
4．8．2　获取网络状态 173
4．8．3　加速度计 174
4．8．4　罗盘 175
4．8．5　拨打电话 176
4．8．6　扫码 176
4．8．7　剪贴板 177
4．8．8　蓝牙 177
4．8．9　屏幕亮度 181
4．8．10　用户截屏事件 181
4．8．11　振动 181
4．8．12　手机联系人 182
4．9　交互反馈API 183
4．9．1　消息提示框 183
4．9．2　模态弹窗 185
4．9．3　操作菜单 186
4．10　用户及授权设置API 186
4．10．1　登录API 186
4．10．2　用户信息API 190
4．10．3　授权API 191
4．10．4　设置API 192
4．11　微信支付API 193
4．11．1　微信小程序支付介绍 193
4．11．2　微信小程序支付实战 195
4．12　分享转发API 196
4．13 沙场大练兵：仿“豆瓣电影”微信小程序 197
4．13．1　电影顶部页签切换效果 197
4．13．2　电影海报轮播效果 200
4．13．3　电影列表方式布局 202
4．13．4　电影详情介绍页布局 205
4．13．5　项目上传与预览 211
4．14　小结 212

第5章 微信小程序云开发 213
5．1　认识小程序云开发 213
5．1．1　云开发和传统开发的对比 213
5．1．2　创建小程序云开发项目 213
5．2　云开发控制台的使用 215
5．2．1　运营分析 215
5．2．2　数据库 216
5．2．3　存储 217
5．2．4　云函数 218
5．2．5　设置 218
5．2．6　费用和工单 219
5．3　云函数 219
5．3．1　云函数介绍 219
5．3．2　云函数的使用 220
5．3．3　Promise风格 221
5．3．4　npm的安装与使用 223
5．3．5　云函数本地调试 224
5．3．6　云函数定时器 225
5．4　云开发文件存储 226
5．4．1　uploadFile文件上传API 226
5．4．2　downloadFile文件下载API 227
5．4．3　deleteFile文件删除API 227
5．4．4　getTempFileURL获取文件临时路径API 228
5．5　云开发数据库 228
5．5．1　数据库介绍 228
5．5．2　数据库初始化 229
5．5．3　数据新增操作 229
5．5．4　数据查询操作 230
5．5．5　数据修改操作 231
5．5．6　数据删除操作 231
5．5．7　数据库操作符 232
5．6　沙场大练兵：地址管理云开发 234
5．6．1　数据库设计 234
5．6．2　地址列表及删除地址云开发 235
5．6．3　新增地址及编辑地址云开发 239
5．7　小结 245

第 2篇　综合案例应用
第6章 综合案例：仿“中国婚博会”微信小程序 246
6．1　需求描述 246
6．2　设计思路 247
6．3　相关知识点 247
6．4　准备工作 248
6．5　设计流程 249
6．5．1　底部标签导航设计 249
6．5．2　海报轮播效果设计 251
6．5．3　宫格导航设计 252
6．5．4　“全部分类”导航设计 256
6．5．5　“现金券”下拉菜单筛选条件设计 261
6．5．6　“现金券”列表页设计 263
6．5．7　婚博会索票界面设计 267
6．5．8　获知渠道弹出层设计 271
6．6　小结 276

第7章 综合案例：仿“华为商城”微信小程序 277
7．1　需求描述 277
7．2　设计思路 278
7．3　相关知识点 278
7．4　准备工作 279
7．5　设计流程 279
7．5．1　“我的”界面列表导航设计 279
7．5．2　账号登录 284
7．5．3　用户注册 291
7．5．4　首页布局设计及动态获取数据 294
7．5．5　分类导航设计及动态获取数据 299
7．6　小结 302

第8章 综合案例：记账本微信小程序云开发 303
8．1　需求描述 303
8．2　设计思路 304
8．3　相关知识点 304
8．4　准备工作 305
8．5　设计流程 306
8．5．1　账户列表 306
8．5．2　创建账户 311
8．5．3　账户明细列表 314
8．5．4　记一笔账户明细 317
8．5．5　分页获取账本列表 322
8．5．6　创建记账本 325
8．6　小结 328