第1章
初识小程序

2016年9月21日，微信团队发布了微信公众平台·小程序的内测邀请函。此消息发布后，立刻在互联网从业人员群体中引起轩然大波。按照微信团队的说法，微信公众平台提供一种新的开放能力，使得开发者可以快速开发一个小程序。这种类似于React Native的应用，提供了比HTML 5更出色的使用体验，开发成本却与HTML 5相差无几，难怪业界对是否需要开发App产生了质疑。这将对移动互联网时代的移动应用开发带来颠覆性的影响。

1.1　小程序是什么

按照微信之父张小龙的定义，小程序是一种不需要下载安装即可使用的应用。小程序实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。同时，体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无须安装卸载。

微信团队原计划称之为微信应用（App）号，不过由于Apple App Store的审核规则不允许包含应用分发、应用推荐，因此微信团队将之称为“小程序”。

1.1.1　小程序的优点

使用方便： 无须下载，打开即用，用完即走。

开发简单： 小程序开发过程的本质是在MVVM风格的JavaScript框架上开发，有前端经验的程序员可以无缝衔接，无经验的“小白”也可以快速入门。

跨平台运行： 不用再分别开发iOS和Android版本，只需发布到微信小程序平台，所有平台都可用。

快速分发与迭代： 无须关心各种发布渠道，也无须担心旧版本升级和兼容问题。

1.1.2　小程序的开放能力

微信以框架、组件和API的形式开放了如下服务和支撑能力。

• 视图容器：视图容器、可滚动视图容器、滑块视图容器。
• 基础内容：图标、文本、进度条。
• 表单组件：按钮、表单、输入框、多项选择器、单项选择器、列表选择器、内嵌列表选择器、滚动选择器、开关选择器、标签等。
• 操作反馈：底部菜单、模态弹窗、消息提示框、加载提示符。
• 导航：页面跳转与应用链接。
• 媒体组件：音频、图片、视频。
• 地图：地图map。
• 画布：画布canvas。
• 客服会话：进入客服会话按钮。
• 文件操作：保存文件到本地、获取本地已保存的文件列表、获取本地文件的文件信息、删除本地存储的文件、打开（预览）文档。
• 网络：发起请求、上传、下载、WebSocket。
• 媒体：图片、录音、音频、视频。
• 文件：保存文件、删除文件、打开文档。
• 数据缓存：存储数据、读取数据、删除数据、清除数据。
• 位置：获取位置、查看位置、地图组件控制。
• 设备：系统信息、网络状态、重力感应、罗盘、拨打电话、扫码。
• 界面：交互反馈、设置导航条、导航、动画、绘图、下拉刷新。
• 开放接口：登录、用户信息、微信支付、模板消息、客服消息、分享、获取二维码。

1.1.3　小程序的前景

上程序刚上线时，主要的打开方式主要有以下3种：

（1）线下扫码。

（2）主动搜索。

（3）好友分享。

主动搜索和好友分享带来的流量有限，线下扫描二维码无疑成为不错的导流渠道。微信对小程序寄予厚望，在2017年3月27日，小程序发布重大更新，新增如下打开方式：

（1）公众号自定义菜单，点击可打开相关小程序。

（2）公众号模版消息，可打开相关小程序。

（3）移动App，可分享小程序页面。

（4）扫描普通链接二维码，可打开小程序。

这些入口增强了订阅号、服务号、移动App与小程序之间的联系，扩展了小程序的使用场景。

试想以下几个场景：

汽车站扫码可以买票，不用排队。

餐厅扫码可以点菜。

年会扫一扫抽奖。

扫一扫知道快递到哪了。

查公积金、车辆违章等。

没有小程序之前路径是这样的：

用户需要服务→搜索服务→下载App→注册→使用。

小程序提供了更短的路径：

用户需要服务→扫码即用。

如果能在这些场景里找到合适的切入点为用户提供服务，那么小程序就能发挥其长尾效果，在大量垂直领域和线下场景实现商家与顾客、产品与用户的双赢。

按照“可能吧”和“有可能学院”创始人阿禅的说法，小程序是一个生态，这个生态希望连接更多线下场景。生态里出现的产品分为3个阶段：

（1）摸索与搬迁阶段。

（2）工具阶段。

（3）场景化阶段。

每个阶段都会有新业务、功能、服务和场景出现。人们慢慢发现，小程序像微信公众号一样成为标配了，也像水电一样成为基础设施而无处不在。

1.2　小程序开发文档与开发工具

小程序开发文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/。

