小程序，巧应用：微信小程序开发实战

    (第2版)

    熊普江 谢宇华 编著

    ISBN：978-7-111-57306-7

    本书纸版由机械工业出版社于2017年出版，电子版

    由华章分社(北京华章图文信息有限公司，北京奥

    维博世图书发行有限公司)全球范围内制作与发

    行。

    版权所有，侵权必究

    客服热线：+ 86-10-68995265

    客服信箱：service@bbbvip.com

    官方网址：www.hzmedia.com.cn

    新浪微博 @华章数媒 目录

    第2版前言

    序一

    序二

    第1版前言

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

    1.1 准备工作

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

    1.1.2 获取小程序AppID

    1.1.3 安装开发者工具包

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

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

    1.3.1 界面与操作

    1.3.2 编辑功能

    1.3.3 调试功能1.3.4 项目功能

    1.3.5 运行小程序

    第2章 小程序初体验

    2.1 理解小程序

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

    2.1.2 Hello WXapplet项目的代码实现

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

    2.2.1 小程序线程架构

    2.2.2 小程序开发步骤

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

    代码

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

    2.3.1 MINA框架

    2.3.2 目录结构

    2.3.3 逻辑层2.3.4 视图层

    2.3.5 数据层

    2.4 小程序的发布与使用

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

    2.4.2 小程序加载运行

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

    2.5.1 小程序入口与界面

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

    2.5.3 小程序的最佳应用场景

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

    2.5.5 开发者角色与技能要求

    2.5.6 小程序的能与不能

    第3章 小程序开发基础

    3.1 配置

    3.1.1 全局配置~app.json3.1.2 页面配置~page.json

    3.2 逻辑层

    3.2.1 注册程序~App方法

    3.2.2 注册页面~Page方法

    3.2.3 模块及调用

    3.2.4 微信原生API

    3.3 视图层

    3.3.1 WXML详解

    3.3.2 WXSS详解

    3.3.3 框架组件

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

    4.1 视图容器组件

    4.1.1 view

    4.1.2 scroll-view

    4.1.3 swiper4.1.4 swiper-item

    4.2 基础内容组件

    4.2.1 icon

    4.2.2 text

    4.2.3 progress

    4.3 表单组件

    4.3.1 button

    4.3.2 checkbox-group

    4.3.3 checkbox

    4.3.4 form

    4.3.5 input

    4.3.6 label

    4.3.7 picker

    4.3.8 picker-view

    4.3.9 radio-group4.3.10 slider

    4.3.11 switch

    4.3.12 textarea

    4.4 互动操作组件

    4.4.1 action-sheet

    4.4.2 modal

    4.4.3 toast

    4.4.4 loading

    4.5 页面导航组件

    4.6 媒体组件

    4.6.1 image

    4.6.2 audio

    4.6.3 video

    4.7 地图组件

    4.8 画布组件4.9 WXML组件与HTML的差异

    第5章 API接口的开发应用

    5.1 网络API

    5.2 媒体API

    5.2.1 图片API

    5.2.2 录音API

    5.2.3 音频播放控制API

    5.2.4 音乐播放控制API

    5.2.5 视频API

    5.3 文件API

    5.4 数据缓存API

    5.5 位置API

    5.6 设备信息API

    5.7 界面API

    5.7.1 交互反馈API5.7.2 页面导航API

    5.7.3 动画API

    5.7.4 绘图API

    5.7.5 其他API

    5.8 开放API

    5.8.1 登录API

    5.8.2 用户信息API

    5.8.3 微信支付API

    5.8.4 模板消息API

    5.8.5 客服消息API

    5.8.6 分享API

    5.8.7 获取二维码API

    第6章 小程序开发纲要

    6.1 界面

    6.2 网络6.3 本地数据及缓存

    6.4 设备硬件

    6.5 微信开放接口

    6.6 媒体

    6.7 后端开发与设计

    第7章 小程序经典案例

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

    7.1.1 功能详解

    7.1.2 程序结构

    7.1.3 程序细化

    7.1.4 程序体验

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

    7.2.1 功能详解

    7.2.2 程序目录结构

    7.2.3 程序细化7.3 互动——高冷机器人

    7.3.1 功能详解

    7.3.2 程序目录结构

    7.3.3 程序细化

    7.4 LBS应用——周边信息点

    7.4.1 功能详解

    7.4.2 程序结构

    7.4.3 程序细化

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

    7.5.1 应用场景

    7.5.2 开发实现

    7.5.3 案例总结

    7.6 扫码应用——微投票

    7.6.1 功能详解

    7.6.2 程序结构7.6.3 程序细化

    第8章 小程序优化与演进

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

    8.2 未来演进方向探讨

    8.3 小程序持续优化方法

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

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

    附录C 沟通联络方法第2版前言

    小程序是微信团队打造的“连接一切”的新事

    物、新能力。因此，本书第1版的首要原则是：及

    时。其中我们介绍了小程序的框架、开发方法与应

    用案例，希望让广大移动互联网爱好者能在第一时

    间对小程序的开发有相对全面的认识，并着手开发

    自己的小程序。

    但也正因为微信小程序是个新生事物，自其

    2017年1月9日正式上线以来，得到广大开发者的好

    评，提出了更多场景与能力的诉求，微信团队响应

    得非常迅速，在短短的几个月时间内，又为小程序

    开放了更多的新能力。这些新能力包括但不限于：

    ·开放个人开发者申请。·公众号自定义菜单可打开小程序。

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

    ·公众号绑定小程序时可选择给粉丝群发通

    知，粉丝点击通知消息即可进入小程序。

    ·兼容线下二维码，原有二维码也能进入小程

    序(参考摩拜单车)。

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

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

    ·小程序和微信卡券结合，在小程序中就可领

    取会员卡和优惠券。

    ·支持长按识别二维码进入小程序。·开放第三方平台，可以把小程序交给第三方

    开发或管理。

    ·推出了新的小程序二维码，小程序二维码不

    再是枯燥的方形。

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

    众号最多可关联13个小程序。

    ·公众号文章支持添加小程序卡片，点击卡片

    即可进入小程序。

    ·小程序之间可以相互跳转了，在小程序中长

    按识别小程序码即可跳转到其他小程序。

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

    ·……因此，我们有必要及时更新内容，以确保读者

    可以利用本书开发内容更丰富、功能更强大的小程

    序。

    同时，我们响应读者的诉求，在第2版中扩展

    了新的应用案例，使得内容更加丰富与实用，更易

    实践。

    另外，我们还为本书的应用案例提供了源代码

    下载地址，便于读者使用。下载地址

    为：http:www.5iops.comsample.zip

    小程序正在让“连接一切”的移动互联网生态成

    为现实，未来将无限可能。

    作者2017年5月序一

    不管是美国的工业互联网，还是中国的互联网

    +，这些都表明互联网正在催生新一轮的产业革

    命。移动App在不断地连接“人”，创造一个个新的

    基于人的应用场景；物联传感器在不断地连

    接“物”，也在创造一个个新的基于物的应用场景。

    连接带来了大的并发量和数据量，从而又促使了云

    计算和大数据这种分布式计算方式和数据处理方式

    的普及。“云大移物”为代表的新一代信息技术是当

    今互联网技术的核心，它们正在形成一种新的体

    系。正如时任工业和信息化部副部长杨学山先生在

    中国新一代IT产业推进联盟成立仪式上用“五个

    新”做的精辟总结：信息技术正在形成新的体系结

    构(新体系)；新的技术体系形成了新的能力(新能力)；在新的能力支撑下正在形成许多新的应用

    模式(新模式)；新的应用模式正在导致新的竞争

    格局(新格局)；新体系、新能力、新模式和新格

    局一起在推动人类社会迈入新的发展阶段(新阶

    段)。

    在新的互联网时代，企业级IT应用正在面临颠

    覆性的变革：从单机架构走向分布式架构，从瀑布

    式开发走向迭代式开发，从大模块走向微服务，从

    大项目交付走向持续交付。这一切都需要企业IT开

    发与应用的模式要适应互联网环境下敏捷开发、快

    速迭代和弹性扩展的需求。可以说，企业级IT应用

    已经到了一个不得不换代的关键时期。在新的互联

    网基础设施平台上，进行原生云应用的开发，已是

    企业IT的必然选择。微信确实是一个伟大的产品，它不仅成为我们

    每一个人日常沟通交流的工具，也成为了整个社会

    的信息基础设施。在国内，由于微信几乎在实时连

    接每一个人，它自然也成了一个最强大的“入口”。

    公众号、服务号和企业号的诞生已经让微信在开始

    连接后端的企业系统，但是这些后端的系统还可能

    是过去那些笨重的遗留系统。如何真正实现互联网

    化的即连即用，或许应用号才开始真正打开一个企

    业级的应用市场，我们正翘首以待。业界一直有一

    个说法：“企业级应用太重，很难互联网化”，然而

    我一直不以为然。企业架构(Enterprise

    Architecture)之父Zachman告诉我们，复杂的复合

    件应该是建立在简单的原子件组装基础上。没有良

    好的架构设计，系统会有大量的重复开发和重叠，复杂性也会随着需求的增加而指数级增长，到一定时候不得不推倒重来。今天的大多数企业信息化还

    处于这种手工作坊式的“复杂”漩涡中。大道至简，但“简”需要好的架构设计。但愿企业号的“小程

    序”和“巧应用”能为我们下一代信息化打开一扇新

    的窗户。

    熊普江和谢宇华分别是我们第二届和第三届互

    联网CIO-CTO班学员。特别是普江，他本人是腾讯

    的架构师，对互联网架构有深刻的认识，对腾讯的

    所有产品都有足够的了解。我很高兴能为他们俩的

    这本书作序!可以说，《小程序，巧应用》这本书

    是这个时代的及时雨，它不仅仅告诉我们应用号小

    程序的开发和使用，也为我们下一代信息化模式转

    型做了一个非常好的铺垫。

    姚乐，CIO时代学院院长2016年11月28日序二

    “触手可及、用完即走”，作为用户当然会期待

    这样的应用产品。微信小程序正是这样的产品，它

    面对月活超过8亿用户的微信生态，为服务开发者

    推出了一个方便快捷地连接用户的开发平台。

    从小程序对外发布内测，我身边就有很多人在

    关注。当时我创办的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.comdebugwxadocdevdevtoolsdownload.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项目创建成功后，即进入并看

    到完整的开发者工具界面。我们创建的HelloWXapplet这个小程序只包含两个页面：首页及信息

    页，实现一些简单的功能。其中，首页显示当前登

    录的微信号头像及昵称。点击首页，则进入信息

    页，可以查看到小程序启动的日志信息。我们将在

    第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所示。图2-2 Hello WXapplet项目的目录结构

    目录结构显示：小程序项目在创建时的目录

    (示例的本地开发目录为：“D：\小程序巧应用”)

    之下，包含3个app开头的文件(app.js、app.json、app.wxss)以及pages目录与utils目录。其中pages目

    录存放2个页面(index与logs)的构成文件。从示

    例中，我们看到：每个页面都是一个目录，目录名

    就是唯一的页面名，其下再由以页面名为前缀的

    2~4个文件组成。

    对小程序的目录文件结构，我们可以归纳一

    下，如图2-3所示。图2-3 小程序的目录文件结构

    左侧3个app文件必须放在小程序根目录下，其

    他文件则由开发者自由控制。这3个文件说明如

    下：

    ·app.js是小程序的脚本代码，用来监听并处理

    小程序的生命周期函数、声明全局变量。

    ·app.json是对整个小程序的全局配置，配置小

    程序是由哪些页面组成，配置小程序的窗口背景色

    等。·app.wxss是整个小程序的公共样式表。

    其中app.js和app.json是必需的。

    小程序页面是由同路径下同名但不同后缀的

    2~4个文件组成：

    ·.js后缀的文件是页面脚本文件，该文件实现页

    面逻辑与事件处理。

    ·.json后缀的文件是页面配置文件。

    ·.wxss后缀的是页面样式表文件。

    ·.wxml后缀的文件是页面结构文件，该文件

    与.wxss文件一起构建出页面。

    其中.js与.wxml文件是必需的。2.1.2 Hello WXapplet项目的代码实现

    我们再从代码层面了解Hello WXapplet项目的

    实现，根据小程序的目录结构，代码实现有两大部

    分——小程序实例与页面，下面分别介绍。

    1.小程序实例的代码实现

    在Web开发者工具的“编辑”模式下，我们来看

    Hello WXapplet这个项目里的代码文件，最关键也

    必不可少的是app.js、app.json、app.wxss这三个文

    件，分别代表脚本文件、配置文件、样式表文件。

    微信小程序运行时会读取这些文件，并生成小程序

    实例。

    app.js是小程序的脚本代码，我们一般在这个文件中监听并处理小程序的生命周期函数、声明全

    局变量、调用框架提供的丰富的API等。如本例

    app.js文件中，我们调用了的同步存储及同步读取

    本地数据的API——wx.setStorageSync及

    wx.getStorageSync。代码见程序清单2-1。想了

    解更多可用API，可参考本书第5章“API接口的开发

    应用”。

    程序清单2-1 小程序app.js

    app.js

    App({

    onLaunch: function {

    调用API从本地缓存中获取数据

    定义一个数组变量logs

    var logs = wx.getStorageSync('logs') || []

    在数组logs的集合开头插入一个元素，值为当前时间

    logs.unshift(Date.now)

    将数组logs写入本地名为logs缓存块中

    wx.setStorageSync('logs', logs)

    }, 定义一个后面index.js中会调用到的函数，参数cb意为callback，即回调函数

    getUserInfo:function(cb){

    var that = this;

    if(this.globalData.userInfo){

    判断cb是否存在且为function类型，若是则传进参数调用cb

    typeof cb == function cb(this.globalData.userInfo) }else{

    调用登录接口

    wx.login({

    success: function {

    wx.getUserInfo({

    success: function (res) {

    that.globalData.userInfo = res.userInfo;

    typeof cb == function cb(that.globalData.userInfo)

    }

    })

    }

    });

    }

    },globalData:{

    userInfo:null

    }

    })

    注意 没有编程基础的读者很容易被上述

    代码中的“回调函数”打蒙圈，这种情况建议先百度

    或Google了解一下“回调函数”的概念。

    app.json配置文件是对整个小程序的全局配

    置，代码见程序清单2-2。开发者将在这个文件中

    配置小程序是由哪些页面组成、配置小程序的窗口

    背景色、配置导航条样式、配置默认标题等。注意 app.json不可添加任何注释。

    更多关于小程序的全局配置项可参考本书3.1

    节。

    程序清单2-2 小程序app.json

    {

    pages:[

    pagesindexindex,pageslogslogs

    ],window:{

    backgroundTextStyle:light,navigationBarBackgroundColor: fff,navigationBarTitleText: WeChat,navigationBarTextStyle:black

    }

    }

    app.wxss样式表文件是整个小程序的公共样式

    表，代码见程序清单2-3。我们可以在页面“组件”的

    class属性上直接使用app.wxss中声明的样式规则。

    关于.wxss文件中的样式规则可参考本书3.3.2节“wxss详解”。

    程序清单2-3 小程序app.wxss

    app.wxss

    .container {

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: space-between;

    padding: 200rpx 0;

    box-sizing: border-box;

    }

    app.wxss文件中上述程序代码定义了一个名为

    container的样式。

    2.小程序页面的代码实现

    在我们创建的Hello WXapplet小程序项目中，包含两个页面——index页面和logs页面，即首页和

    小程序启动日志的展示信息页，它们都在pages目录下。

    每一个小程序页面可由同路径下同名的2~4个

    不同后缀文件组成，如：Hello WXapplet小程序的

    index页面就由pages目录下index路径中index.js、index.wxml、index.wxss、index.json四个文件组

    成，它们分别是页面脚本文件、页面结构文件、页

    面样式表文件、页面配置文件。其中，.wxml与.js

    文件是页面所必需的，而.wxss与.json文件则是可选

    的。

    注意 微信小程序中的每一个页面的“路径

    +页面名”都需要写在app.json的pages中，且pages中

    的第一个页面是小程序的首页。

    .wxml文件与.wxss文件作为小程序开发框架的一部分，我们在本章后面会详细介绍。

    下面分别介绍index页面与logs页面。

    index.wxml是页面的结构文件，代码见程序清

    单2-4。

    程序清单2-4 页面结构index.wxml

    

    

    

    

    

    

    
    size=cover>

    {{userInfo.nickName}}

    

    {{motto}}

    index.wxml文件中使用了、、这三个组件来搭建页面结构，绑定数据和交

    互处理函数。有关页面组件的详细使用可以参考本

    书第4章。

    index.js是页面的脚本文件，代码见程序清单2-

    5。我们在这个文件中监听并处理页面的生命周期

    函数~onLoad，获取小程序实例~getApp，声明并处理数据，响应页面交互事件等。

    程序清单2-5 页面脚本index.js

    index.js

    获取应用实例

    var app = getApp

    Page({

    data: {

    motto: 'Hello World',userInfo: {}

    }, 事件处理函数

    bindViewTap: function {

    wx.navigateTo({

    url: '..logslogs'

    })

    },onLoad: function {

    console.log('onLoad') var that = this

    调用应用实例的方法获取全局数据

    app.getUserInfo(function(userInfo){

    更新数据

    that.setData({

    userInfo:userInfo

    })

    })

    }

    })

    从上面的代码我们可以知道，.js文件是页面逻

    辑处理层。详细的逻辑层编码请参考本书3.2节。

    index.wxss是页面的样式表文件，代码见程序

    清单2-6。

    程序清单2-6 页面样式index.wxss

    index.wxss

    .userinfo {

    display: flex;

    flex-direction: column;

    align-items: center;

    }

    .userinfo-avatar {

    width: 128rpx;

    height: 128rpx;

    margin: 20rpx;

    border-radius: 50%;

    }.userinfo-nickname {

    color: aaa;

    }

    .usermotto {

    margin-top: 200px;

    }

    页面的样式表文件是非必要的。当页面有样式

    表文件时，文件中的样式规则会层叠覆盖app.wxss

    中的样式规则。否则，即使没有页面样式表文件，我们也可以在页面的结构文件中直接使用app.wxss

    中指定的样式规则。

    index.json是页面的配置文件。页面的配置文件

    同样是非必要的，而且只能配置window配置项的属

    性值。当页面有配置文件时，文件中的配置项在该

    页面上会覆盖app.json的window中相同的配置项。

    若没有指定页面的配置文件，则在该页面直接使用

    app.json中的默认配置项。更多配置文件编写与解

    析，可参考本书3.1节。接下来我们再看看logs页面。logs.wxml是logs

    页面的结构文件，代码见程序清单2-7。

    程序清单2-7 页面结构logs.wxml

    

    

    

    

    

    {{index + 1}}. {{log}}

    logs页面使用控制标签来组织代码，在上使用控制属性wx：for绑定logs数据，并将logs数据循环展开节点。

    注意 上述代码中的并不是一个组

    件，它仅仅是一个包装元素，不会在页面中做任何

    渲染，只接受控制属性(如wx：for或wx：if)。logs.js是logs页面的脚本文件，代码见程序清单

    2-8。

    程序清单2-8 页面脚本logs.js

    logs.js

    var util = require('....utilsutil.js')

    Page({

    data: {

    logs: []

    },onLoad: function {

    this.setData({

    对于logs数组的每个元素使用map方法：即调用匿名回调函数并返回包含结果的数组

    logs: (wx.getStorageSync('logs') || []).map(function (log) {

    return util.formatTime(new Date(log))

    })

    })

    }

    })

    上述脚本文件代码中，使用了require来引

    入模块化.js脚本文件。关于模块化代码，可参考本

    书3.2.3节。2.2 小程序的线程架构与开发步骤

    2.2.1 小程序线程架构

    通过对小程序项目Hello WXapplet的解析，我

    们知道每个小程序包含一个描述整体程序的app实

    例和多个描述页面的page。其中app由三个文件构

    成：公共配置app.json、公共样式app.wxss、主体逻

    辑app.js。每个page最多由四个文件构成：页面配置

    page.json、页面结构page.wxml、页面样式

    page.wxss、页面主体逻辑page.js。

    我们可以按需在app.js和page.js中添加程序在生

    命周期的每个阶段相应的事件。比如在页面onLoad

    的时候进行数据加载，onShow的时候进行数据的更新。

    典型的app.js代码结构如下：

    App({

    onLaunch: function {

    启动时执行的初始化工作

    },onShow: function {

    小程序启动或从后台进入前台时，触发执行的操作

    },onHide: function {

    小程序从前台进入后台时，触发执行的操作

    },globalConf: {

    indexDate:’’,matchDate:’’

    },dataCache: {},globalData: 'I am global data'

    })

    典型的一个页面page.js代码结构：

    Page({

    Data: {

    Text:’This is page data.’

    }

    onLoad: function(options) {

    页面加载时执行的初始化工作

    }

    onReady: function {

    页面就续后触发执行的操作

    }, onShow: function {

    页面打开时，触发执行的操作

    },onHide: function {

    页面隐藏时，触发执行的操作

    },onUnLoad: function {

    页面关闭时触发执行的操作

    }, Event handler

    viewTap: function {

    this.setData({

    text:’set some data for updating view.’

    })

    },})

    一个完整的小程序执行的生命周期如图2-4所

    示。

    图2-4 小程序的生命周期

    一个page的生命周期从onLoad事件开始，整个

    生命周期内onLoad、onReady、onUnload这三个事件仅执行一次，而onHide和onShow事件在每次页面

    隐藏和显示时都会触发。当用户手动触发左上角的

    退出箭头时，小程序仅触发app.onHide，下次进入

    小程序时会触发app.onShow以及当前

    page.onShow。仅当小程序在后台运行超过一定时

    间未被唤起、或者用户手动在小程序的控制栏里点

    击退出程序、或者小程序内存占用过大被关闭时，小程序将被销毁，会触发app.onUnload事件。

    小程序的线程架构示意如图2-5所示。图2-5 小程序线程架构示意图

    每个小程序分为2个线程，view与appSer-ver。

    其中view线程负责解析渲染页面(wxml和wxss文

    件)，而appServer线程负责运行js。appSer-ver线程

    运行在jsCore中(安卓下运行在X5中，开发工具中

    运行在nwjs中)。由于js不跑在WebView里，就不能直接操纵DOM和BOM，这就是小程序没有

    window全局变量的原因。2.2.2 小程序开发步骤

    理解小程序的线程架构后，我们基本上可以归

    纳出一个小程序开发的主要步骤，涉及两大步骤：

    1)创建小程序实例(定义、配置及页面执行

    关联)。即编写3个app前缀的文件，它们共同描述

    了整个小程序主体逻辑、生命周期及页面构成、样

    式等。小程序实例将由appServer线程执行。

    2)创建页面(编写页面结构与事务处理逻

    辑)。在小程序中一个完整的页面(page)是

    由.js、.json、.wxml、.wxss这四个文件组成，每个

    界面.js和.wxml是必选项，其他两项是可选项。小

    程序页面中的.wxss与.wxml文件由view线程执

    行，.js文件由appServer线程执行。我们利用组件编写界面(UI)代码，以展现页

    面数据或内容视图，这部分代码就保存为页面的

    wxml文件：

    ·微信小程序中的每一个页面的“路径+页面

    名”都需要写在app.json文件里名为pages的配置项

    中，且pages配置项中的第一个页面是小程序的首

    页。

    ·.wxml文件与.wxss文件是小程序开发框架的一

    部分，我们在后面的2.3节详细介绍。2.2.3 为Hello WXapplet添加新页面及示例

    代码

    我们将为Hello WXapplet小程序添加一个新页

    面“demo”，以帮助大家熟悉小程序代码编写步骤。

    1)使用微信Web开发者工具，在“编辑”模式

    下，鼠标置于pages处，选择“+”号添加“目录”，如

    添加一个名为“demo”的目录。如图2-6所示。图2-6 添加目录或文件

    2)我们先为demo页面添加一个视图结构文

    件，即demo.wxml，操作方法与添加目录类似：在

    微信Web开发者工具里，在“编辑”模式下，鼠标置

    于pages下的demo目录处，选择“+”号来添加“文

    件”，如添加demo.wxml文件，将示例代码中相应的

    代码段放入该文件内，并保存。示例的demo.wxml

    代码见程序清单2-9。

    程序清单2-9 页面结构demo.wxml

    demo.wxml

    

    

    switch

    

    

    slider

    

    

    input

    

    

    radio

    

    radio1

    radio2

    

    checkbox

    

    checkbox1

    checkbox2

    

    Submit

    Reset

    上述代码通过使用表单组件，实现demo页面上

    显示表单元素。

    3)接下来为页面添加一个demo.js文件，用作

    demo页面的逻辑处理，例如，我们在demo.js中放

    入如下代码：

    demo.js

    Page({

    formSubmit: function(e) {

    console.log('form发生了submit事件，携带数据为：', e.detail.value) },formReset: function {

    console.log('form发生了reset事件')

    }

    })

    代码实现在控制台上打出用户在demo页面上提

    交的表单数据。

    4)然后，我们需要在app.json中pages配置项中

    添加demo页面，如下所示：

    {

    pages:[

    pagesindexindex,pageslogslogs, 新添加一个demo页面配置

    pagesdemodemo

    ],window:{

    backgroundTextStyle:light,navigationBarBackgroundColor: fff,navigationBarTitleText: WeChat,navigationBarTextStyle:black

    },debug:false

    }

    5)在小程序适当页面的.wxml中添加入口并在该页面的.js文件中添加到新页面的入口。例如，我

    们在index.wxml中添加到demo页面入口展现的代

    码：

    

    

    

    
    cover>

    {{userInfo.nickName}}

    click me!

    添加到demo页面的入口展现并在其上绑定用户的点击事件

    Demo页

    

    {{motto}}

    同时我们要在index.js中添加bindViewDemo事

    件处理逻辑：

    index.js

    获取应用实例

    var app = getApp

    Page({

    data: {

    motto: 'Hello World',userInfo: {}

    }, 事件处理函数 bindViewTap: function {

    wx.navigateTo({

    url: '..logslogs'

    })

    }, 新添加的页面入口导航示例代码

    bindViewDemo: function {

    wx.navigateTo({

    url: '..demodemo'

    })

    }, 事件相应处理

    tapName: function(event) {

    console.log(event)

    },onLoad: function {

    console.log('onLoad')

    var that = this

    调用应用实例的方法获取全局数据

    app.getUserInfo(function(userInfo){

    更新数据

    that.setData({

    userInfo:userInfo

    })

    })

    }

    })

    通过demo页面的编写，我们成功地为Hello

    WXapplet小程序新增加了一个功能页。

    本书中所有的代码示例，均可以类似按上述步

    骤增加demo页面，以便广大读者学习演练。注意 为确保读者熟悉小程序开发过程及

    代码编写，本书的所有示例代码(若有需要)均可

    使用开发者工具在测试项目中演练。演练示例代码

    需要特别注意的是：须区分示例代码的不同代码

    段，要分别对应放在页面的.wxml、.js、.wxss文件

    中，同时需要在适当页面添加入口并在app.json中

    注册该页面。2.3 进一步了解小程序开发框架

    微信团队为小程序提供的框架命名为MINA应

    用框架。MINA框架通过封装微信客户端提供的文

    件系统、网络通信、任务管理、数据安全等基础功

    能，对上层提供一整套JavaScript API，让开发者能

    够非常方便地使用微信客户端提供的各种基础功能

    与能力，快速构建一个应用。2.3.1 MINA框架

    微信小程序框架示意图大致如图2-7所示。

    图2-7 小程序MINA框架示意图通过框架图我们可以看到两大部分：在页面视

    图层，wxml是MINA提供的一套类似于HTML标签

    的语言以及一系列基础组件。开发者使用wxml文件

    来搭建页面的基本视图结构，使用wxss文件来控制

    页面的展现样式。AppService应用逻辑层是MINA

    的服务中心，由微信客户端启用异步线程单独加载

    运行。页面渲染所需的数据、页面交互处理逻辑都

    在AppService中实现。MINA框架中的AppService使

    用JavaScript来编写交互逻辑、网络请求、数据处

    理，但不能使用JavaScript中的DOM操作。小程序

    中的各个页面可以通过AppService实现数据管理、网络通信、应用生命周期管理和页面路由。

    MINA框架为页面组件提供了bindtap、bindtouchstart等事件监听相关的属性，来与AppService中的事件处理函数绑定在一起，实现页

    面向AppService层同步用户交互数据。MINA框架

    同时提供了很多方法将AppService中的数据与页面

    进行单向绑定，当AppService中的数据变更时，会

    主动触发对应页面组件的重新渲染。MINA使用

    Virtual-DOM技术，加快了页面的渲染效率。

    框架的核心是一个响应的数据绑定系统，它让

    数据与视图非常简单地保持同步。当做数据修改的

    时候，只需要在逻辑层修改数据，视图层就会做相

    应的更新。我们通过这个简单的例子来看一下：

    

     Hello {{name}}!

     Click me!

    App Service应用逻辑代码

    初始数据

    var helloData = {

    name: 'WeChat'

    }

    注册页面

    Page({

    data: helloData, changeName: function(e) {

    发送数据主视图层

    this.setData({

    name: 'MINA'

    })

    }

    })

    ·开发者通过框架将AppService应用逻辑层数据

    中的name与页面视图层名为name的变量进行了绑

    定，所以在页面一打开的时候会显示Hello

    WeChat!

    ·当点击按钮“Click me!”的时候，视图层会发

    送名为changeName的tap事件给逻辑层，逻辑层找

    到对应的事件处理函数changeName。

    ·逻辑层changeName函数执行了setData的操

    作，将变量name的值从WeChat变为MINA，因为该

    name变量和视图层已经绑定了，从而视图层会自动

    改变为Hello MINA!微信小程序不仅在底层架构的运行机制上做了

    大量的优化，还在重功能(如page切换、tab切换、多媒体、网络连接等)上使用接近于native的组件

    承载。

    综上所述，微信小程序MINA有着接近原生

    App的运行速度，做了大量的框架层面的优化设

    计，对Android端和iOS端做出了高度一致的呈现，并且准备了完备的开发和调试工具。2.3.2 目录结构

    微信小程序典型的目录结构很简洁，一般在项

    目目录之下，包含2个目录(pages目录与utils目

    录)及3个应用文件(app.js、app.json与

    app.wxss)。pages目录下存放小程序各个展现页

    面，每个页面一个目录，包含2~4个文件

    (.js、.wxml、.wxss及.json文件)。大体如图2-8所

    示。图2-8 小程序典型的目录结构

    pages下包括所需的各个页面目录，utils目录下

    则包含公共的js代码文件。开发者也可以按需创建其他的公共目录，如images目录，存放本地图片资

    源。2.3.3 逻辑层

    顾名思义，逻辑层是事务逻辑处理的地方。对

    于微信小程序而言，逻辑层就是所有.js脚本文件的

    集合。微信小程序在逻辑层将数据进行处理后发送

    给视图层，同时接受视图层的事件反馈。

    微信小程序开发框架的逻辑层是由JavaScript编

    写。在JavaScript的基础上，微信团队做了一些适当

    的修改，以便更高效地开发小程序。主要的修改包

    括：

    ·增加app和page方法，进行程序和页面的注

    册。

    ·提供丰富的API，如扫一扫、支付等微信特有能力。

    ·每个页面有独立的作用域，并提供模块化能

    力。

    逻辑层的实现就是编写各个页面的.js脚本文

    件。

    小程序逻辑层由js编写，但并非运行在浏览器

    中，所以JavaScript在Web中的一些能力都将无法使

    用，比如document、window等，这也给我们开发带

    来相应的挑战。

    我们开发者编写的所有代码最终将会打包成一

    份JavaScript，并在小程序启动的时候运行，直到小

    程序销毁。这类似ServiceWorker或webpack，所以

    逻辑层也称之为App Service。2.3.4 视图层

    框架的视图层由WXML(WeiXin Markup

    language)与WXSS(WeiXin Style Sheet)编写，由组件来进行展示。于微信小程序而言，视图层就

    是所有.wxml文件与.wxss文件的集合：

    ·.wxml文件用于描述页面的结构。

    ·.wxss文件用于描述页面的样式。

    微信小程序在逻辑层将数据进行处理后发送给

    视图层展现出来，同时接受视图层的事件反馈。

    视图层以给定的样式展现数据并反馈事件给逻

    辑层，而数据展现是以组件来进行的。组件

    (Component)是视图的基本组成单元。2.3.5 数据层

    数据层包括临时数据或缓存、文件存储、网络

    存储与调用。

    1.页面临时数据或缓存

    在Page中，我们要使用setData函数来将数

    据从逻辑层发送到视图层，同时改变对应的

    this.data的值。

    注意

    ·this是包含它的函数作为方法被调用时所属的

    对象，在小程序中一般指调用页面。

    ·直接修改this.data无效，无法改变页面的状态，还会造成数据不一致。

    ·单次设置的数据不能超过1024KB，请尽量避

    免一次设置过多的数据。

    setData函数的参数接受一个对象。以

    key，value的形式表示将this.data中的key对应的值

    改变成value。其中key可以非常灵活，包括以数据

    路径的形式给出，如array[2].message，a.b.c.d，并

    且无须在this.data中预先定义。

    2.文件存储(本地存储)

    使用数据API接口，如下所示：

    ·wx.getStorage：获取本地数据缓存。

    ·wx.setStorage：设置本地数据缓存。·wx.clearStorage：清理本地数据缓存。

    3.网络存储或调用

    上传或下载文件API接口，如下：

    ·wx.request：发起网络请求。

    ·wx.uploadFile：上传文件。

    ·wx.downloadFile：下载文件。

    调用URL的API接口，如下：

    ·wx.navigateTo：新窗口打开页面。

    ·wx.redirectTo：原窗口打开页面。2.4 小程序的发布与使用

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

    一旦开发者对小程序项目的编码完成，经调试

    完毕后，就可以进行手机内预览及上传发布。

    1.预览

    小程序的管理员或是开发者可点击Web开发者

    工具左侧“项目”，进入上传预览页面。点击“预

    览”，开发者可用本人微信扫码，在手机内预览小

    程序的效果，如图2-9所示。

    注意 开发工具上的二维码仅限于登录开

    发工具的开发者本人可以扫码并预览，其他人无法扫码预览。请用微信客户端iOS或Android的6.3.27

    及以上版本才可以扫码预览。

    图2-9 预览小程序的效果2.上传代码

    小程序的管理员可点击左侧“项目”，进入上传

    预览页面，使用管理员本人微信号扫码确认上传，如图2-10所示。

    注意 只有管理员有权限可以上传，开发

    者没有权限上传。图2-10 上传小程序代码至微信云端

    代码上传后可在微信公众平台

    (mp.weixin.qq.com)的开发管理页面中看到对应

    提交的版本。3.代码提交审核

    登录微信公众平台小程序，进入开发管理，开

    发版本中展示已上传的代码，管理员可提交审核或

    是删除代码。

    进入“开发版本”详情页，选择提交审核。进

    行“审核信息填写”“绑定测试账号(选填)”以及“配

    置功能页面”。其中：

    ·测试微信账号：是提供给微信审核人员审核

    微信小程序时登录使用的。该测试微信号需能够体

    验小程序的全部功能，因此，请不要使用常用微信

    号。

    ·配置功能页面：是为了用户可以快速搜索出

    小程序。在这里需要填写重要业务页面的类目与标签。重要业务页面组数不多于5组。如图2-11所

    示。

    图2-11 提交审核

    由于大小限制关系，若代码包大小超过

    1024kb，在提交审核时，开发者工具会给出超出大

    小限制的提示，如下所示：上面这条是出错信息，意思是超出了64kb。已

    确认目前最大为1024kb，1088kb-1024kb=64kb。

    提交审核完成后，开发管理页中审核版本模块

    展示审核进度。

    注意 提交审核后，不一定能通过微信团

    队的小程序审核，开发者可参考附录B“微信小程序

    平台常见拒绝情形”，详细了解审核标准。

    4.代码发布

    代码审核通过后，需要开发者手动点击“发

    布”，小程序才会发布到线上提供服务。2.4.2 小程序加载运行

    整个微信小程序发布、用户使用加载的流程示

    意图如图2-12所示。

    小程序通过微信团队审核发布后，会同步到微

    信云端。最终用户通过某个入口，关注到该小程

    序。第一次运行时要经过短暂的代码下载过程(将

    所有资源下载到本地)，即可在用户的微信中运

    行。

    小程序在用户的微信中启动，相当于开启一个

    WebView，这与HTML5不一样，在一定的时间内

    除非手动关闭，即使返回打开另一个小程序，原来

    的小程序也一直以后台的形式运行在内存里，即在

    后台运行。图2-12 小程序发布与运行加载的流程

    小程序的版本更新将在启动时进行。首先与微

    信客户端版本进行对比是否有新版本，若有则小程

    序更新后再运行；否则，直接使用本地资源运行。2.5 深入理解小程序的应用场景

    2.5.1 小程序入口与界面

    1.入口

    最终用户可选择以下4种入口之一进行使用：

    ·扫给定二维码扫描进入。

    ·搜索框中精确或模糊搜索小程序名后点击使

    用。

    ·使用过的小程序，在“微信→发现→小程序”进

    入。Android系统可自定义保存在桌面上(快捷方

    式)。·来自聊天窗口(单聊或群聊)其他朋友的分

    享。

    作为开发者，除上述预测的入口外，还可以通

    过以下2种入口之一进行使用：

    ·在电脑上运行“微信Web开发者工具”→左侧导

    航“调试”，直接模拟使用。

    ·通过“微信Web开发者工具”→左侧导航“项

    目”→使用手机微信扫码进行预览。

    2.界面与操作

    微信小程序的开发是基于统一框架进行的，而

    框架提供了App开发的标准界面模板，因此，小程

    序的界面与操作具有以下特点：·界面开发成本低，速度快。标准的视图层模

    板与组件使得开发快速，极大地节省了小程序

    UI(用户界面)的开发成本。

    ·风格可控。具有相当一致的界面体验，如图2-

    13所示。

    ·操作简单。由于与微信客户端有极其类似的

    操作行为，使得小程序易上手、易操作与使用。

    ·操作性能佳。具有接近原生App的性能。图2-13 风格一致的小程序界面示例

    可见，微信小程序(应用号)在组件和Web之

    间取得了最佳的平衡，保证了应用的一致性和运行

    效率，同时又兼顾了开发的方便性。2.5.2 小程序与HTML 5应用开发的差异

    小程序开发与HTML 5应用(Web App)开发

    有一定的相似性，然而微信团队为小程序定义了新

    的文件格式，提供了微信底层API及基础组件，并

    对小程序的文件代码做编译解析，所以微信小程序

    并不是传统意义的HTML 5页面。具体到写代码

    上，小程序与HTML 5的开发主要区别有以下几

    点。

    1.JavaScript的限制

    通过传入字符串来执行代码的能力都禁用了。

    出于安全考虑，凡是通过传入字符串来执行代码的

    能力都禁用了。具体被禁掉的原生功能有：new

    Function、eval、Generator。这同时也比较有效地避免了类似HTML 5中XSS的问题。禁掉的这些功

    能，对我们开发来说影响比较显著的应该是字符串

    转json，以往我们都是通过new Function、eval来处

    理后台CGI的返回。移动端一般封装在zepto之类的

    框架中，而小程序开发需要改变一下具体实现。

    与浏览器BOM(Browser Object Model，浏览

    器对象模型)相关的API都没有。由于小程序框架

    并非运行在浏览器中，所以JavaScript在Web中的一

    些能力都将无法使用，比如document、window等，但在这些BOM中，对开发影响最大的应该是没有

    cookie。因为其他功能例如storage，在MINA中有类

    似的处理方法，而cookie在Web开发中是与后台登

    录相关的。小程序中是没有cookie的，为了兼容目

    前大部分Web App的登录管理时使用cookie的，小程序在请求发送时，客户端可以动态地给请求设置

    Header发送报文的cookie。实现代码类似于如下代

    码：

    wx.request({

    header: { cookie: ‘xxx’ },url:xxx,data:{},success:function(res){},fail:function(res){}

    });

    注意 cookie本身不能在客户端进行读写。

    因为没有cookie，HTML5中的CSRF(Cross-

    Site Request Forgery，跨站请求伪造)问题在理论

    上是根本解决了。小程序是否存在其他客户端安全

    问题，尚需要技术与时间来检验。

    2.小程序开发相比HTML5的改进优化登录方面：HTML 5中，通过微信授权一般采

    用URL重定向的方式获取代码；在小程序中，通过

    wx.login获取代码，这样避免了之前登录重定向的

    问题。

    存储方面：小程序用storage替代了HTML 5中

    的localstorage、sessionstorage。storage对每个小程

    序的大小是5M，支持同步和异步。

    微信支付路径不再受限。

    3.小程序开发相比HTML5开发不方便的地方

    不方便的地方有明显两点：

    ·每个页面需要手动在app.json中进行注册。如

    果没有注册，是不执行该页面的。·打开的页面有5个限制，在开发时需要注意控

    制打开页面的数量。

    另外，关于微信团队为小程序重新定义的

    WXML文件、WXSS文件的开发编写与传统

    HTML、CSS文件的差异，我们会在后面的章节进

    行对比解析。

    总体而言，微信小程序是一种介于原生App和

    Web App的混合体。通过微信进行加载，实现类似

    原生App的流畅性。相对原生App来说，小程序更

    加轻量、更加实时、跨平台；相对Web App来说，小程序资源离线，体验更流畅。2.5.3 小程序的最佳应用场景

    我们按照用户对服务的使用频度及服务的重要

    级别，将小程序应用场景用四象限划分，如图2-14

    所示。

    图2-14 小程序应用场景象限图基本上，当前市场上70%以上的应用场景均可

    使用小程序来开发。这也应验了：移动互联网时

    代，小程序可以大展身手。特别是刚需、低频场景

    的服务，比如酒店预定、火车票机票预订、招聘、理财、充值、彩票等，最适合使用微信小程序。2.5.4 小程序对企业、开发者的意义与影

    响

    移动互联网时代，小程序的出现，对开发者、企业、组织机构而言，都是重大利好。表现在：

    ·帮助他们发掘移动化的服务场景。天然可以

    使用微信的支付功能，业务闭环更易实现。

    ·跨平台，体验流畅。微信客户端底层封装，完全支持跨iOS与Andriod平台；页面仿原生，体验

    更为流畅。

    ·开发成本低。小程序的开发比HTML5(Web

    App)开发成本还低，且前端资源存入、发布运维

    (联合腾讯云使用)都可集成在微信中。若通读本书，相信读者可以熟练开发出功能实用的小程序。

    移动时代的开发不再有门槛。

    ·用户使用获取成本低。小程序是微信连接生

    态的一环，天然连接8亿以上月活用户；小程序即

    开即用，无下载门槛；而且可以很方便地在微信中

    分享给朋友。要知道，移动互联网时代，不仅是要

    与同类产品竞争，还要与所有产品竞争用户的时

    间。

    当然，小程序也存有一些小小局限，包括：

    ·开发基于微信团队给定的框架，部分功能受

    限，当前不支持现有其他第三方插件。整个生态目

    前也不成熟，语法及调试环境对熟练的开发者反而

    会有阵痛期。·小程序页面只能同时打开5个，对交互流程较

    长的业务场景支持有难度。

    ·当前小程序包大小限制为1M，显然较适合轻

    量级业务。2.5.5 开发者角色与技能要求

    小程序基本的开发主要还是基于JavaScript来做

    逻辑层的开发，用WXML(微信自定义的一个类

    HTML的描述性语言)来做页面布局，用

    WXSS(类CSS，相当于CSS的子集，但也引入了

    一些新特性)来做页面的样式，微信小程序的框

    架，在视图层和逻辑层间提供了数据传输和事件绑

    定的处理，可以很好地保持视图和数据的同步更

    新。所以开发者可以把重心聚焦在数据与逻辑交互

    的实现上。

    小程序这样的开发模式，对于有HTML5开发

    经验的开发者来说，阅读完微信小程序的开发文

    档，就可以比较容易地上手了。但反过来，由于以前HTML5的开发经验，刚刚开始开发微信小程序

    的时候还是会有一些不习惯的地方，比如不能操作

    DOM，没有window变量和方法。

    我们从微信小程序前端开发工程师(工作职

    责：负责微信小程序开发框架日常维护、新特性开

    发)的招聘需求，可以看出熟练进行小程序开发，需要具备的技能要求如下：

    ·精通HTML、CSS和JavaScript，具备框架设计

    能力。

    ·有完整的大型前端项目经验。

    ·精通JavaScript，深入了解过React、Vue等框

    架。·精通Node.js开发。

    ·熟练掌握前端构建工具如grunt、gulp、webpack。

    ·对Web安全有深入理解。

    ·对Chrome远程调试协议有深入了解者更佳。

    ·对Native技术有涉足者更佳。2.5.6 小程序的能与不能

    2016年12月28日，广州举行的“2017微信公开

    课PRO”活动现场，“微信之父”张小龙回顾了小程序

    一年来的发展历程，介绍了微信小程序的产品理

    念，并畅想了未来移动互联网的下一站：应用形态

    以及信息获取将是唾手可得。小程序显然符合这一

    种趋势。

    在全面诠释小程序特性、意义及定位之后，小

    龙特别解答了大家对小程序最关心的八个问题。这

    八个问题会影响小程序开发的初衷与方向，因此我

    们觉得有必要在这里为大家做一些解读。

    第一个问题：小程序的入口在哪里？答案：小程序在微信里是“没有”入口的。

    如同微信公众号一样，没有“关注”(运行)之

    前，它在微信里没有入口。微信倡导的是去中心化

    结构，不会在其中设置专门的入口、分类、排行以

    及推荐。

    小程序真正的入口不在微信里面，而是在二维

    码上，扫一扫即可启动小程序。这要求开发者或者

    服务商要想办法将小程序的二维码铺到尽可能多的

    地方去。

    由于小程序突出使用二维码，微信里面会对于

    线下的店会有一些提示。在目前阶段，微信团队允

    许轻量地让用户能够看到在他附近还有哪些小程序

    存在，即利用LBS可查看到附近有哪些提供服务的店也有小程序，比如在三公里以外有一个士多店，那么用户可以看到并立即打开它的小程序，然后买

    一点什么东西，这是很有可能的。

    第二个问题：是否有类似于小程序商店的地方

    可以下载小程序？

    答案：没有。

    小程序是无需安装的，没有下载过程，所以不

    存在类似应用商店的地方下载小程序。开发者只需

    结合好小程序的使用场景，全力做好小程序的功能

    与服务的实现。

    至于用户如何找到所需的小程序，这就涉及小

    程序的查找或搜索。本书2.4.1节中介绍到小程序的

    代码提交审核发布，其中“配置功能页”填写重要业务页面的类目与标签就非常重要，可以帮助用户快

    速查找或搜索到小程序。

    第三个问题：小程序与订阅号的关系？

    答案：相互独立，小程序是新的形态。

    订阅号会获得订阅用户(即粉丝)的关注，一

    般大家以粉丝数来判断订阅号的价值。但小程序则

    类以于PC互联网时代的网站，用户访问时并不需要

    成为网站的粉丝，因此它只有访问量的概念。所以

    想吸粉的小程序是无效的，真正解决用户需要的优

    秀小程序才会被用户使用与记住。

    第四个问题：小程序能不能推送消息？

    答案：不能。但允许为主动需要后续通知的用户，在严格能力限制的情况下发送模板消息。

    类似PC互联网时代，用户访问一个网站可能会

    留下自己邮件地址，以便服务提供者后续为用户所

    需的服务发送一个邮件，然而这可能会被服务商滥

    用，从而造成用户可能收到很多垃圾邮件。微信小

    程序希望在满足用户主动需要的服务时，避免被滥

    用，提供了非常严格与受限的通知能力。

    第五个问题：小程序能不能分享？

    答案：不能分享的朋友圈，但可以分享到个人

    聊天或群里。

    分享给好友或分享到群里想象空间巨大，这意

    味着群里面的每个人都可以立即启动这个小程序，未来这可能是一种新的协作方式。举一个例子，当把一个投票的小程序发到群里

    的时候，意味着群里面的每个人可以立即启动投

    票，而且每个人可以看到其他人的状态与进展。这

    样基于群共享的群任务，具备每个人的登录状态及

    相互可看，可以想象得到，未来会出现及存在非常

    多的、协作式的小程序服务或功能。

    另外，好友或群里的小程序分享，可以具体到

    小程序的某个页面(即“小程序页”的概念)，这是

    一个生动的、鲜活的数据，用户甚至不需要运行程

    小程序也能看到小程序的表现。比如一个股票的小

    程序，用户可以在某个群里面分享当前所看到的

    0700股票的这一页(小程序页)。群里面的人看到

    的也是0700这个股票的小程序页，它是一个鲜活的

    数据，是分享用户当前看的信息。这种协作式的任务，将会对小程序的应用起到很大的帮助，我们可

    以在里面构思出非常多的需要群组一起完成任务的

    小程序。这样的分享与协作，非常令人期待。

    第六个问题：小程序能不能做游戏？

    答案：现在暂时不能。

    小程序是微信生态中非常具有想像空间的一

    环，其实并不排除未来会出现基于小程序的特殊形

    态的“游戏”。

    第七个问题：小程序能不能被搜索到？

    答案：可以。

    用户能搜到小程序，但是会极力限制微信里搜

    索小程序的能力，避免它滥用，尽可能让用户在微信里面能够搜索得到他所需要的小程序。

    第八个问题：小程序和公众号的关系是怎么样

    的？

    答案：没有关系，相互独立。

    当然，若公众号与小程序为同一企业开发的，那么可以通过查询开发商而知晓其开发的小程序或

    者其拥有的公众号，这可能是小程序与公众号仅有

    的关联关系。即：在某个公众号里面可看到开发该

    公众号的同一个企业还做了哪些小程序，或者在某

    个小程序里面也可以看到，做该小程序的企业还做

    了哪些公众号，他们是可以互相跳的。

    最后，在“2017微信公开课PRO”活动现场，微

    信团队还提述了微信小程序的七大能力：·线下扫码：用户可以在小程序中使用“扫一

    扫”功能。

    ·对话分享：用户可以分享小程序或其中的任

    何一个页面给好友或群聊。

    ·消息通知：商户可以发送模板消息给接受过

    服务的用户，用户可以在小程序内联系客服，支持

    文字和图片。

    ·小程序切换：用户可以在使用小程序的过程

    中快速返回聊天。

    ·历史列表：用户使用过的小程序会被放入列

    表，方便下次使用。

    ·公众号关联：微信小程序可与公众号进行关联。

    ·搜索查找：用户可直接根据名称或品牌搜索

    小程序。

    上面的七大能力中在前面已经解读了大多数，我们再补充解读一下“小程序切换”与“历史列表”。

    “小程序切换”指小程序运行是全屏的，界面其

    实很像一个单独的APP，但进入之后不会打断聊

    天，而且再次进入时，就是之前离开时的页面。特

    别是在安卓上面，就是一个小小的程序在运行，而

    且可同时运行多个，并相互切换。

    “历史列表”指用户启动或使用过的小程序会放

    入微信会话列表，与公众号关注了一样，可以方便

    下次使用或查找。让我们朝移动互联网的下一站出发。第3章 小程序开发基础

    本章将按照小程序框架的构成，阐述小程序开

    发所需的基础知识，包括配置、函数方法、语言与

    语法、事件及其处理、模块、数据绑定、样式展现

    等。这部分内容对小程序开发者而言，是必须掌握

    的部分。3.1 配置

    3.1.1 全局配置~app.json

    微信小程序的全局配置保存在app.json文件

    中。开发者通过使用app.json来配置页面文件

    (pages)的路径、窗口(window)表现、设定网

    络超时时间值(networkTimeout)以及配置多个切

    换页(tarBar)等。

    程序清单3-1是一个典型的全局配置app.json文

    件内容。

    程序清单3-1 全局配置app.json

    {

    pages: [

    pagesindexindex, pageslogsindex

    ],window: {

    navigationBarTitleText: Demo

    },tabBar: {

    list: [{

    pagePath: pagesindexindex,text: 首页

    }, {

    pagePath: pageslogslogs,text: 日志

    }]

    },networkTimeout: {

    request: 10000,downloadFile: 10000

    },debug: true

    }

    从上面文件内容可以看到，app.json中的全局

    配置项并不多。但每个配置项的数据类型并不相

    同，也并非都是必需的。表3-1列出了各全局配置

    项的相关描述。

    表3-1 全局配置项及其描述1.pages配置项

    pages配置项接受一个数组，用来指定小程序

    由哪些页面组成，是必需的配置项。数组的每一项

    都是字符串，代表对应页面的“路径+文件名”信

    息。

    pages配置项要注意三点：

    1)数组的第一项用于设定小程序的初始页

    面，即小程序启动页。

    2)小程序中新增减少页面，都需要对pages数

    组进行修改。3)文件名不需要写文件后缀。小程序框架会

    自动去寻找路径.json、.js、.wxml、.wxss这四类文

    件进行整合。

    举例如下，假定我们的开发目录与文件列表如

    下：

    pages

    pagesindexindex.wxml

    pagesindexindex.js

    pagesindexindex.wxss

    pageslogslogs.wxml

    pageslogslogs.js

    app.js

    app.json

    app.wxss

    那么，只需要在app.json中写入如下pages的配

    置即可：

    {

    pages:[

    pagesindexindex

    pageslogslogs

    ]

    }2.window配置项

    window配置项接受对象值，用来设置小程序的

    状态栏、导航条、标题、窗口等对象的颜色、背景

    色、内容属性，非必填配置项。没有配置时将使用

    默认值。window可配置的对象参见表3-2。

    表3-2 window配置项及其描述

    注：HexColor为十六进制颜色值类型，如“ff00ff”。

    举例如下，我们在app.json中设置如下window

    配置项：{

    window:{

    navigationBarBackgroundColor: ffffff,navigationBarTextStyle: black,navigationBarTitleText: 微信接口功能演示,backgroundColor: eeeeee,backgroundTextStyle: light

    }

    }

    则小程序的界面效果如图3-1所示。图3-1 配置window项后的界面效果

    3.tabBar配置项

    小程序可以是多标签页切换的应用，这种情况下，就需要通过tabBar配置项来指定标签页的表

    现，及标签页切换时所显示的对应页面，参见表3-

    3。

    表3-3 tabBar配置项及其描述

    tabBar配置项接受多个对象的设定，其中的对

    象list(列表)是一个数组，用于配置标签页。

    注意 只能配置最少2个、最多5个标签

    页。标签页按数组的顺序排序。

    list(列表)接受数组值，数组中的每一项也都是一个对象。对象的数据值说明如下：

    例如，某小程序设置了2个标签页，代码如

    下：

    {

    tabBar: {

    color:dddddd,selectedColor:3cc51f,borderStyle:black,backgroundColor:ffffff,list: [{

    pagePath: pagescomponents ,iconPath: pagesimagescomponents.png,selectedIconPath: pagesimagescomponentsHL.png,text: 组件

    }, {

    pagePath: pagesinterface,iconPath: pagesimagesinterface.png,selectedIconPath: pagesimagesinterfaceHL.png,text: 接口

    }]

    }

    }

    界面效果大致如图3-2所示。图3-2 配置tabBar项后的界面效果

    4.networkTimeout配置项

    networkTimeout配置项用于设置各种网络请求

    对象的超时时间，非必须配置项。可设置的网络请

    求超时的相关对象有request、connectSocket、uploadFile、downloadFile。超时的单位均为毫秒。

    这些超时若不设置，则默认使用操作系统内核或遵

    循服务器WebServer的设定值。具体说明参见表3-4。

    表3-4 networkTimeout配置项及其描述

    比如，为提高网络响应效率，我们可以在

    app.json中使用下列超时设置：

    {

    networkTimeout: {

    request:30000,connectSocket:30000,uploadFile:30000,downloadFile:30000

    }

    }

    5.debug配置项

    debug配置项用于开启开发者工具的调试模

    式，它接受一个boolean值(默认值是false)。开启后，页面(page)的注册、页面路由、数据更新、事件触发等调试信息将以info的形式，输出在“调

    试”功能的console(控制台)面板上。

    比如，以下配置为打开调试模式：

    {

    debug: true

    }

    这时候我们在“调试”功能下重启小程序，在

    Console页面上可以看到更多的信息，如图3-3所

    示。图3-3 “调试”小程序时的控制台信息输出

    毫无疑问，这对开发者快速定位一些常见问题

    很有帮助。但请注意：在正式发布时应当关闭此配

    置项开关。3.1.2 页面配置~page.json

    除了全局的app.json配置外，还可以.json文件

    对小程序项目中的每一个页面进行配置，但只能设

    置本页面的窗口表现。也就是说，页面.json文件配

    置比app.json配置简单得多，只能设置window配置

    项的内容。显然页面.json文件中的window配置值将

    覆盖app.json中的配置值。

    页面.json文件只能设置window配置项，以决定

    本页面的窗口表现，所以配置中也无需写window这

    个键值。页面window配置项可设置的对象参见表3-

    2。下面是一个典型的页面.json文件内容：

    {

    navigationBarBackgroundColor: ffffff,navigationBarTextStyle: black,navigationBarTitleText: 微信接口功能演示, backgroundColor: eeeeee,backgroundTextStyle: light

    }3.2 逻辑层

    逻辑层，顾名思义，是事务逻辑处理的地方。

    对于微信小程序而言，逻辑层就是所有.js脚本文件

    的集合。微信小程序在逻辑层将数据进行处理后发

    送给视图层，同时接受视图层的事件反馈。

    微信小程序开发框架的逻辑层是由JavaScript编

    写。在JavaScript的基础上，微信团队做了一些适当

    地修改，以便更高效地开发小程序。主要的修改包

    括：

    ·增加App和Page方法，进行程序和页面的注

    册。

    ·增加getApp和getCurrentPage方法，分别用于获取App实例和当前页面。

    ·提供丰富的API，如扫一扫、支付等微信特有

    能力。

    ·每个页面有独立的作用域，并提供模块化能

    力。

    但同时，由于框架并非运行在浏览器中，所以

    JavaScript在Web中的一些能力都将无法使用，比如

    document、window等，这也给开发带来相应的挑

    战。

    逻辑层的实现就是编写各个页面的.js脚本文

    件。开发者编写的所有代码最终将会打包成一份

    JavaScript，并在小程序启动的时候运行，直到小程

    序销毁。类似ServiceWorker，所以逻辑层也称为App Service。3.2.1 注册程序~App方法

    在逻辑层，App方法用来注册一个小程

    序。App接受一个object参数，用于指定小程序

    的生命周期函数等。App方法有且仅有一个，存在于app.js中。object参数说明参见表3-5。

    表3-5 App的object参数及其描述

    注意 onLaunch函数全局只触发一次。

    前台、后台：用户当前界面运行或操作小程序时为前台；当用户点击左上角关闭，或者按了设备

    Home键离开微信，小程序并没有直接销毁，而是

    进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

    销毁：只有当小程序进入后台一定时间，或者

    系统资源占用过高，才会被真正销毁。此时代表小

    程序的生命周期结束。

    示例代码如下：

    App({

    onLaunch: function {

    启动时执行的初始化工作

    },onShow: function {

    小程序进入前台时执行的操作

    },onHide: function {

    小程序进入后台时执行的操作

    },onError: function(msg) {

    console.log(msg)

    },globalData: 'I am global data'

    })微信团队为开发者提供了全局的getApp函

    数，可以用来获取小程序实例。使用getApp函

    数的示例代码如下：

    other.js

    var appInstance = getApp

    console.log(appInstance.globalData) I am global data

    注意

    ·App方法须在app.js中注册，且不能注册

    多个。

    ·不要在定义App内的函数中调用

    getApp，使用this就可以拿到App实例。

    ·通过getApp获取实例之后，不要私自调

    用生命周期函数(如onLaunch、onShow、onHide

    等)。3.2.2 注册页面~Page方法

    在逻辑层，Page方法用来注册一个页面。

    Page接受一个object参数，用于指定页面的初

    始数据、生命周期函数、事件处理函数等。

    Page方法，每个页面有且仅有一个，存在于该

    页面的.js文件中。object参数说明参见表3-6。

    表3-6 Page的object参数及其描述

    Page方法示例代码如下： index.js

    Page({

    data: {

    text: This is page data.

    },onLoad: function(options) {

    页面加载时的初始化操作

    },onReady: function {

    页面初次渲染完成时执行的操作

    },onShow: function {

    页面显示时执行的操作

    },onHide: function {

    页面隐藏时执行的操作

    },onUnload: function {

    页面卸载关闭时执行的操作

    },onPullDownRefresh: function {

    用户在页面下拉时执行的操作

    },onReachBottom: function {

    到达页面底部时执行的操作

    },onReachBottom: function {

    到达页面底部时执行的操作

    },onShareAppMessage: function {

    用户分享时返回定制的分享数据

    }, 事件处理

    viewTap: function {

    this.setData({

    text: 'Set some data for updating view.'

    })

    }

    })

    同样，微信团队为开发者提供了getCurrentPage函数，用来获取当前页面的实

    例。

    注意 不要在App中进行onLaunch操作

    的时候调用getCurrentPage，此时page还没有生

    成。

    1.初始化数据

    初始化数据将作为页面的第一次渲染。对象

    data将会以JSON的形式由逻辑层传至视图层，所以

    其数据必须是可以转成JSON的格式：字符串、数

    字、布尔值、对象、数组。

    视图层可以通过WXML对数据进行绑定。关于

    视图层及WXML内容可参考后面3.3节“视图层开发

    详解”。示例代码如下：

    

    渲染page的数据

    {{text}}

    {{array[0].msg}}

    page.js

    page中的初始化数据data

    Page({

    data: {

    text: 'init data',array: [{msg: '1'}, {msg: '2'}]

    }

    })

    2.生命周期函数使用介绍

    生命周期函数包括onLoad、onShow、onReady、onHide、onUnload，下面分别介绍。

    onLoad是页面加载时执行的初始化操作：

    ·一个页面只会调用一次。

    ·参数可以获取wx.navigateTo和wx.redirectTo及中的query。

    onShow是页面显示时执行的操作。每次打开

    页面都会调用一次。

    onReady是页面初次渲染完成时执行的操作：

    ·一个页面只会调用一次，代表页面已经准备

    妥当，可以和视图层进行交互。

    ·对页面的设置(如wx.setNavigationBarTitle)

    请在onReady之后设置。

    onHide是页面隐藏时执行的操作。当

    navigateTo或底部进行tab切换时调用。

    onUnload是页面卸载时执行的操作。当进行

    redirectTo或navigateBack操作的时候调用。3.页面相关事件处理函数

    onPullDownRefresh是下拉刷新时执行的操作，例如：

    ·监听用户下拉刷新事件。

    ·需要在页面.json文件的window配置项中开启

    enablePullDownRefresh。

    ·当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉

    刷新。

    onShareAppMessage是用户分享时返回定制的

    分享内容：

    ·只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮。

    ·用户点击分享按钮的时候会调用。

    ·此事件需要return一个Object，用于自定义分

    享内容。

    onShareAppMessage自定义分享字段如下：

    onShareAppMessage示例代码如下：

    Page({

    onShareAppMessage: function {

    return {

    title: '自定义分享标题',path: 'pageuser?id=123'

    }

    }

    })

    4.事件处理函数除了初始化数据和生命周期函数，Page方

    法中还可以定义一些特殊的函数：事件处理函数。

    我们可在视图层通过对组件加入事件绑定，当满足

    触发事件时，就会执行Page中定义的事件处理

    函数。

    示例代码如下：

    

    绑定tap事件到view组件上，处理事件的函数名为viewTap

     click me

    page.js

    Page({

    定义一个viewTap事件处理函数

    viewTap: function {

    console.log('view tap')

    }

    })

    5.页面数据设置及展现

    在Page中，我们要使用setData函数来将数

    据从逻辑层发送到视图层，同时改变对应的this.data的值。

    注意

    ·this是包含它的函数作为方法被调用时所属的

    对象，在小程序中一般指调用页面。

    ·直接修改this.data无效，无法改变页面的状

    态，还会造成数据不一致。

    ·单次设置的数据不能超过1024KB，请尽量避

    免一次设置过多的数据。

    setData函数的参数接受一个对象。

    以“key，value”的形式表示将this.data中的key对应

    的值改变成value。其中key可以非常灵活，包括以

    数据路径的形式给出，如array[2].message，a.b.c.d，并且无须在this.data中预先定义。

    示例代码如下：

    

    {{text}}

     Change normal data

    {{array[0].text}}

     Change Array data

    {{obj.text}}

     Change Object data

    {{newField.text}}

     Add new data

    index.js

    Page({

    data: {

    text: 'init data',array: [{text: 'init data'}],object: {

    text: 'init data'

    }

    },changeText: function {

    这样设置this.data.text = 'changed data'是不行的，会出错

    this.setData({

    text: 'changed data'

    })

    },changeItemInArray: function {

    可以这样使用setData以修改动态的数据路径

    this.setData({

    'array[0].text':'changed data'

    })

    },changeItemInObject: function{

    this.setData({

    'object.text': 'changed data'

    });

    }, addNewField: function {

    this.setData({

    'newField.text': 'new data'

    })

    }

    })

    6.页面栈及其实例获取

    框架以栈的形式维护了当前的所有页面。当发

    生路由切换的时候，页面栈的表现如下：

    getCurrentPages函数用于获取当前页面栈

    的实例，以数组形式按栈的顺序给出，第一个元素

    为首页，最后一个元素为当前页面。

    注意 不要尝试修改页面栈，会导致路由

    以及页面状态错误。7.理解页面的生命周期

    (以下内容读者不需要立马完全弄明白，不过

    以后会有用。)

    图3-4说明了Page与实例的生命周期。图3-4 Page与实例的生命周期

    从图中可以看到，左边是视图层(.wxml

    与.wxss文件)，右边是逻辑层(.js文件)。页面初

    始化后，在整个生命周期中持续进行相应的业务数

    据准备、数据展现及响应事件处理、数据保存等，直到页面卸载。

    8.页面的路由

    在小程序中，所有页面的路由全部由框架进行

    管理，对于路由的触发方式以及页面生命周期函数

    参见表3-7。

    表3-7 路由的触发方式与页面生命周期3.2.3 模块及调用

    1.文件作用域

    在页面的JavaScript(.js)脚本文件中声明的变

    量和函数只在该文件中有效；不同的文件中可以声

    明相同名字的变量和函数，不会互相影响。

    通过全局函数getApp可以获取全局的应用

    实例，如果需要全局的数据可以在App中设

    置，例如：

    app.js

    App({

    globalData: 1

    })

    a.js

    变量localValue只在a.js文件中有效

    var localValue = 'a'

    获取App实例

    var app = getApp

    获取全局数据值并修改

    app.globalData++

    b.js 可以在b.js文件中重新定义变量localValue,这并不会影响a.js文件中的localValue

    var localValue = 'b'

    若a.js在b.js运行,那么这里的globalData就应是2

    console.log(getApp.globalData)

    2.模块化

    我们可以将一些公共的代码抽离成为一个单独

    的js脚本文件，作为一个模块。

    注意 模块只有通过module.exports才能对

    外暴露接口以供其他.js文件引入使用。

    示例代码如下：

    common.js

    function sayHello(name) {

    console.log('Hello ' + name + '!')

    }

    module.exports = {

    sayHello: sayHello

    }

    在需要使用这些模块的.js文件中，使用require(path)将公共代码引入。

    示例代码如下：

    call.js

    var common = require('common.js')

    Page({

    helloMINA: function {

    common.sayHello('MINA')

    }

    })3.2.4 微信原生API

    小程序开发框架提供了非常丰富的微信原生

    API，可以方便我们调取微信提供的能力，如获取

    用户信息、本地存储、支付功能等。

    微信原生的API共有八大类：网络API、媒体

    API、文件API、数据缓存API、位置API、设备

    API、界面API以及微信开放接口。

    在使用这些微信原生API之前，我们先看看注

    意事项：

    ·wx.on开头的API是监听某个事件发生的API接

    口，接受一个回调(CALLBACK)函数作为参

    数。当该事件触发时，会调用该回调函数。·如未特殊约定，其他API接口都接受一个

    OBJECT作为参数。

    ·object中可以指定success、fail、complete来接

    收接口调用结果(见下表)。

    我们这里先简单介绍一下微信原生API列表名

    称及主要用途，参见表3-8。

    表3-8 微信原生API及其描述注：表中所列API会随着开发工具的升级而更

    新，请关注工具的更新日志提醒。

    每个接口的详细使用方法及示例代码，可参考

    本书第5章“微信API接口的开发应用”。3.3 视图层

    框架的视图层由WXML(WeiXin Markup

    language)与WXSS(WeiXin Style Sheet)编写，由组件来进行展示。对于微信小程序而言，视图层

    就是所有.wxml文件与.wxss文件的集合。

    微信小程序在逻辑层将数据进行处理后发送给

    视图层展现出来，同时接受视图层的事件反馈。

    ·.wxml文件用于描述页面的结构。

    ·.wxss文件用于描述页面的样式。

    视图层以给定的样式展现数据并将事件反馈给

    逻辑层，而数据展现是以组件来进行的。组件(Component)是视图的基本组成单元，是构

    建.wxml文件必不可少的。

    对于小程序的WXML编码开发，我们基本上可

    认为就是使用组件、结合事件系统，构建页面结构

    的过程。.wxml文件中所绑定的数据，均来自于对

    应页面的.js文件中Page方法的data对象。3.3.1 WXML详解

    WXML是框架设计的一套类似HTML的标签语

    言，结合基础组件、事件系统，可以构建出页面的

    结构，即.wxml文件。

    .wxml文件第一行建议写

    

    

    {{index + 1}}. {{log}}

    上述代码，我们通过组件控制页面内容

    展现，通过组件与组件实现页面数据

    的绑定。注意 关于WXML中可供使用的组件及其

    使用方法与注意事项、示例代码，我们将会在第4

    章“框架组件的开发应用”中详细介绍。

    WXML具有数据绑定、列表渲染、条件渲染、模板及事件绑定的能力。下面我们通过一些简单的

    例子来感受一下WXML的这些能力：

    1)数据绑定：

    

     {{message}}

    page.js

    Page({

    data: {

    message: 'Hello MINA!'

    }

    })

    上例中，在.wxml文件中绑定message变量，在.js文件的data对象中给message赋值“HelloMINA!”。

    2)列表渲染：

    

     {{item}}

    page.js

    Page({

    data: {

    array: [1, 2, 3, 4, 5]

    }

    })

    3)条件渲染：

    

     WEBVIEW

     APP

     MINA

    page.js

    Page({

    data: {

    view: 'MINA'

    }

    })

    4)模板：