小程序，巧应用：微信小程序开发实战(第2版)(txt+pdf+epub+mobi电子书下载)

作者：熊普江,谢宇华

出版社：机械工业出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

小程序，巧应用：微信小程序开发实战(第2版)试读：

第2版前言

小程序是微信团队打造的“连接一切”的新事物、新能力。因此，本书第1版的首要原则是：及时。其中我们介绍了小程序的框架、开发方法与应用案例，希望让广大移动互联网爱好者能在第一时间对小程序的开发有相对全面的认识，并着手开发自己的小程序。

但也正因为微信小程序是个新生事物，自其2017年1月9日正式上线以来，得到广大开发者的好评，提出了更多场景与能力的诉求，微信团队响应得非常迅速，在短短的几个月时间内，又为小程序开放了更多的新能力。这些新能力包括但不限于：

·开放个人开发者申请。

·公众号自定义菜单可打开小程序。

·公众号模板小程序可打开小程序。

·公众号绑定小程序时可选择给粉丝群发通知，粉丝点击通知消息即可进入小程序。

·兼容线下二维码，原有二维码也能进入小程序（参考摩拜单车）。

·App分享链接到微信，可用小程序打开。

·小程序提供蓝牙相关API，可连接硬件。

·小程序和微信卡券结合，在小程序中就可领取会员卡和优惠券。

·支持长按识别二维码进入小程序。

·开放第三方平台，可以把小程序交给第三方开发或管理。

·推出了新的小程序二维码，小程序二维码不再是枯燥的方形。

·公众号可关联不同主体的小程序了，一个公众号最多可关联13个小程序。

·公众号文章支持添加小程序卡片，点击卡片即可进入小程序。

·小程序之间可以相互跳转了，在小程序中长按识别小程序码即可跳转到其他小程序。

·小程序的大小升级为2MB。

·……

因此，我们有必要及时更新内容，以确保读者可以利用本书开发内容更丰富、功能更强大的小程序。

同时，我们响应读者的诉求，在第2版中扩展了新的应用案例，使得内容更加丰富与实用，更易实践。

另外，我们还为本书的应用案例提供了源代码下载地址，便于读者使用。下载地址为：http://www.5iops.com/sample.zip

小程序正在让“连接一切”的移动互联网生态成为现实，未来将无限可能。作者2017年5月

序一

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

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

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

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

序二

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

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

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

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

我们也很期待在微信生态里出现一批高质量的微信小程序，为用户提供更多、更好、更便捷的服务。——吴华鹏，iTechClub（互联网精英俱乐部）理事长，1024学院创始人

第1版前言

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

好在我们有微信！这是一款为移动时代而生，让世界互联网震惊的中国创新应用。经过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章创建自己的第一个小程序

学习计算机语言，一般会最先接触“Hello World！”程序。与之类似，要掌握微信小程序的开发，我们也先来创建自己的第一个小程序实例。1.1 准备工作

微信小程序是继订阅号、服务号、企业号之后，微信公众平台上全新的一种连接用户与服务的方式。

开始创建之前，我们需要做些准备工作，包括工作账号及项目ID获取，开发环境要求与搭建等，这也是开发小程序必备的前提工作。1.1.1 成为微信公众平台开发者

成为微信公众平台的开发者，是小程序开发的首要条件。只有成为微信公众平台开发者，才可以使用公众平台的各种开发接口。如果你已经是开发者，则可以跳过本节。

一般来讲，开发者的微信号就是小程序的开发者ID。要注意的是：微信号可以独立存在，而开发者ID不能独立存在，它必然要绑定于某个公众平台服务项目，如公众号或小程序。因此，若要成为开发者，还需要有公众平台服务（订阅号、服务号、企业号、小程序）账号或归属于某个公众平台服务的开发者。如果还没有公众平台小程序服务账号，需要先注册，注册入口为：https://mp.weixin.qq.com/，点击首页右上角“立即注册”进行注册。经过以下步骤完成小程序服务账号注册：

1）填写账号信息。

2）邮箱激活。

3）信息登记。

注意 目前小程序项目不仅开放给企业、政府、媒体及其他组织，也已支持个人开发者注册，但对个人开发者所支持的开发类目与API能力相对较少或受限，如暂不支持电子商务与网上超市等类目，暂不支持个人认证、支付与卡券等API。

