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

作者简介

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

第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

前言/序言

　　本书的特点与特色
　　兴许是我向来不喜欢很多编程书籍开篇就大篇幅罗列知识点的做法，从业八年以来，每每翻阅技术类书籍，看到连篇累牍的概念理论就头疼不已。接到清华大学出版社的邀约后，我长久思忖如何组织小程序开发这本书的编写思路，写出一本我自己也喜欢看的书籍。
　　如果能让读者身临其境地开发一个几近真实的项目，在不知不觉中就可以学会小程序开发，那该多好。庆幸的是，小程序不是一门语言，它不需要像Java、Python、JavaScript等基础语言教学一样罗列一个个基础语法，它*好的学习方式就是本书的“实践式”学习。因此，本书将用一个较为完整的“案例项目”把小程序的各个知识点“串接”起来，一边做项目，一边学习小程序的开发。做完一个项目就可以入门小程序是本书的目的。
　　我喜欢这种“实践式”学习所带来的“代入感”（如果你玩过各类角色扮演游戏，你就明白什么是代入感），跟着本书一步步coding，你不仅收获了知识，更是直接完成了一个像模像样的小程序，这种成就感是学习编程*大的动力。即使你是一个基础较好的开发者，只看官方的文档也能学会小程序的开发，我依然建议你认真阅读本书，因为本书将为你节约大量“试错”时间。
　　本书在很多时候并没有直接给出一个问题的*优解决方案，而是首先给出一个看似很蠢的思路来解决问题。因为这是我们*直接的思维，也是*简单的解决方案。通过分析这个解决方案有什么缺点，*后给出一个更加优秀的解决问题的建议。我想，这符合我们编程里“重构”的概念。相比于直接给出*优解（事实上编程里很难有*优解，只是相对“优秀”），渐进式的解决问题更加能让读者体会到优秀解决方案的优势，避免对知识的生搬硬套。
　　我一直认为，本书的编写思路也是程序员自学的思路，由点及面、由具体到抽象。在工作中遇到了问题，想办法解决问题，查阅资料学习这个问题的相关知识点，*后把这些知识点总结、归纳，形成自己的知识体系，这是一个通用的学习“套路”。编程的各类语言、框架太多了，技术发展的速度也快得惊人，即使类似功能的框架也多达十几个，我们很难像学习经典数学、基础物理学、现代经济学这样先学习理论再付诸实践。Coder有时就要有这种直面未知的勇气：先解决、再学习，管它三七二十一。
　　本书虽然定位于入门，但其中不乏一些小程序的进阶知识，这主要体现在微信开放接口上。学习微信开放接口不仅需要你拥有前端的知识，更要有一定的服务器编程经验，否则你很难理解为什么微信要这么设计开放接口的调用流程？为什么需要这么复杂的签名与令牌体系？
　　退一步讲，不理解也没关系，遇到类似问题和功能时，你知道怎么去解决即可。在编程里，我们不理解的东西太多了，谁能保证我们将做过的项目、产品每一个细节都理解得清清楚楚、明明白白？有时候记住怎么去做，比为什么这么做更加重要。理解清楚只是一个相对的概念，没人能够准确定义理解到什么程度才能称为“理解清楚”，也没有人能够说明深入到什么程度才算是“深入学习”。所以，有选择地学习原理，把更多精力放在解决问题上，我认为是一个正确的选择。
　　在本书中，当遇到你不熟悉的知识体系时，没有关系，先写上去，实现这个功能。当以后有了更丰富的经验再回过头来看看这些知识点即可。本书的详细程度完全可以让你即使不懂某个知识点，也可以完成整个Orange Can项目。
　　小程序开发需要的前置技能
　　如果不考虑服务器，小程序开发只需要开发者具有JavaScript和CSS相关知识即可。
　　有很多文章说，开发者开发小程序还需要掌握Vue、AngularJS，这有些强人所难了。小程序确实有很多和Vue、AngularJS相似的地方，这主要体现在数据绑定上。但Vue和AngularJS远比微信小程序要复杂得多，为了开发一个简单的小程序，学习远比这个简单的东西复杂多倍的框架实在没有必要。
　　从先来后到的角度看，Vue、AngularJS等经典MVVM框架确实先于小程序出现，且小程序借鉴了许多这些MVVM框架中的经典思想。但对于既没有开发过小程序，也没有任何AngularJS、Vue经验的开发者，这个先来后到的理念对你没有任何意义。反正都不会，自然是优先学习简单的，再进阶复杂的框架。如果你是一个iOS和Android转型过来的开发者，完全没有必要理会Vue和AngularJS，小程序开发中的很多思想相信你在自己的iOS和Android领域已有体会。
　　如果你只是为了开发小程序前端部分，更没有必要学习NodeJS。前端是前端，服务器是服务器，我们能把一端做到极致就已经非常了不起了。如果你想一个人开发一个完整的小程序，那服务器语言也没有规定必须是NodeJS。选择一个你喜欢的服务器语言，PHP、NodeJS、Python、Java、C#、Ruby都是可以的。
　　小程序开发需要掌握什么，在我看来是一个伪命题。小程序应该成为零基础入门开发者学习前端的首选开发平台（以学习与实践为目的），因为它足够简单，又同现在的主流MVVM框架非常类似，学习曲线很平滑。它应该成为入门其他更复杂、功能更强大的框架的“垫脚石”。
　　对于一个传统的Web开发者，在编写小程序时只需要注意以下两点：
　　（1）小程序中没有DOM，请放弃“首先获取DOM，再操作DOM”的思维。
　　（2）替代DOM操作的方法是“数据绑定”。控制组件显示隐藏、切换CSS样式、控制滚动条，这些很容易用DOM思维思考常见功能在小程序中都是通过“数据绑定”实现的。
　　如果你想将代码写得更加优美和简洁，那么补充一些ES6和LESS的知识就更好了。
　　小程序开发难吗
　　说小程序是所有开发框架/平台里*简单的可能略微有些夸张，但说小程序是目前所有主流移动开发技术中*简单的毫不夸张。这种简单来自于两个方面：
　　*，编写小程序只需要掌握JavaScript和CSS两门语言。前端*难的是有太多Web前端框架、类库需要学习。但是，小程序里的JavaScript是“裸奔”的，我们在Web开发中常用的各类框架/类库在小程序中统统无法使用。jQuery、Zepto、AngularJS、HightCharts、ECharts，这些Web前端学习中的一座座大山，小程序已经全部“干掉了”——小程序运行在一个JSCore中，它本身不支持Web中的window及DOM对象。有些JavaScript库还是可以使用的，但真的没有必要了，小程序已经提供了简单的架构和内置的特性避免使用这些框架。例如，小程序默认使用babel将开发者代码所使用的ES6语法转换成三端都能很好支持的ES5代码，帮助开发者解决环境不同所带来的开发问题。你所需要掌握的是JavaScript和CSS，原则上讲，不再需要学习各类框架和库了。这无疑减轻了很多初学者的负担。
　　第二，小程序本身就是为轻量级应用所设计的平台，无论是开发工具、设计规范、API设计，无不散发出一种“大道至简”的气息。你只需要从官方下载一个开发工具即可立即开始开发小程序，没有复杂的安装环境，没有复杂的目录结构，也没有复杂的打包、部署流程。小程序很多近似死板的规范无疑让开发者减少了很多工作量（不给你选择，自然微信小程序开发入门与实践/移动开发丛书下载 mobi epub pdf txt 电子书格式