熊普江，腾讯微信架构师，负责公司业务资源规划与技术架构评审等工作。腾讯公司级课程讲师，GITC专家顾问，WOT特约讲师，GOPS金牌讲师。自1997年涉足互联网，曾服务于美国Supreme、PPTV等互联网公司，任网络运营总监、运维总监等职务。逾18年互联网从业背景，对大型网络架构规划与建设，海量用户平台规划与运营技术支持，超大规模业务资源规划与技术架构管理优化有丰富的经验。

　　谢宇华，资深开发者，曾在太平洋电脑网、爱美网、民生电商等互联网公司任技术总监等职，负责网站、移动互联等技术研发、管理工作，有着多年互联网技术研发和团队管理经验。

　　腾讯微信架构师撰写，小程序巧应用，可以成就大梦想。

　　内容系统全面，包括流程、技巧、案例，可帮助你简单高效地搭建具有原生App体验的小程序

　　“即用即走，随手可得”的特点，将使小程序又一次成为用户的焦点。本书作者是腾讯微信架构师，对腾讯业务有相对全面的了解，通过与微信团队联系紧密，频繁沟通，理解并学习了大量的小程序项目案例，深入了解小程序的适用范围以及未来优化演进方向，可帮助读者少走弯路，快速搭建小程序。

序　一

不管是美国的工业互联网，还是中国的互联网+，这些都表明互联网正在催生新一轮的产业革命。移动App在不断地连接“人”，创造一个个新的基于人的应用场景；物联传感器在不断地连接“物”，也在创造一个个新的基于物的应用场景。连接带来了大的并发量和数据量，从而又促使了云计算和大数据这种分布式计算方式和数据处理方式的普及。“云大移物”为代表的新一代信息技术是当今互联网技术的核心，它们正在形成一种新的体系。正如时任工业和信息化部副部长杨学山先生在中国新一代IT产业推进联盟成立仪式上用“五个新”做了精辟总结：信息技术正在新的体系结构（新体系）；新的技术体系形成了新的能力（新能力）；在新的能力支撑下正在形成许多新的应用模式（新模式）；新的应用模式正在导致新的竞争格局（新格局）；新体系、新能力、新模式和新格局一起在推动人类社会迈入新的发展阶段（新阶段）。

在新的互联网时代，企业级IT应用正在面临颠覆性的变革：从单机架构走向分布式架构，从瀑布式开发走向迭代式开发，从大模块走向微服务，从大项目交付走向持续交付。这一切都需要企业IT开发与应用的模式要适应互联网环境下敏捷开发、快速迭代和弹性扩展的需求。可以说，企业级IT应用已经到了一个不得不换代的关键时期。在新的互联网基础设施平台上，进行原生云应用的开发，已是企业IT的必然选择。

微信确实是一个伟大的产品，它不仅成为我们每一个人日常沟通交流的工具，也成为了整个社会的信息基础设施。在国内，由于微信几乎在实时连接每一个人，它自然也成了一个最强大的“入口”。公众号、服务号和企业号的诞生已经让微信在开始连接后端的企业系统，但是这些后端的系统还可能是过去那些笨重的遗留系统。如何真正实现互联网化的即连即用，或许应用号才开始真正打开一个企业级的应用市场，我们正翘首以待。业界一直有一个说法：“企业级应用太重，很难互联网化”，然而我一直不以为然。企业架构（Enterprise Architecture）之父Zachman告诉我们，复杂的复合件应该是建立在简单的原子件组装基础上。没有良好的架构设计，系统会有大量的重复开发和重叠，复杂性也会随着需求的增加而指数级增长，到一定时候不得不推倒重来。今天的大多数企业信息化还处于这种手工作坊式的“复杂”漩涡中。大道至简，但“简”需要好的架构设计。但愿企业号的“小程序”和“巧应用”能为我们下一代信息化打开一扇新的窗户。

熊普江和谢宇华分别是我们第二届和第三届互联网CIO-CTO班学员。特别是普江，他本人是腾讯的架构师，对互联网架构有深刻的认识，对腾讯的所有产品都有足够的了解。我很高兴能为他们俩的这本书作序！可以说，《小程序、巧应用》这本书是这个时代的及时雨，它不仅仅告诉我们应用号小程序的开发和使用，也为我们下一代信息化模式转型做了一个非常好的铺垫。

姚乐，北大CIO时代学院院长

2016年11月28日

序　二