完成注册后，可以登录公众平台（网址为https://mp.weixin.qq.com/）并完善微信小程序信息（如小程序名称、头像、小程序介绍、服务范围等）。

然后我们就可以绑定开发者了。登录后进入“用户身份”页面，选择“开发者”进行绑定，如图1-1和图1-2所示。图1-1 用户身份管理图1-2 绑定开发者

注意 已认证的小程序最多可以绑定20名开发者。未认证的小程序最多可以绑定10名开发者。

由于个人不能注册小程序账号，但这并不意味着个人不能进行小程序开发，这时可以通过已有的订阅号（或新注册的订阅号）开发小程序。步骤如下：

1）使用订阅号账号，登录公众平台（用电脑在https://mp.weixin.qq.com/中登录），在左边菜单中，选择“开发”→“基本配置”，点击“开通”，成为开发者。

2）在左边菜单中，选择“开发”→“开发者工具”→在页中点选“Web开发者工具”的“进入”，点选“绑定开发者微信号”，如图1-3所示。成功后可以看到个人头像；如图1-4所示。之后，开发者微信号可在Web开发者工具中进行公众号或小程序的开发与调试。图1-3 开发者管理图1-4 绑定开发者微信号

注意 绑定后，开发者手机的微信里会收到一条消息，需要接受邀请，才能成为真正的开发者。1.1.2 获取小程序AppID

成功注册小程序账号后，会有唯一的AppID。登录https://mp.weixin.qq.com，在页面左边的菜单中，点选“设置”→“开发设置”，可查看到微信小程序的AppID，如图1-5所示。

注意 这里不可使用公众号（服务号或订阅号）的AppID。没有AppID也可以进行小程序开发练习，只是部分功能受限，且不能上传发布。图1-5 开发者设置

要在手机上体验此AppID的小程序，默认只有公众平台小程序账号的管理员微信号可以；其他微信号还需要进行“绑定开发者”的操作。即在“用户身份”-“开发者”模块中，绑定需要体验该小程序的微信号。1.1.3 安装开发者工具包

作为开发者，需要有开发环境。这里需要下载安装开发者工具包。截止于2017年5月9日，微信团队提供的开发者工具包版本为0.17.170900，有Windows 32位、Windows 64位及Mac三种版本。官方下载地址为：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html。成功下载适当的版本后，在开发者的电脑上进行安装。下面以Windows 64位安装包为例，描述安装过程。

双击下载的安装包，将出现安装向导，如图1-6所示。

点击“下一步”，完成开发者工具包的安装，如图1-7所示。

运行“微信Web开发者工具”，将会要求开发者使用手机微信扫码登录，如图1-8所示。图1-6 安装向导之一图1-7 安装向导之二图1-8 微信Web开发者工具启动界面

至此，我们创建第一个小程序所需的准备工作全部完成。1.2 创建第一个小程序——Hello WXapplet

事不宜迟，我们马上开始创建第一个微信小程序——Hello WXapplet。

在安装开发者工具的电脑上运行“微信Web开发者工具”，通过开发者的微信扫码进入后，即可得到如图1-9所示的界面。图1-9 添加小程序项目

点击“添加项目”，填入前面我们获得的AppID（无AppID可以忽略），并输入项目名称“Hello WXapplet”，选定本地文件夹作为“项目目录”，如图1-10所示。图1-10 指定项目名称

勾选“在当前目录中创建quick start项目”后，点击“添加项目”按钮，即已成功创建了我们的第一个微信小程序项目——Hello WXapplet。

Hello WXapplet项目创建成功后，即进入并看到完整的开发者工具界面。我们创建的Hello WXapplet这个小程序只包含两个页面：首页及信息页，实现一些简单的功能。其中，首页显示当前登录的微信号头像及昵称。点击首页，则进入信息页，可以查看到小程序启动的日志信息。我们将在第2章中全面解析Hello WXapplet这个项目的代码。

在进行Hello WXapplet小程序项目代码介绍之前，我们需要熟悉一下微信Web开发者工具的操作。1.3 微信Web开发者工具的操作与使用“工欲善其事，必先利其器”。熟悉开发者工具界面与操作，将为我们今后的开发带来极大的便利。1.3.1 界面与操作