1.2.1　小程序开发文档

文档共分6类，如图1-1所示。

图1-1

简易教程提供了一个Hello World微信小程序教程，从获取微信小程序的AppID、用微信Web开发者工具创建项目、编写代码到手机预览，一步一步创建完成一个微信小程序，并可以在手机上体验该小程序的实际效果。这个小程序的首页将会显示欢迎语和当前用户的微信头像、点击头像，可以在新打开的页面中查看当前小程序的启动日志。该分类下体验小程序页面提供组件和接口体验的方法，更新日志显示基础库和开发工具最近的更新历史。

框架讲解小程序MINA框架的知识，包括目录结构、配置、逻辑层和视图层。

组件介绍小程序的一系列基础组件，包括视图容器、基础内容、表单组件、导航、媒体组件、地图、画布、客服会话等。

API介绍框架提供的微信原生API，包括网络、媒体、文件、数据缓存、位置、设置、界面和开放接口等。

工具介绍微信Web开发者工具的使用方法，包括模拟器使用、代码编辑、调试工具、项目预览等。

Q&A列举常见问题的解答，读者遇到一些莫名其妙的问题可以先在这里找答案。此分类下还有开发者社区的入口。

1.2.2　微信Web开发者工具

1．下载

在浏览器中打开网址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html，即可进入开发工具下载页。或者单击导航栏的“工具”→“下载”进入下载页，如图1-2所示。

图1-2

一般情况下，Windows XP系统选择Windows 32版本，Windows 7\8\10及以上选择Windows 64版本，Mac电脑选择Mac版本。

安装之后，用微信扫码即可进入。

2．添加／打开项目

微信扫码后，即可进入项目选择界面，如图1-3所示。

这时可以选择添加项目，或者选择已经创建的项目。这里我们选择添加项目，如图1-4所示。

图1-3

图1-4

登录https://mp.weixin.qq.com，可以在网站的“设置”→“开发者设置”中查看微信小程序的AppID，如图1-5所示。

图1-5

开发阶段可以不填AppID，所以这里选择“无AppID”。选择后，AppID文本框会显示“无AppID部分功能受限”。不过不影响后续开发。

单击“添加项目”，进入开发界面，如图1-6所示。

图1-6

这是小程序的默认DEMO：Hello World。

我们需要通过开发者工具完成小程序创建和代码编辑。

1.2.3　开发工具Tips

官方文档给出了完整的开发工具介绍，文档地址为：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html

文档包含调试、代码编辑及程序发布等功能的介绍。本节不再赘述，仅以问答的形式对文档缺失的部分进行补充。

（1）如何保存文件？

编辑文件后，未保存的文件Tab后会有圆点。Windows用户按Ctrl+S，Mac用户按Command+S保存。保存成功后圆点消失，如图1-7所示。

图1-7

（2）程序修改后如何刷新页面？

可以在“项目”页设置自动刷新，如图1-8所示。

图1-8

在“编辑”模式下，也可以单击“编译”手动刷新。

（3）AppData有什么用？

开发工具提供查看页面data数据的功能。在1.4节的例子中，页面data有一个属性为result。游戏未开始时，result的数据如图1-9所示。

图1-9

游戏结束后，result的数据如图1-10所示。

图1-10

AppData是调试程序的利器，在此处编辑数据能及时反馈到界面上，而且界面上的内容能够实时更新到调试信息里。读者可以充分利用此功能调试程序。

（4）“前台”“后台”操作有什么作用？

微信首先是一个聊天工具，消息具有最高的优先级。当新消息到来时，用户返回聊天页面，这时小程序优先级会下降，处于后台执行中。点击“前台”可切换到前台模式。比如小程序正在播放音乐或视频，进入后台就会中断；返回前台后，播放进度会保留，但需要重新点击播放按钮才能继续播放，如图1-11所示。

图1-11

（5）“调试”页面的Sensor Tab有什么作用？

“调试”页面的Sensor Tab用来模拟地理位置调试重力感应API，如图1-12所示。

图1-12

（6）调试工具的Wxml Pannel和Sources Pannel有什么区别？

Wxml Pannel展示的是源代码中的wxml文件，可以在此处写样式表调试页面，如图1-13所示。

图1-13

Sources Pannel展示的是编译后的HTML代码，可以在此处打断点调试js程序，如图1-14所示。

图1-14

1.3　大事记

2016年1月，微信团队提到，微信将在订阅号和服务号的基础上推出应用号。

2016年9月21日，微信团队发布微信公众平台·小程序的内测邀请函，并确定应用号改名为小程序。