“触手可及、用完即走”，作为用户当然会期待这样的应用产品。微信小程序正是这样的产品，它面对月活超过8亿用户的微信生态为服务开发者推出一个方便快捷地链接用户的开发平台。

从小程序对外发布内测，我身边就有很多人在关注。当时我创办的1024学院也计划邀请微信的专家来上公开课，为此我还联系了本书作者普江，他当时说公测期，内部人士不好对外发声，正式上线后可以安排。

没有想到普江自己藏着大招，从内测开始到现在不到两个月，便给我传了一份书稿，让我写序。

认识普江很多年，知道他不仅是技术专家，也是热心公益、乐于分享助人的好朋友。就如他自己所言，因为太多的朋友找到他问，促使他开始准备这本书，普江的初心还是要帮助朋友，帮助小程序的开发者。

这本书可能会是第一本微信小程序的实战类书籍。感谢普江、宇华两个作者夜以继日的辛苦努力，能让广大开发者在第一时间拿到详实的开发指南和参考资料。

我们也很期待在微信生态里出现一批高质量的微信小程序，为用户提供更多、更好、更便捷的服务。

——吴华鹏，iTechClub（互联网精英俱乐部）理事长，1024学院创始人

前　言

随着移动互联网的兴起，互联网作为一种信息技术在传统社会与传统工业中发挥的作用，越来越强大，互联网与整个社会运作正在加速深度融合。“互联网+”的趋势显而易见，政府、社会组织、企业以及个人，都对移动互联网时代的融合或转型充满期待而又心怀忐忑：移动化的场景如何结合？是否有足够的移动应用开发能力？即便场景与能力都满足，是否能应对获取用户成本、打开频率等移动互联网运营的巨大挑战？

好在我们有微信！这是一款为移动时代而生，让世界互联网震惊的中国创新应用。经过5年多的发展，微信已有超过8亿月活用户且仍在不断进化与演进，是移动时代当之无愧的超级App王。更加幸运的是，腾讯的微信团队源源不断地将微信的能力开放出来，为我们提供了融合与转型的超强连接力。

2016年1月在广州举办的微信公开课上，“微信之父”张小龙在他演讲的最后一部分，宣布将推出“应用号”。小龙提到：“我自己当了多年程序员，我觉得我们应该为开发团体做一些事情。”至于“应用号”的样子，小龙当时的大概表述是“类似于公众号，但比公众号更便捷、更好找，有更容易使用的形态”。这就是微信小程序的由来。

历时8个多月，在2016年9月21日，微信小程序公布开启“内测”。随即这个内测消息便刷爆了朋友圈，我在接下来的数天内便接到不下30个“求内测邀请码”需求留言，小程序火爆程度可见一斑。由于微信团队首批仅开放了200个内测号，物以稀为贵，网络上不久就有传言：转让某个带小程序功能的微信号，账号有30.7万女粉丝，起拍价300万。

2016年11月3日，小程序正式开放公测。我再次在朋友圈刷屏中体验到了“小程序”的火爆，感受到了开发者、企业以及市场对微信小程序的好奇、疑惑，同时也感受到大家在移动浪潮中拥抱变化的期待。

微信官方页面指出：“小程序可以在微信内便捷地获取和传播，同时具有出色的使用体验。”张小龙在小程序内测首发当天，也在朋友圈给出了解释：小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开。这也体现了“用完即走”的理念，用户无须担心安装应用过多的问题。应用将无处不在，随时可用，但又无须安装卸载。

移动互联网时代的微信应用不可或缺，微信小程序切合了时代需要，毫无疑问会成为政府、组织机构、企业以及开发者必争的互联网应用场景。微信小程序必将再一次扩展微信强大的“连接力”，帮助我们解决现有服务痛点，或者发掘、衍生出新的商业模

式，帮助行业、企业以及政府机构改善服务或实现“互联网+”转型。

感谢微信团队，为我们带来微信小程序这个新生事物。绝大部分场景下，不用单独开发App的时代来临了。那么如何开发小程序？如何将现有的服务或场景与小程序结合？

由于小程序是新生事物，基本上多数人都无经验可言。与小龙一样，我觉得此时有必要为所有对小程序感兴趣、有期待的朋友，提供一些有关小程序开发的指南，这是一件非常有意义的事情。

由于我在工作上与微信团队联系紧密，沟通频繁，有近水楼台优势；而且对腾讯业务有相对全面的了解，熟悉丰富的应用场景，学习了大量小程序项目案例。

