微信小程序开发入门与实践

　　本书的特点与特色
　　兴许是我向来不喜欢很多编程书籍开篇就大篇幅罗列知识点的做法，从业八年以来，每每翻阅技术类书籍，看到连篇累牍的概念理论就头疼不已。接到清华大学出版社的邀约后，我长久思忖如何组织小程序开发这本书的编写思路，写出一本我自己也喜欢看的书籍。
　　如果能让读者身临其境地开发一个几近真实的项目，在不知不觉中就可以学会小程序开发，那该多好。庆幸的是，小程序不是一门语言，它不需要像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设计，无不散发出一种“大道至简”的气息。你只需要从官方下载一个开发工具即可立即开始开发小程序，没有复杂的安装环境，没有复杂的目录结构，也没有复杂的打包、部署流程。小程序很多近似死板的规范无疑让开发者减少了很多工作量（不给你选择，自然简单）。关于对于开发者的约束，这个仁者见仁、智者见智，有人喜欢它的简单，也有人憎恨它的“不自由”。
　　我甚至认为小程序完全可以成为那些完全没有编程经验又想进入前端开发领域的人*好的入门平台。完全可以从小程序入手，通过小程序平滑的学习曲线，在熟悉编程逻辑后，再反向学习Web前端庞大的知识体系，从而进入这个行业。
　　处于早期阶段的小程序
　　小程序从2016年9月22日公布后，在短短的3个月中连续更新了8个版本。更新速度非常快。但在2017年1月9日正式开放后，版本迭代速度逐步放慢下来。预计正式上线后，小程序的接口会逐步趋于稳定。
　　小程序目前还处于极为早期的发展阶段，但其主要的框架、API都已成型，并不影响我们学习。本书无法保证书籍出版前所使用的API不会在出版后有所调整，这个是我不能控制的。本书中所描述的知识与小程序的行为都只在130400版本中测试和验证，无法保证以后小程序会不会更改这些行为。事实上，从*开始的内测版本到现在的130400版本，小程序不仅调整API，甚至经常会更改一些MINA框架的运行机制和行为，这将导致原本可以正常运行的代码突然变得有问题，需要重新调整。
　　除此之外，本书的Orange Can项目是一个接近于真实项目的小程序，还是有一定复杂度的，我无法保证不出现“任何”bug。事实上，也没有任何人能保证自己的项目不出现“任何”bug，我们能做的就是严格测试、尽量减少bug的数量，并在发现bug后*时间做出修正。
　　虽然无法保证书籍中的代码和API完全不会变更，但我会通过微信公众号、知乎专栏等方式同读者交流，保持对书籍的网络更新。同时，也会持续维护Orange Can示例项目的源代码，保证项目能够正确、稳定的运行。
　　截止本书出版之前，小程序*新版本为0.14.140900。从130400到140900的版本更迭中，没有再出现因版本更新而造成的问题，项目代码运行良好。可以看到，小程序从1月9号正式开放后，API日趋成熟，基本能够保持稳定。
　　本书与官方文档的区别
　　本书并不想成为官方开发文档的“搬运工”，除了一些非常必要的地方会引用官方文档的说明，本书几乎不会大段复制官方文档。本书更多使用官方API文档完成一个项目，对官方文档的主要内容做详细的补充说明，并附带对文档内容的经验性总结。
　　官方的API文档通常定位于工具类的速查手册而非教程。当然对于开发功底深厚的开发者，只靠开发文档也可以完成一个小程序项目，但通常需要耗费较长时间。开发文档只会告诉开发者有哪些能力，但这些能力如何使用还需要开发者自己探索。
　　本书可以告诉开发者如何使用官方API完成我们自己的业务逻辑，并在这个过程中逐步熟悉官方API，从而达到入门小程序并自己开发一个小程序的目的。
　　除此之外，目前来说，小程序的开发还是有不少“坑”的。本书尝试为开发者提前把这些“坑”踩一踩，填实了，以帮助开发者集中精力开发业务，减少浪费在小程序bug上的时间。
　　一本书是永远不可能替代官方API文档的。即使想成为官方文档的替代品也是不可能的，因为*新*全的资料永远都由官方文档率先公布，书籍总会有一定的滞后性，这也是我为什么没有在本书中大量引用官方文档的原因。本书的价值在于让开发者快速入门小程序，并讲解小程序的各个特性，降低开发者的学习成本，快速入门开发自己的应用。
　　官方文档总体来说还是非常全面优秀的，但也有很多讲得不清楚的地方，对于官方文档中错误、遗漏或者没有讲清楚的地方，本书会做详细的补充说明。建议开发者将本书与官方文档结合起来阅读，学习阶段以本书为主，文档为补充；而在开发阶段以文档为主，本书的补充说明为辅。
　　此外，官方为所有开发者准备了一个非常详尽的demo，可在微信中搜索“小程序示例”这几个关键字。
　　下载项目资源文件、源代码
　　一本书难以详尽讲解小程序的所有知识点，也无法回答开发中的所有问题，更加难以应对不断更新的小程序版本。这是一个互联网的时代，我们将尝试用书籍+网络的方式来维护本书，并对小程序*新的变更做出代码上的改动，以保证我们的示例代码可以正常运行。读者朋友也可以通过我的微信公众号向我提供反馈，并收到书籍、源代码变更的更新消息。此外，我的知乎专栏也会经常发布一些关于编程和互联网方面的文章。
　　所有项目源代码、资源文件等内容都将在微信公众号中提供下载地址。读者可以从我的微信公众号中获取项目效果图和*新版本源代码。代码包括Orange Can项目的小程序代码及部分功能的服务端PHP代码。
　　● 微信公众号：小楼昨夜又秋风
　　● 知乎专栏：小楼昨夜又秋风
　　● 知乎ID：七月在夏天
　　读者可以访问地址：http://pan.baidu.com/s/1cxQXie（注意区分数字和英文字母大小写）获得本书源代码。如果在下载过程中遇到问题，请发电子邮件至booksaga@126.com，邮件主题设置为“微信小程序开发入门与实践配书资源”。
　　如何阅读本书
　　如果你是拥有多年丰富开发经验的开发者，并且已经对小程序有一定了解，建议快速浏览章节目录，找到你感兴趣的主题，然后只看这一小节。
　　如果你有一定的前端开发基础，但没有小程序的开发经验，建议从头开始做完Orange Can项目，深入理解书中的每一个开发技巧。建议先看每个页面的效果图，或者下载*新源代码，在熟悉功能后，自己尝试编写项目功能，再对比源代码的实现方式。也许你写的项目代码比本书中的还要优秀。
　　如果你想用小程序来入门前端，那么请先熟悉JavaScript和CSS的基础知识，然后把Orange Can项目当作一个真实项目，一边做一边实践所学习的JavaScript和CSS知识。遇到不太明白的地方努力搞懂它，实在不懂也没关系，先写上去，等有一定经验后再回过头来看。但无论如何，一定要完成Orange Can项目的文章和电影这两个部分。
　　如果你是一个纯粹的技术开发者，那么请直接从第2章开始阅读。
　　总体的建议是，对于Orange Can项目的文章和电影部分，应该一步步跟着书籍逐步实现这两个核心功能；而对于“设置”页面，结合源代码“看懂”本书中的内容即可。当然，如果整本书你都能亲手敲打每一行代码，我相信你收获的绝对不仅仅是小程序开发的知识点。
　　此外，对于Orange Can项目的CSS样式，建议开发者不要完全照搬本书的CSS样式，每个人编写CSS样式的思路千差万别，本书无法保证所有CSS样式都是有“意义的”，少部分CSS样式是为了“防御性”而编写的。重点是小程序相关的知识点和JavaScript代码。
　　微信官方开发者社区
　　微信官方开放了一个开发者社区，开发者可以在社区里向微信官方反馈bug及提出问题。
　　致谢
　　向我多年的朋友蒋建明致谢，感谢他为本书提供了很多宝贵意见。
　　感谢石墨文档联合创始人陈旭为本书作序。
　　感谢清华大学出版社王金柱老师的支持，让我“拖拖拉拉”写了近三个月才完成本书。
　　雷 磊
　　2017年2月8日

　　雷磊，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 编写“更多电影”页面 2