内容简介

本书主要围绕Orange Can项目展开一系列编码工作，用几近真实的项目介绍小程序的各个API、组件用法，并附带一些小程序开发的经验、技巧以及常见的误区说明。整个Orange Can项目分为三部分：文章阅读、电影资讯以及设置。文章阅读包括文章列表、文章详情以及评论，通过编写文章阅读功能的代码，读者将学会swiper组件的裁剪模式、image组件的裁剪模式、缓存的使用技巧、列表渲染、数据绑定、模板、音乐播放、录音、分享等知识。除此之外，读者将对小程序页面的生命周期有一个大致了解。学习完这部分内容，读者将可以轻松做出一个内容型小程序应用。电影资讯功能主要介绍如何调用服务器数据及template模板的使用技巧。设置页面功能包含大量功能示例，包括获取硬件设备信息、罗盘与重力感应的应用、扫描二维码、用户登录、用户信息校验、解析用户加密数据、获取用户openId、发送模板消息、微信支付等功能。

本书还提供部分服务器的PHP代码，主要供用户登录、校验、解析加密数据、模板消息、微信支付等功能调用。

本书内容丰富、注重实战，讲解通俗易懂。适合小程序开发人员、培训机构和企业内部培训使用。

作品目录

第1章 微信小程序简介 1
1.1 什么是微信小程序 2
1.2 什么类型的应用适合用小程序开发 5
1.3 小程序与原生App（iOS、Android）的优劣对比 6
1.4 小程序会淘汰原生App吗 10
1.5 Web前端的未来 10
1.6 Web前端开发者与小程序 11
1.7 MINA框架与微信小程序 12
1.8 微信小程序beta测试版 12
第2章 小程序环境搭建与开发工具介绍 13
2.1 微信Web开发者工具下载及安装 14
2.2 新建*个项目 14
2.3 微信Web开发者工具界面功能介绍 16
2.3.1 编辑选项卡 17
2.3.2 调试选项卡 19
2.3.3 项目选项卡 22
2.3.4 编译选项 23
2.3.5 后台选项 24
2.3.6 缓存选项 24
2.3.7 关闭选项 24
2.3.8 快速打开官方API文档 24
2.3.9 开发工具的更新 24
2.3.10 常用小程序快捷键 25
第3章 从*个简单的“Welcome”页面开始小程序之旅 26
3.1 认识小程序的基本文件结构 27
3.2 开始动手编写*个小程序页面 28
3.3 构建welcome页面的元素和样式 31
3.4 小程序所支持的CSS选择器 35
3.5 Flex布局 36
3.6 小程序自适应单位rpx简介 39
3.7 全局样式文件app.wxss 42
3.8 页面的根元素page 42
3.9 app.json中的window配置项 44
第4章 文章列表页面 47
4.1 文章列表页面元素分析及准备工作 48
4.2 swiper组件 50
4.3 Boolean值的陷阱 53
4.4 构建文章列表的骨架和样式 54
4.5 image组件的4种缩放模式与9种裁剪模式 57
4.5.1 scaleToFill 58
4.5.2 aspectFit 58
4.5.3 aspectFill 59
4.5.4 widthFix 60
4.5.5 9种裁剪模式 60
4.6 完成静态文章列表 61
4.7 .js文件的代码结构与Page页面的生命周期 64
4.8 数据绑定 68
4.8.1 初始化数据绑定 69
4.8.2 在哪里可以查看数据绑定对象 70
4.8.3 绑定复杂对象 71
4.8.4 数据绑定更新 72
4.9 列表渲染wx:for 76
4.10 配置单个页面导航栏背景色 79
4.11 从欢迎页面跳转到文章页面 80
4.11.1 事件 80
4.11.2 redirectTo与navigateTo 82
4.11.3 小程序*多只能有5层页面 83
4.11.4 冒泡事件与非冒泡事件 84
第5章 模块、模板与缓存 85
5.1 将文章数据从业务中分离 86
5.2 小程序的模块 87
5.3 小程序的模板化 89
5.4 消除template模板对外部变量名的依赖 90
5.5 include与import引用模板的区别 92
5.6 CSS的模块化 93
5.7 令人遗憾的模板化而非组件化 94
5.8 使用缓存在本地模拟服务器数据库 95
5.8.1 应用程序的生命周期 95
5.8.2 使用Storage缓存初始化本地数据库 96
5.8.3 缓存的强制清理及注意事项 99
5.9 编写缓存数据库操作类 99
5.10 使用缓存数据库操作类 101
5.11 使用ES6改写缓存操作类 102
5.12 完善文章数据 103
5.13 完整的data.js数据 104
第6章 文章详情页面 110
6.1 跳转到文章详情页面 111
6.2 不要在template上注册事件 112
6.3 页面间传递参数的3种方式 113
6.3.1 组件的自定义属性 113
6.3.2 通过dataset获取组件自定义属性 114
6.3.3 获取页面参数值 115
6.4 编译时设置初始化页面及参数 115
6.5 读取文章详情数据 116
6.6 文章id号的数据流向图 117
6.7 编写文章详情页面 118
6.8 垂直居中问题的经典解决方法 121
6.9 动态设置导航栏标题 122
6.9.1 使用配置文件配置导航栏标题 122
6.9.2 使用wx.setNavigationBarTitle(OBJECT)设置导航条 123
第7章 收藏、评论、点赞与计数功能 124
7.1 收藏、评论、点赞、计数功能准备工作 125
7.2 文章收藏功能 127
7.2.1 条件渲染：wx:if与wx:else 127
7.2.2 实现收藏点击功能 128
7.2.3 交互反馈wx:showToast 130
7.3 文章点赞功能 131
7.4 本地缓存的重要性及应用举例 133
7.5 支持文字、图片、拍照、语音上传的文章评论 134
7.6 文章评论页面的实现步骤与思路 134
7.7 获取并绑定文章评论数据 135
7.8 显示文章评论数据 140
7.9 实现图片预览 145
7.10 实现提交评论的界面 146
7.11 wx:if与hidden控制元素显示和隐藏 152
7.12 实现文字评论框和语音评论框的切换 152
7.13 input组件 153
7.14 bindinput事件 154
7.15 屏蔽评论关键字 155
7.16 实现自定义发送按钮 157
7.17 同时支持模拟器回车、真机点击“完成”发送评论 161
7.18 图片与拍照评论的界面实现 161
7.19 实现从相册选择照片与拍照 164
7.20 icon图片 166
7.21 删除已选择的图片 167
7.22 在小程序中使用CSS 3动画 168
7.23 实现图片评论的发送 170
7.24 实现语音消息的发送 171
7.25 实现语音消息的暂停与播放 174
7.26 用户授权 176
7.27 解决真机运行时评论页面滑动卡顿的问题 177
7.28 文章阅读计数功能 177
第8章 背景音乐播放 180
8.1 显示音乐播放图标 181
8.2 切换音乐播放图标 182
8.3 背景音乐播放的特点 182
8.4 实现单页面背景音乐播放 183
8.5 监听音乐播放 185
8.6 全局变量与全局音乐播放 186
8.7 音乐总控开关 192
8.8 显示音乐的封面图片 194
第9章 丰富文章页面 195
9.1 将页面分享给朋友和微信群 196
9.2 从swiper组件跳转到文章详情页面 197
9.3 使用小程序动画实现点赞特效 199
第10章 电影 204
10.1 小程序的tab选项卡 205
10.2 电影页面介绍 208
10.3 编写豆瓣星星评分组件：stars-tpl模板 210
10.4 编写movie-tpl模板 212
10.5 编写movie-list-tpl模板 213
10.6 电影首页的骨架与样式 215
10.7 豆瓣电影API分析 216
10.8 电影首页的js编写 217
10.9 wx.request发送http/https请求 219
10.10 设置wx.request的超时时间 221
10.11 处理返回的电影数据 221
10.12 绑定处理后的电影数据 224
10.13 http和https在小程序中的使用说明 226
10.14 跳转到更多电影页面 227
10.15 编写movie-grid-tpl模板 229
10.16 编写“更多电影”页面 231
10.17 实现页面下拉刷新的“三部曲” 234
10.18 在模拟器中可执行下拉刷新但在真机中无法执行下拉刷新的常见错误 237
10.19 json中的backgroundColor配置的是哪里的颜色 238
10.20 实现上滑加载更多数据 239
10.21 动态设置导航栏loading图标 241
10.22 电影搜索 244
10.23 电影详情页面 249
10.24 电影详情页面的骨架和样式 251
10.25 编写电影详情页面的业务逻辑代码 258
10.26 预览电影海报 261
10.27 设置电影页面的导航栏标题 262
第11章 设置 264
11.1 设置页面 265
11.2 获取用户基本信息 272
11.3 数据缓存的异步操作 275
11.4 获取系统信息 277
11.5 获取网络状态 281
11.6 获取当前位置信息与当前速度信息 282
11.7 使用微信内置地图查看位置信息 283
11.8 监听罗盘数据制作一个简易指南针 284
11.9 在小程序中实现摇一摇 286
11.10 扫码 289
11.11 获取小程序页面二维码 292
11.12 下载并预览pdf、word等多种类型文档 293
第12章 开放接口 300
12.1 准备工作 301
12.2 用户登录 301
12.3 用户信息校验 307
12.4 解析用户加密数据获取openId及UnionId 313
12.5 模板消息 316
12.6 form表单及picker组件 321
12.7 发送模板消息 323
12.8 微信支付 328
12.9 真实的微信小程序登录状态维护 336
第13章 杂项 338
13.1 wx:key 339
13.2 scroll-view组件：在js中控制滚动条 343
13.3 深入理解小程序的单向数据绑定机制 348
13.4 深入理解scroll-view组件的bindscrolltolower、lower-threshold属性 349
13.5 微信小程序发布流程 350
· · · · · ·

作者简介

雷磊，8年研发及团队管理经验。曾就职于国内大的GIS公司互联网部门，任职研发经理。精通C#、Python、Java、JavaScript等语言与Web开发技术。工作之余经常撰写有关互联网技术、商业模式等文章，发表在各个TMT媒体上。微信小程序首批内测开发者，知乎专栏“小楼昨夜又秋风”作者。