自小程序内测开启以来，我们更是夜以继日，同步研读与理解微信团队的文档，梳理开发逻辑，测试各个场景案例，希望尽早奉献给大家一本从入门到精通的小程序开发大全。

我们尝试通过本书将我们的先发优势发挥出来。由小程序的框架、语法、函数及API开始，结合丰富实用的案例，帮助大家熟练掌握小程序的开发与应用，并探讨小程序的适用范围以及未来优化演进的方向。

本书读者对象包括：

前端开发工程师

微信应用开发者

移动开发爱好者

计算机相关专业的学生

如何阅读这本书

作为“开放连接体系”的一环，微信团队为小程序提供连接标准与规范，最大限度地降低了开发门槛，但开发小程序还是需要一定的“专业开发能力”与程序开发的理解力。

微信小程序的开发是基于框架的。因此，开发者首先要理解“框架”（framework）的概念。

从软件设计角度，框架是一个可复用的软件架构解决方案。框架规定了应用的体系结构，阐明软件体系结构中各层次间及其层次内部各组件间的依赖关系、责任分配和控制流程，框架表现为一组接口、抽象类以及实例间协作的方法。

框架一般是成熟、稳健的，可以处理系统中很多的细节问题，比如，事物处理、安全性、数据流控制等问题。框架一般都为多人所用，所以结构很好，扩展性也很好，而且它是不断升级的，可以直接享受别人升级代码带来的好处。

显然，框架极大地方便了开发者，减少了开发代码量并提升了代码质量。

微信团队为小程序提供的开发框架为MINA框架，它类似于淘宝Weex、Vue框架。MINA框架经过大量底层的优化设计，有着接近原生App的运行速度，对Android端和iOS端做到了高度一致的呈现，具有完备的开发和调试工具。

微信团队为小程序的开发者提供了包含UI界面、社交与支付、语音、多媒体、LBS服务、手机硬件、网络传输等基础能力。功能丰富且实用，可以覆盖绝大部分移动应用的场景需求。

基于对框架的理解与小程序能力及开发过程，我们将本书基本内容划分为五大块：

创建一个小程序项目并解析体验：由零开始创建一个小程序，全面体验小程序的开发工具、小程序界面、开发框架、实现过程及代码解析，了解小程序的应用场景及开发要求。这部分内容非常适合对小程序开发感兴趣的初学者。

小程序开发基础指南：按框架构成，阐述小程序开发的语言与语法、函数方法、模块及事件交互等。这部分内容对小程序开发者而言，是必须掌握的部分。

组件开发应用指南：详细阐述使用组件进行页面视图的开发过程与组件应用技巧，熟练掌握组件的使用，将大大提高小程序开发的效率。

API接口开发应用指南：微信强大的基础能力均通过API接口开放出来，它为小程序实现强大功能及适配各种应用场景提供了可能。这一部分内容阐述如何使用各个微信原生API接口进行小程序开发，可帮助开发者创建出功能强大且极具原生体验的小程序应用。

小程序经典案例：通过几个应用场景的案例，让读者实践小程序的各项功能并掌握一些应用技巧。

本书力图帮助读者充分理解小程序的功能、开发过程，由浅入深，使读者快速掌握小程序项目的开发。相信读者通过学习本书，一定可以尝试简单、高效地搭建具有原生App体验的小程序应用或服务。

致谢

在写作本书的过程中，得到了很多同行、同事以及朋友的鼓励，在此衷心感谢。也感谢华章公司编辑们的努力，感谢家人的支持与理解。

场景代表未来，每一个对应现实需要的服务场景或实用功能的小程序，通过微信的连接与巧妙应用，汇聚起来，最终成为改变世界的力量。

我们相信：小程序，巧应用，可以成就大梦想。

现在，我们邀请所有对移动互联网服务与应用感兴趣的朋友，都来开发微信小程序。

作者

2016年12月

序一

序二

前言

第1章　创建自己的第一个小程序 1

1.1　准备工作 1

1.1.1　成为微信公众平台开发者 1

1.1.2　获取小程序AppID 4

1.1.3　安装开发者工具包 4

1.2　创建第一个小程序——Hello WXapplet 6

1.3　微信Web开发者工具的操作与使用 7

1.3.1　界面与操作 7

1.3.2　编辑功能 8

1.3.3　调试功能 10

1.3.4　项目功能 15

1.3.5　运行小程序 15

第2章　小程序初体验 17

2.1　理解小程序 17