2016年9月22日凌晨，“微信公开课”公众号推送名为《这次我们邀请你来做一个小程序》的文章，标志着微信小程序正式开始内测。

2016年9月25日，微信团队开放小程序开发文档、设计指南、开发者工具，供无内测资格的开发者使用。

2016年11月3日，微信团队正式开放小程序公测，开放注册范围是企业、政府、媒体和其他组织。暂不支持个人注册。

2016年12月21日，微信小程序进行大规模升级，增加分享和扫描二维码等重要功能。

2017年1月9日，微信小程序正式发布。至此，微信团队花费一年多时间的产品终于面世了。选在1月9日发布是因为10年前的今天（2007年1月9日），苹果公司发布iPhone。iPhone的发布标志着智能手机的诞生，而小程序的发布标志着移动开发的另一片蓝海正式开辟。

2017年3月27日，小程序新增七大新能力：个人开发者开放、公众号自定义菜单跳小程序、公众号模板消息可打开相关小程序、模板消息跳小程序、绑定时可发送模板消息、兼容线下二维码、App分享用小程序打开。这些能力更新扩展了小程序的使用人群，扩大了小程序的使用场景，标志着小程序从此和公众号一样成为移动开发领域的水和电。

1.4　“一秒钟有多长”小游戏

经过1.2节的学习，读者应该已经下载安装了微信Web开发者工具，并且了解了常用的操作。本节开发一个名为“一秒钟有多长”的小程序，带领大家领略一下小程序的开发流程。

1.4.1　游戏规则

你能精确按出一秒钟吗？用手指按住屏幕，感觉一秒钟到了松开，看看是否为精确的一秒钟。

游戏的操作规则是：

用户手指放到圆形按钮上，触发touchstart事件，此时记下开始时间start_time。

用户手指离开圆形按钮时，触发touchend事件，此时记下结束时间end_time。

计算用户操作圆形按钮的时间差，与一秒钟相比较，根据不同的误差显示不同的文案。游戏界面如图1-15所示。

图1-15

1.4.2　下载与运行

本DEMO可以在weixinbook.net网站免费下载，下载后将ch01/1sec解压到本地目录。

打开微信Web开发者工具，单击“添加项目”，进入“添加项目”页面，如图1-16所示。

图1-16

AppID选择“无AppID”，项目名称填写“1sec”（也可以随意填写），项目目录选择上述解压目录，单击“添加项目”即可打开，如图1-17所示。

图1-17

此后如无特殊说明，各章节的示例程序都可以用这种方法打开。

下面用小程序开发工具实现这个小游戏，领略移动端开发的最新技术。

1.4.3　界面、样式与脚本

游戏界面如图1-17所示，页面顶部是文本形式的游戏介绍：

一秒钟有多长？

你能精确地按出一秒钟吗？

中间是玩法介绍：

拇指放在圆圈上。

Ready? Go!

底部是一个橘色圆形按钮。

    源码pages/index/index.wxml

{{result}}的数据来自对应Page的data。

catchtouchstart与catchtouchend分别绑定touchstart和touchend事件的处理函数。icon标签展示一个橘色的圆。

对应的样式文件如下：

    源码pages/index/index .wxss

JS脚本

catchtouchstart与catchtouchend分别绑定touchstart和touchend事件的处理函数。前者是一个触摸事件的起始事件，后者是该触摸事件的结束事件。

在touchstart事件里，记录开始时间start_time。

在touchend事件里，记录结束时间end_time。

计算start_time与end_time之间的时间差，与一秒钟相比较，根据不同的误差显示不同的文案（见表1-1）。

表1-1　文案

    源码pages/index/index.js

第34到36行显示文案的操作如下：

通过操作data属性的result字段改变{{result}}里的显示内容。

综上所述，我们用小程序框架实现了一个“一秒钟有多长”小游戏。这个框架类似于React Native和Vue.js等非常流行的移动网页开发MVVM类型的框架，我们将在第2章详细讲解这个框架。

1.5　小结

本章介绍了微信小程序的定义、优点、前景等基本信息，以及微信开发文档和微信Web开发者工具的使用，开发了一个名为“一秒钟有多长”的小游戏DEMO。经过本章的学习，读者想必已经掌握了开发工具的使用，并知道如何开始开发一个小程序，这将为后面的框架学习打下坚实基础。 wWRCHvNCmpRh6DwvF5Q1XPNlRE6jaT59XAa1H8VbrO7PY81Fm+97vHlqtg438Waa