微信开发者工具功能非常强大与便捷，集成了开发调试、代码编辑及程序发布等功能。主界面如图1-11所示。图1-11 微信开发者工具-主界面

开发者工具界面基本划分为四大区域：1区“顶部菜单”，2区“导航菜单”，3区“目录文件/模拟运行”，4区“编辑/调试开发”。1区与2区是固定的。3区与4区会依据选择导航菜单区的不同功能或模式有所不同。

1区“顶部菜单”最为简单，开发者使用到的机会也不多。“设置”是配置开发机运行程序时如何连接网络（见图1-12）。“动作”是指“刷新”“后退”“前进”等操作，主要在网页或界面调试时使用。“帮助”则是本Web开发者工具的版本与版权声明等信息。图1-12 微信开发者工具-设置

2区“导航菜单”是开发者经常切换使用的功能区。特别是其中的“编辑”与“调试”功能将是开发者使用最多的重要功能。下面重点介绍这两个功能。1.3.2 编辑功能

我们先来看其中的“编辑”功能。点击“编辑”后出现的界面如图1-13所示。

原来的3区部分就变成了项目的目录与文件列表区，4区部分则变成了对应所选文件的代码编辑区，我们也称之为代码编辑器。

微信开发者工具提供的代码编辑器，可以对当前项目对应文件进行编码工作，同时也可以对文件进行基本的添加、删除及重命名操作。

代码编辑器现在支持4种文件的编辑：wxml、wxss、js以及json文件。当然编辑器支持了较为完善的自动补全功能，大大方便了开发者。

代码编辑器还支持快捷键操作，而且快捷键功能与行为基本保持与其他编辑器一致。比如光标相关快捷键操作如下：图1-13 微信开发者工具-编辑

·Ctrl+End：移动到文件结尾。

·Ctrl+Home：移动到文件开头。

·Ctrl+i：选中当前行。

·Shift+End：选择从光标到行尾。

·Shift+Home：选择从行首到光标处。

·Ctrl+Shift+L：选中所有匹配。

·Ctrl+D：选中匹配。

·Ctrl+U：光标回退。

再比如，格式调整的快捷操作如下：

·Ctrl+S：保存文件。

·Ctrl+[，Ctrl+]：代码行缩进。

·Ctrl+Shift+[，Ctrl+Shift+]：折叠打开代码块。

·Ctrl+C，Ctrl+V：复制粘贴，如果没有选中任何文字则复制粘贴一行。

·Shift+Alt+F：代码格式化。

·Alt+Up，Alt+Down：上下移动一行。

·Shift+Alt+Up，Shift+Alt+Down：向上向下复制一行。

·Ctrl+Shift+Enter：在当前行上方插入一行。

快捷键可以说是程序开发者的至爱，编辑器也支持自定义快捷键。关于如何自定义快捷键，可参考下节“调试”功能中的“快捷键设置项”。1.3.3 调试功能

我们再来看导航菜单区的“调试”功能，这是开发者检测代码结果实现与排查问题的核心工具，界面如图1-14所示。图1-14 微信开发者工具-调试

我们看到，这时3区变成了“模拟器”，4区变成了调试工具与输出区。

模拟器将如实地模拟微信小程序项目在客户端的逻辑与操作表现，绝大部分的功能与API调用均能在模拟器上正确呈现。

调试工具与输出区的顶部是一行菜单，分别是：Console、Sources、Network、Storage、AppData、Wxml，最右边的扩展菜单项是定制与控制开发工具钮“”。下面我们一一进行简单介绍。

注意 本章节涉及的代码及含义，读者若不理解也不需要在意，在这里主要了解菜单的功能与操作即可。

Console页：控制台信息页，它有两个作用：

1）开发者直接在此输入代码并调试，如图1-15所示。图1-15 Console页调试

2）显示小程序的错误输出，如图1-16所示。图1-16 Console页输出错误提示

Sources页：源文件调试信息页，用于显示当前项目的脚本文件，如图1-17所示。

注意 因为小程序框架会对脚本文件进行编译工作，在源文件页面中我们看到的文件其实是经过处理之后的脚本文件，所以我们编写的代码都被包含在define函数中。对于页面（page）的代码，则在打包脚本文件尾部，require函数会完成主动调用动作。

Network页：网络调试信息页，用于观察和显示每个元素请求信息和套接字（socket）状态等网络相关的详细信息，如图1-18所示。