2.1.1　Hello WXapplet项目目录及文件构成 18

2.1.2　Hello WXapplet项目的代码实现 19

2.2　小程序的线程架构与开发步骤 24

2.2.1　小程序线程架构 24

2.2.2　小程序开发步骤 26

2.2.3　为Hello WXapplet添加新页面及示例代码 27

2.3　进一步了解小程序开发框架 30

2.3.1　MINA框架 30

2.3.2　目录结构 32

2.3.3　逻辑层 32

2.3.4　视图层 33

2.3.5　数据层 33

2.4　小程序的发布与使用 34

2.4.1　小程序预览、上传、审核与发布 34

2.4.2　小程序加载运行 37

2.5　深入理解小程序的应用场景 38

2.5.1　小程序入口与界面 38

2.5.2　小程序与HTML 5应用开发的差异 38

2.5.3　小程序的最佳应用场景 40

2.5.4　小程序对企业、开发者的意义与影响 41

2.5.5　开发者角色与技能要求 42

第3章　小程序开发基础 43

3.1　配置 43

3.1.1　全局配置~app.json 43

3.1.2　页面配置~page.json 47

3.2　逻辑层 48

3.2.1　注册程序~App()方法 49

3.2.2　注册页面~Page()方法 50

3.2.3　模块及调用 56

3.2.4　微信原生API 57

3.3　视图层 59

3.3.1　WXML详解 60

3.3.2　WXSS详解 75

3.3.3　框架组件 79

第4章　框架组件的开发应用 81

4.1　视图容器组件 81

4.1.1　view 81

4.1.2　scroll-view 82

4.1.3　swiper 84

4.1.4　swiper-item 85

4.2　基础内容组件 86

4.2.1　icon 86

4.2.2　text 87

4.2.3　progress 88

4.3　表单组件 89

4.3.1　button 90

4.3.2　checkbox-group 91

4.3.3　checkbox 92

4.3.4　form 93

4.3.5　input 95

4.3.6　label 98

4.4　互动操作组件 110

4.4.1　action-sheet 110

4.4.2　modal 111

4.4.3　toast 112

4.4.4　loading 114

4.5　页面导航组件 115

4.6　媒体组件 117

4.6.1　image 117

4.6.2　audio 122

4.6.3　video 125

4.7　地图组件 128

4.8　画布组件 130

4.9　WXML组件与HTML的差异 131

第5章　API接口的开发应用 133

5.1　网络API 133

5.2　媒体API 139

5.2.1　图片API 139

5.2.2　录音API 141

5.2.3　音频播放控制API 142

5.2.4　音乐播放控制API 145

5.2.5　文件API 147

5.2.6　视频API 150

5.3　数据存储API 153

5.4　位置API 157

5.5　设备信息API 159

5.6　界面API 161

5.6.1　交互反馈API 161

5.6.2　页面导航API 164

5.6.3　动画API 165

5.6.4　绘图API 169

5.6.5　其他API 180

5.7　开放API 180

5.7.1　登录API 180

5.7.2　用户信息API 185

5.7.3　微信支付API 186

5.7.4　模板信息API 186

第6章　小程序开发纲要 193

6.1　界面 193

6.2　网络 195

6.3　本地数据及缓存 196

6.4　设备硬件 199

6.5　微信开放接口 200

6.6　媒体 201

6.7　后端开发与设计 204

第7章　小程序经典案例 205

7.1　文件上传与下载——小相册 205

7.1.1　功能详解 205

7.1.2　程序结构 205

7.1.3　程序细化 208

7.1.4　程序体验 218

7.2　流媒体转码与播放——视频点播 222

7.2.1　功能详解 222

7.2.2　程序目录结构 222

7.2.3　程序细化 223

7.3　互动——高冷机器人 226

7.3.1　功能详解 226

7.3.2　程序目录结构 226

7.3.3　程序细化 226

7.4　LBS应用——周边信息点 230

7.4.1　功能详解 230

7.4.2　程序结构 230

7.4.3　程序细化 233

7.5　WebSocket高级应用——远程控制设备 240

7.5.1　应用场景 240

7.5.2　开发实现 240

7.5.3　案例总结 244

第8章　小程序优化与演进 245

8.1　为什么选择小程序，而不是公众号或App 245

8.2　未来演进方向探讨 245

8.3　小程序持续优化方法 246

附录A　微信小程序平台运营规范 249

附录B　微信小程序平台常见拒绝情形 259

附录C　沟通联络方法 264