Storage页：数据存储信息页，用于显示当前项目使用存储API（wx.setStorage或wx.setStorageSync）接口的数据存储情况。比如，我们在Console中输入：wx.setStorage（{key："name"，data："Roeyxiong"}），则在Storage页面中就可以看到我们存储了一个Key-Value数据，如图1-19所示。图1-17 Sources页图1-18 Network页

AppData页：用于调试显示当前小程序项目此时此刻的应用具体数据，实时地回显项目数据调整情况。即我们可在此处编辑修改数据，反馈到当前界面上去。比如，我们将“Hello World”这个字，改为“Hello WXApplet”，界面上马上就显示出相应的效果，如图1-20所示。图1-19 Storage页图1-20 AppData页

注意 这里的调试修改并不会保存到代码中。

Wxml页：用于帮助开发者调试WXML转化后的界面。通过这里的调试可以看到真实的页面结构及对应的WXSS属性，同时可通过修改对应的WXSS属性，在模拟器中即时查看修改后的情形。并且，可以通过调试区左上角的选择器，快速地找到页面中组件所对应的WXML代码，如图1-21所示。

例如，我们先点击①定位，在模拟器中选择定位点②，快速定位到WXML代码段③。然后我们可以在最右边的样式④中进行修改调配，并立即查看效果。图1-21 Wxml页

最右边的扩展菜单项——定制与控制开发工具钮“”，主要包括开发工具的一些定制与设置，如“Show Console”（显示控制台页），“Search all files”（查找文件），“Shotcuts”（快捷键自定义或配置），“Settings”（开发者工具的环境参数设定，包括喜好Preferences，工作区域Workspace、黑箱Blackboxing，支持模拟的手机设备型号Devices，网络带宽及时延限制Throttling等），“Help”（帮助）以及“More tools”（更多工具）。这些工具包括：Inspect devices（检测设备）、Network conditions（网络条件）、Rendering settings（渲染设定）、Sensors（重力传感器）。这里不展开叙述，如图1-22所示。图1-22 微信开发者工具-定制化配置1.3.4 项目功能

导航菜单区的“项目”功能，用来显示当前项目的细节，包括图标、AppID以及目录信息等。同时，提供了小程序发布功能（上传）与手机预览功能（预览）。

我们点击“预览”，开发者工具会将项目代码进行编译与构建，生成代码包上传到微信服务器，如图1-23所示。成功后会显示一个二维码，这样开发者就可以用手机微信扫描它，并在手机上看到小程序项目的真实表现。图1-23 微信开发者工具-项目1.3.5 运行小程序1.调试预览

开发者可以在微信开发者工具中点击左侧导航“调试”功能，以便在模拟器中运行小程序，查看小程序运行效果。2.手机预览

开发者也可以将小程序上传到微信小程序平台中，让用户或测试与开发人员通过手机微信客户端来扫码，以装载小程序，并在微信客户端环境下运行。3.开发者手机预览

在开发者工具左侧菜单栏中选择“项目”，点击“预览”，扫码后即可在微信客户端中体验，如图1-24所示。图1-24 预览小程序第2章小程序初体验

上一章我们成功地创建了第一个示例小程序——Hello WXapplet。本章通过解析这个小程序项目，使大家尽可能对小程序有个全局的认知，包括小程序的框架、目录结构、开发步骤以及入口界面、示例代码的使用与运行等。2.1 理解小程序

对于用户而言，小程序的直观表现只是多个相互关联的页面。我们的小程序Hello WXapplet也一样，它由2个相互关联的页面构成：首页（index）与信息页（logs）。点击首页的头像就切换到信息页，在信息页点击“返回”可以再返回到首页，如图2-1所示。图2-1 两个相互关联的页面

小程序的开发实际上就是实现这些页面的展示（视图），以及实现“页面上用户交互事件”、“页面间切换逻辑”、“数据存储及网络调用”等事务与逻辑处理的过程。2.1.1 Hello WXapplet项目目录及文件构成

我们先从文件目录结构上来了解Hello WXapplet项目的构成。点击开发者工具左侧导航的“编辑”，我们可以看到Hello WXapplet项目的目录结构及包含文件如图2-2所示。

试读结束[说明：试读内容隐藏了图片]

下载完整电子书