作者：王延平
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
21天精通微信小程序开发试读：
前言
个人移动终端的轻应用时代已悄然来临。
微信小程序，一种依托微信轻应用理念的产品，尚未面世就掀起了一轮一轮的讨论热潮：微信的野心在哪里？小程序能做什么？开发者怎样去抓住小程序的风口？一个个问题摆在开发者面前，本书立足微信小程序已公开的技术架构，从技术和运营层面尝试解答开发者的问题，也尝试着能帮助没有开发经验的朋友，从零开始学习编程，快速掌握微信小程序的开发知识，成为一名“小程序员”。
本书有如下几个特点：
1．覆盖全面
本书全面介绍了微信小程序前端开发的相关支持，从微信的框架讲起，介绍了JavaScript、WXML、CSS等语言的基础知识和它们在微信小程序中的应用。
2．讲解详细
考虑我们的读者大多数是没有编程经验的朋友，我们对页面、组件、函数、面向对象等入门必须掌握的概念进行了深入浅出的讲解，内容丰富，语言平实，力求让每一位读者都能快速了解前端页面和逻辑开发的方法，走进程序员的大家庭。
时间仓促，加之笔者水平有限，书中难免会出现一些错误或者需要改进的地方，恳请读者批评指正。为了能更好地与您交流，您可以加我的微信或者QQ一起讨论小程序有关的话题，我的微信号和QQ号都是2264538870。
在本书撰写的过程中，得到了许多专业的、治学严谨的朋友的支持和鼓励，他们帮我整理思路、收集资料、校对书稿，没有他们的帮助，我也不可能在如此短的时间内完成书稿，在此谨向各位朋友的无私付出说一声谢谢：
陈 波 吴万海 巢 洁 成 雯 谭小璐 丁卓群 熊丹洁 徐 翔 明 鉴 张明彪 洪 森 于莎莎 尹金林 程时丛 赵云飞
感谢电子工业出版社的张迪编辑，感谢她在我的写作中提供的支持，也正因为她的认真与高效这本书才能如此迅速地与大家见面。
感谢腾讯公司的微信小程序团队，是他们创造了这样一款优秀的产品。
谨以此书献给我的家人，以及爱我和我爱的朋友们。第1部分微信小程序
微信已经成为我们生活中密切相关的移动应用，据统计，微信活跃用户已经超过6亿，覆盖到了200个以上的国家，很多人的关系链已经从手机通讯录转移到了微信，人们用微信发语音聊天、刷朋友圈，走路在用微信，乘车在用微信，甚至吃饭、娱乐都会拍照上传到微信朋友圈。
对我们开发者有利的是，微信这个移动互联网上的重要入口，一直都是以开放的姿态面世的。微信提供了公众平台和开放平台用于功能性应用的开发，现在又进一步提供了微信小程序的开发接口，为开发者提供了广阔的想象空间和难得的商业机遇。
本章我们将用两节课的时间对微信小程序做一个介绍，让大家对微信小程序的历史和它将要带来的商业机遇，以及微信小程序在开发上的特点，微信小程序能做什么有一个了解，避免大家在产品设计和开发上走弯路。本章要点
● 微信小程序的商业价值
● 微信小程序的技术架构特点
● 微信小程序的学习路径第1天微信小程序概述1.1 什么是微信小程序
关于微信小程序，张小龙在朋友圈里是这样描述的：
微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。也体现了“用完即走”的理念，用户不用担心是否安装太多应用的问题。应用将无处不在，随时可用，但又无须安装卸载。
微信小程序与微信公众平台的订阅号、服务号、企业号一样，属于并行的微信公众号体系。
微信小程序不须要下载和安装即可在微信里启动和使用。
结合目前微信官方公布的技术接口来看，微信小程序是微信提供的一个定制Web页面系统，微信在小程序里提高了对H5特性的支持能力，开放了更多的系统调用。例如，GPS、传感器等接口的调用等。
由于微信小程序针对微信浏览器做了专门的优化，和H5页面比起来将有更好的用户体验、更快的加载速度和更多的功能。微信小程序的服务架构如图1-1所示。图1-1 微信小程序的服务架构
个人移动计算时代刚刚来临时，曾经有过一个关于WebApp和NativeApp孰优孰劣的大讨论，后来以Facebook彻底放弃WebApp成为讨论的一个终结。NativeApp，也就是我们经常说的“原生应用”赢得了阶段性的胜利，而H5技术在发展的同时，受限于浏览器支持和执行效率，有被渐渐边缘化的趋势。
有很多因素决定了近几年H5渐渐失势，失去了绝大部分市场份额。其中有一点是H5并不能真正做到一次开发多处使用，而是要面临不同浏览器和App平台更多兼容性挑战。例如，过去微信的内置浏览器不能支持很多的H5特性，这也是微信小程序出现的技术方面的原因。
几年前，当微信订阅号第一次出现在用户面前时，我们认为微信带给了H5一个独特的发展机会，所有H5产品将以微信的接口为标准开发，浏览器逐步向微信标准靠拢，最终实现一次开发多处使用的目标。
今天来看，为这一理念而生的微信小程序终于还是来了。距离H5产品的标准化运行环境又近了一步，在微信倡导的规范化框架里，微信里H5产品质量也会大大提高，这是可以预见的。1.2 小程序在个人移动互联时代的意义
相比微信公众号，小程序提供了更丰富的框架组件和API接口供开发者调用，其中包括界面、视图、内容、按钮、导航、多媒体、位置、数据、网络、重力感应等。开发者可以通过这些组件和接口上线非常流畅的应用。
微信小程序会挑战App吗，这个话题目前是大家最关心的。但是问题的答案可能会令大家失望。
随着移动产品的发展，H5和App的产品定位已经非常清晰，用户的使用习惯已经形成，这个格局将不会因为小程序的出现而发生巨大的改变。
比较App的形式，微信小程序有开发门槛低、开发效率高、捆绑微信平台易于传播的优势，但同时也有与H5类似的劣势，就是执行效率低，无法实现对人机交互和多媒体要求比较高的应用，如网络游戏等。
H5和App的区分界限已经不再单纯是用户体验问题，大量的App在采用Native+H5开发模式。App和H5产品的主要区别是对于产品分发的需求。
在现有的格局下，App产品通过Apple AppStore，以及谷歌市场和手机应用商店等分发渠道的榜单、搜索及社交产品与广告平台等方式被用户发现、下载、安装。而H5产品主要靠手机网站和社交平台的分享被用户发现和使用。
目前App获取用户的门槛很高，高门槛带来的好处是，用户的二次消费门槛变低了。H5在分发上的优点是用户发现和安装使用的门槛低，然而后续消费门槛却非常高。而这方面正好是App的优势。
事实上到目前为止，App的用户规模和活跃度总体还是远远高于公众号的。不要因为微信活跃度高就认为公众号或者小程序的活跃度就会高了。如果这样类比，小程序和微信活跃度的关系，应该对应App和手机活跃度的关系上了。显然这不是合理的数据分析方式。
小程序出现以后，很多人觉得微信的未来目标就是成为手机上的操作系统。这也许是腾讯和微信的最终定位，小程序也彰显了腾讯的野心，但是目前讨论这个问题还为时太早。
我们知道，手机操作系统的核心是应用的管理，而微信是聊天窗口。这个本质不改变，就很难改变“应用App”和“小程序”在各自体系里的地位。
短期内，用户的操作习惯不会被改变，手机操作系统将会依然被App主导，侧重重度体验、交互性、高粘性需求的产品还是会以App的形式分发，这是由App的高执行效率决定的。
微信平台上订阅号、服务号、企业号和小程序将依赖推送、扫描和社交传播渠道来搭建。微信小程序将会有微信推荐、搜索、二维码扫描和社交传播几种方式，推送将保留给微信的传统公众号，而小程序可以嵌入到公众号中传播。
过去成功的公众号基本上也就是靠内容运营或者线下场景扫描来实现快速传播，如果具备这两方面的资源，又没有系统资源的使用必要，无论是不是有小程序出现，都早就不须做App了。1.3 微信大事记1．2010年
2010年12月，小米科技发布手机端即时通信工具“米聊”，在国内语音IM市场上抢得了先机。米聊主打熟人圈，这一定位限制了米聊用户的发展。360创始人周鸿祎预言，米聊将会为腾讯做嫁衣。2．2011年
2011年1月21日，微信1.0发布。该版本支持导入QQ现有的联系人资料，但仅有即时通信、分享照片和更换头像等简单功能，因此并不为外界所看好。
2011年1月至4月，微信1.1、1.2、1.3版本相继发布，增加了对手机通讯录的读取权限，与腾讯微博私信的互通，以及多人会话功能的支持，获得了四五百万的注册用户。
2011年5月10日，微信2.0发布，新增了语音对讲功能，这一举措使得微信的用户群第一次有了显著增加并且击败了国内所有同类产品。
2011年8月，微信2.3版本中增加了“查看附近的人”功能，微信开始主打陌生人社交，再一次引爆了微信用户的增长点，此时微信用户已达1500万。
2011年10月1日，微信3.0版本加入了“摇一摇”和“漂流瓶”功能，增强了陌生人社交能力，同时增加了对繁体中文语言界面的支持，增加了香港、澳门、台湾地区和美国、日本两个国家的用户手机号绑定服务，微信开始迈出了国际化的步伐。
2011年12月20日，微信3.5发布，推出二维码名片，方便用户通过扫描或在其他平台上发布二维码名片，拓展微信好友。3．2012年
2012年4月19日，微信发布4.0版本，推出了微信朋友圈，进一步加强了微信的用户黏度。同时，微信4.0的官方英文名称被定为WeChat，进一步加快了微信的国际化进程。
2012年7月19日，微信4.2版本增加了视频聊天插件，发布了网页版微信界面。从此微信不再仅仅是一款手机即时通讯客户端，它开始把触角伸向了桌面领域。
2012年8月23日，微信公众平台上线，公众平台的内容能被用户分享到微信朋友圈，用于增强用户黏性。
2012年9月5日，微信4.3版本增加了摇一摇传图功能，该功能可以方便地把图片从电脑传送到手机上，此版本还新增了语音搜索功能，进一步方便了用户对微信信息的把控。4．2013年
2013年2月5日，微信4.5发布，该版本支持实时对讲和多人实时语音聊天，支持对聊天记录进行搜索、保存和迁移。同时，还加入了语音提醒和根据对方发来的位置进行导航的功能，从中可以看到微信将往移动秘书方向发展。
2013年3月19日，公众平台开放自定义菜单的内测资格申请。
2013年4月11日，腾讯微信团队发布声明，称网上流传的微信要对用户收费消息系恶意造谣，同时强调微信绝不会对用户收费。
2013年8月5日，微信5.0发布，公众平台将公众号细分为服务号和订阅号。服务号每月只能群发1条消息，订阅号每天可发1条。微信还在这个版本中添加了表情商店和游戏中心，支持微信支付，微信开始增强商业化能力，凸显出挑战支付宝的野心。
2013年8月19日，网易和中国电信联合发布通信社交工具“易信”，此应用实现了跨网发送免费短信和免费电话留言功能，外界普遍认为用户需求不强烈，很难对微信构成威胁。
2013年8月29日，微信公众平台发布数据统计功能。
2013年9月23日，阿里巴巴发布移动好友互动平台“来往”，其核心功能是实现熟人之间的社交，主打私密安全牌，借微信陌生人交友存安全隐患的弱点切入市场。
2013年10月29日，公众平台新版公测，开放了高级接口。
2013年12月，公众平台发布了一系列公告，打击违法违规的内容和行为，加强了微信公众平台的内容监管。5．2014年
2014年1月26日，微信5.2发布，该版本增加了微信支付场景，新增“滴滴打车”和“微信红包”功能，微信跟支付宝比起来，杀手锏是基于关系链的支付场景，而非支付功能本身。
2014年3月5日，公众平台发布微信支付申请指引，标志着微信支付正式对服务号开放。
2014年4月4日，公众平台发布《微信公众平台运营规范》，明文标明微信公众平台反对和禁止的行为及处罚机制与举报机制。
2014年4月15日，公众平台进行服务号群发策略调整，所有服务号的群发次数由原来的每月1次改为每月4次。此外对已微信认证的服务号，开放公众平台高级群发接口，开发者可以通过高级群发接口实现更灵活的群发。
2014年5月6日，腾讯公司宣布成立微信事业群（Weixin Group，简称WXG），腾讯公司高级执行副总裁张小龙出任微信事业群总裁，这意味着微信的发展进入一个崭新的阶段。
2014年5月9日，公众平台新增投票和多客服功能。
2014年5月22日，微信认证拆分为资质审核和名称审核两个部分。
2014年5月29日，公众平台增加微信小店功能，已接入微信支付的服务号可以申请开通微信小店功能。
2014年6月9日，搜狗搜索宣布正式接入微信公众号数据，一定程度上帮助微信从封闭走向开放，让微信公众号中产生的内容可以得到更广泛的传播。
2014年6月6日，公众平台发布清理集赞行为的公告，对利用朋友圈“集赞”的行为进行打击，处罚力度很大，公众号累计发现四次有集赞行为，永久封号，不可解封。
2014年7月23日，微信公众号新增图文阅读次数展示，图文消息底部新增点赞按钮。
2014年8月14日，微信5.4版本增加了对公众账号及公众账号文章的搜索，意味着用户能从微信信息大海中找到自己想要的信息，构建完整的搜索生态。
2014年8月27日，微信公众平台向认证服务号开放模板消息。模板消息仅用于公众号向用户发送重要的服务通知，只能用于符合其要求的服务场景中，如信用卡刷卡通知、商品购买成功通知等，不支持广告等营销类消息，以及其他所有可能对用户造成骚扰的消息。
2014年10月1日，微信6.0上线，该版本实现了从图文信息到视频信息的进化，并推出了卡包功能，继续加强其商业属性。
2014年12月12日，陌陌科技登陆纳斯达克，陌陌成为我国除微信外获得最大成功的社交软件。
2014年12月19日，微信公众号开始内测评论功能。此举引起各方舆论的广泛关注和热议，对于放开评论功能利弊与微信未来发展走向的讨论络绎不绝。6．2015年
2015年1月9日，微信开放微信内网页开发工具包（微信JS-SDK）。JS-SDK增强了H5的功能，为微信用户提供更优质的网页体验。
2015年2月12日，公众平台全面开放自定义菜单。7．2016年
2016年9月22日，微信宣布“应用号”开始内测，定名为“微信小程序”。
2016年11月3日，微信团队宣布微信小程序正式开放公测。
2016年11月19日，张小龙在朋友圈发布小程序最新进展，从公布的图片来看，微信小程序具备桌面图标方式的入口。1.4 新的消息
2016年12月28日上午，正当本书完稿之际，腾讯的官方公众号“微信公开课”发布了关于小程序新的消息。
文稿以“张小龙首次全面阐述小程序，定档1月9日上线（内附演讲全文）”为题，明确地公布了微信小程序的计划上线日期。
文稿回顾了小程序一年的发展历程，阐述了小程序的产品理念，更重要的是回答了更多大家关心的关于小程序的问题。下面是张小龙演讲中关于大家关心的问题的解答原文，我们附上，供大家学习小程序时参考。● 第一个问题是，小程序的入口在哪里？
小程序在微信里是没有入口的，很多人看到微信开始内测小程序，大家说这是一个新的机会，我们应该第一波上去，去获得一些流量上的红利，但是那就非常遗憾，公众号在微信里面其实也没有入口，一个用户如果没有订阅过任何一个公众号，他在微信里面找不到这样一个入口，小程序也是一样的。如果一个人没有去运行过任何一个小程序，他在微信里也是找不到小程序的入口的。这跟之前提到的一些产品理念相关，在微信里我们一直在倡导去中心化的结构，所以你到现在都不可能看到在微信里会有一个订阅号的入口，里面有一个分类，有排序或者有推荐这样的东西存在，这一点从公众号的第一步就坚持是这样的，这个对公众号平台带来了很大的好处，因为当微信没有这样一个入口的时候，所有提供公众号服务的企业他们会想办法把自己的二维码铺到所能够铺的地方去，那就真正实现了公众号的入口其实不是在微信里面，而是在二维码里。如果是我们有一个基础的入口的话，那大家可能抢夺的都是微信里的入口，如果我们有推荐的话也不是一个好事情。我们的推荐就会变得有更多人订阅。
所以对于小程序来说，可以想象一下未来的小程序用户更多是从哪里去启动它？我们更多的是希望小程序的启动来自于扫二维码。前不久跟一个合作伙伴的公司在聊这个话题，他们希望能够知道小程序的发布时间，好做一些准备。他们提出一个场景我觉得特别的切合，他们说现在汽车票其实没有电子化，所有人去坐汽车的话必须要去汽车站现场去买一张票，这是一个很痛苦的过程，你要去排队买票，然后再去坐车，他们希望用小程序来解决这个问题，只需要在每一个汽车站立一个二维码，所有到汽车站的人扫一下二维码就启动购票的小程序，然后直接通过小程序来买好票，这样售票窗口就不用存在了，我认为这是一个非常贴合小程序的想法。
这样的想法会有很多很多，昨天跟我们小程序这一块的同事在聊，他们说有人做了一个小程序特别方便，是在公交站里面等公交站的时候，想要知道下一班车什么时候来，这个时候只要扫一下公交站的二维码，启动公交站的小程序就可以看到下一班车什么时候来，这也是特别典型的一个小程序的场景。
所以至少在前期我们会更多的鼓励小程序以二维码的形式出现在每一个地方，就像公众号的早期一样。● 第二个问题是，会不会有一个类似于小程序商店的地方，可以去
下载小程序？
其实是不会有的，大家可以推理出来，我们没有下载过程，所以不存在一个应用商店去下载。但是大家会说我想在里面去浏览，去找一些小程序，查找是另外一回事，搜索是另外一回事，但是我们并不会存在一个小程序的商店，所以我们也并不会像外界所猜测的那样，做一个App的分发想法。从一开始我们就没有这个想法，就像公众号从来不会有一个公众号中心，里面可以分门别类列出所有的东西出来，不会有这样的东西，我们认为应该没有一个中心入口，是去中心化的形态，所以我们也不会做小程序的分类、排行、推荐。
关于推荐大家可能会有一些自己的想法，大家可能会认为为什么不把用户感兴趣的一些东西推荐给他？其实我们也可以把这个想法用到公众号里，我们不会做这样的事情，将来也不会做这样的事情。
在微信里我们曾经考虑过对机器推荐和一个人的社交推荐的差异，朋友圈其实是类似于社交推荐，你每天会在朋友圈看到很多的文章，你的朋友其实起到了一个推荐器的作用，使得你不用依赖系统的推荐。如果我们系统来做，可能没有你的朋友们做得好，因为系统不会给你推荐一些你没有接触过的东西，系统只会强化你接触过的信息，并且不断地去学习你的历史，往你的历史方面继续推荐，但是你的朋友可能在朋友圈里面说，某一部电影很好看，那你会因为你的朋友去看了这部电影而去看这部电影，机器是无法理解这一点的，机器只会采集你过去看过的电影，然后把你看过电影的类型整理出来，认为你就喜欢这一类型的电影，但是你朋友推荐的电影可能是你完全没有接触过的电影形态，所以微信里更多是依赖于社交推荐。小程序这里也是一样的，你可能会使用千奇百怪的小程序，但是我们不会因为你已经使用了一款，如学英语的小程序，就反复给你推荐学英语的小程序，这个话题也不在这里展开了。● 第三个问题是，小程序与订阅号的关系？
相信很多人会关注这样一个问题，如果我们做一个公众号，我们会收获到很多的订阅用户（即粉丝），并且大家会从粉丝数来判断自己这个号的价值，但是小程序不会像订阅号，所以如果你做一个小程序，不能依赖于我的目的是要收获多少粉丝，粉丝并不意味着访问量，并不是说你有足够多的粉丝你就有足够大的访问量。大家可以回想一下刚才的例子，在PC互联网时代，你访问一个网站并不需要你成为这个网站的粉丝，并不需要你去订阅它，如果所有的网站需要你订阅了才能看它的信息，网站可能早就已经死掉了，所以对于小程序来说也是一样的，它只有一种访问的关系，而不是一种粉丝的关系，所以它跟公众号从本质上来说是截然不同的，小程序不是一种公众号，它是一种新的形态。● 第四个问题是，小程序能不能推送消息？
可能也是很多人非常关注的，答案是不能，因为如果小程序能推送消息，那就意味着你访问的每一个网站都会发一条消息给你，那你可能会崩溃掉，所以它是不能推送消息的，但是我们会提供比较有限的服务触达能力，你以前访问一个网站的时候可能会留下自己邮件地址，当你要的服务有的话这个网站会给你发一个邮件，小程序也类似，当你在小程序里面做了一个操作，并且希望收到后续通知的时候，我们会提供这样一个通知的机制，使你可以通过小程序给你的用户发送一条他所需要的通知，但这个通知不是说谁来过的小程序就能获得一条推送，而是说这个用户在小程序里面主动地确认了他需要获取一条后续的通知，所以它是一种很有限的通知的能力。看起来我们对这种通知的能力限制的非常严格，其实这也是没有办法的事情，就像我刚才举的一个例子，你在一个网站里面留一个地址，你就会收到很多垃圾邮件，我们并不希望这样的事情在小程序里面再次发生。● 第五个问题是，小程序能不能够分享？
当然有一个问题就不列出来了，小程序能不能分享到朋友圈？肯定不能，这就不作为一个问题了。但是小程序可以分享到聊天里面，可以分享到群里面。其实分享到群里面和聊天里面是有非常大的一个想象空间的。我记得我们内部在讨论这个功能的时候，把一个小程序分享到一个群里面的时候，其实刚开始的形态是非常简陋的，就是我把一个小程序发到一个群里面而已，那只是利用群做了一个传播，让这个群里面的使用这个小程序。但是其实小程序的分享不仅仅是这样子，小程序的分享更多的是希望能够带来一种新的协作方式。
举一个例子，当我把一个投票的小程序发到群里的时候，意味着群里面的每个人可以立即启动这个小程序，并且利用投票，每个人可以看到其他人的投票。对于一个群来说，这个小程序带有每个人的登录状态，大家访问的是同一个小程序的任务。基于这样群的任务，它可以被群里面的所有人共享，当任何一个人更新群里小程序状态的时候，群里其他人都是可以看到的，基于这个想法你可以想象得到，可能会存在非常多的一些协作式的小程序。
我们还提出了关于小程序页的概念，比如说一个股票的小程序，我分享的只是我当前所看到的0700股票的这一页，然后分享到一个群里面去了，群里面的人看到的也是0700这样一个股票的页面，我们把它叫作小程序页。这里我们希望的是，我分享到群里的是一个活的数据，是当前我看的信息。我的意图并不是说把一个程序分享到群里面让大家重新运行这个程序，我只是分享了一个活的信息过去，而且在未来我们更希望的是，当然现在还没有做到，我们更希望的是我分享到群里面这一页的信息它是活的，所谓活的意思就是当它出现在一个聊天里的时候，你甚至不用点进去你就能看到这个小程序的表现。例如，我分享一个时钟的小程序到群里面，那么群里面每个人看到这个小程序，不用点进去就可以看到已经有一个时钟在那里运转。暂时这个形态还没有实现出来，但是我个人非常期待。我相信这种协作式的任务，对于小程序的分享会起到一个很大的帮助，我们可以在里面构思出非常多的需要群组一起完成任务的小程序。● 第六个问题是，很多人会问小程序能不能做游戏？
我们现在并不能。● 第七个问题是，小程序能不能被搜索到？
会有非常多人说我们早一点做小程序，然后就可以很好地利用这样一个前期的流量，这里特别遗憾地说，我们更希望小程序不是基于一种流量分发的方式获取用户，就像刚才说的我们更希望小程序是通过一种用户触达的方式，当用户需要的时候触达到它，然后使用它，而不是不需要的时候推荐给他使用，所以用户能搜到小程序，但是我们可以极力限制它搜索的能力，避免它滥用，使得用户在微信里面能够搜索得到他需要的一个小程序。● 第八个问题是，小程序和公众号的关系是怎么样的？
刚才大家明白了小程序和公众号是一种很独立的关系，但是因为很多的公众号和小程序他们可能是一个企业开发的，所以它们应该有某种关联，目前我们提供的一种关联是，你在公众号里面可以看到这个公众号同一个企业还做了哪些小程序，或者你在一个小程序里面你也可以看到，做这个小程序的企业还做了哪些公众号，他们是可以互相跳的。
还有一个小问题是，既然小程序会突出二维码，那么微信里面会不会对于线下的店会有一些提示，在目前这一阶段我们可能会很轻量地让用户能够看到在他附近还有哪些小程序存在，我们说的附近的小程序存在是指附近有哪些在提供服务的店，他们同时也有小程序。比如说在三公里以外有一个士多店，那么你可以看到并立即打开它的小程序，然后买一点什么东西，这是很有可能的。课后作业
想一想，你认为微信打败Facebook和米聊，成为国内用户量最大的即时通信工具的原因，把他写下来。第2天微信小程序的技术架构特点2.1 微信小程序在开发上的特点
腾讯为微信小程序的工程项目开发了完整的编辑开发、运行调试、打包发布环境，形成了一个完整的IDE。
有些朋友认为微信小程序就是H5，其实并不是这样。
小程序借鉴了很多前端开发的技术理念，它用React实现了“视觉组件”，它用CMD的require作为面向对象的JavaScript，用Vue实现了标签式逻辑与数据绑定。
小程序用JavaScript语言、XML、CSS语言编写程序代码，写小程序代码几乎与Web前端开发完全一样，一个有经验的Web前端程序员只需要花费半小时就能快速上手小程序开发，但小程序并不是标准化的H5+CSS3+JavaScript架构，它和Web架构基于的W3C规范没有任何关系，小程序使用腾讯全新定义的技术规范和架构，是微信自有的。
那么小程序与H5又有哪些不同呢？
小程序不支持W3C的DOM（文档对象模型）规范，小程序的页面也不是基于Window、Document等JavaScript内置对象的，所以现有Web前端领域的第三方框架，如Jquery，Zepto、UI类框架等都不能在小程序里使用。而小程序的JavaScript在上下文中自带了wx对象，也就是之前公众号开发中js-sdk的主对象。
小程序的标签，小程序称为“视觉组件”，并不是基于HTML规范的，它是腾讯全新定义的一套完整的标签库，它只能运行在微信的浏览器下，所以我们以往运行在微信服务号、企业号或者通过浏览器访问的前端项目代码，无法直接移植到小程序。
微信小程序定义了自己专有的模型，吸收了主流前端开发中数据、样式、控制逻辑分离的理念，剔除了烦琐的关联配置，并且从规范上要求每个“页面”需要有同名的四个文件：index.js、index.json、index.wxml、index.wxss，各司其职。其中js文件采用标准的JavaScript语法规范，用于逻辑操作；json文件基于JSON语法规范，用于页面文件的配置；wxml文件基于XML语法规范，用于页面视觉组件的描述；而wxss继承了标准的CSS语法，用于WXML组件样式的定义。
小程序的页面加载基于本地，不需要通过频繁的服务端请求来实现，所有的页面跳转都不需要通过服务端交互。这将使小程序的执行效率大大提高，比服务号、企业号等基于H5的Web应用模式有更好的用户体验，操作流畅度与反应速度也会更好。这也意味着在没有网络连接的环境下也可以使用微信小程序。结合本地存储，小程序可以满足暂时断网或网络情况较差的场景需求，这是微信服务号和Web服务都无法实现的。
微信对于一些通用的用户操作和显示，如等待图标、错误提示、结果展示等，都提出了设计方式上的要求，形成了统一的规范，强制开发者按照规范标准做开发设计，这是微信作为一个准封闭系统，为了用户体验而进行的努力。当然，其意义要从两方面来看，一方面是规范的标准给开发者带来了方便，也让用户使用小程序更高效，但同时也限制了开发者创造性的发挥。2.2 微信将会支持的小程序分发模式
对于互联网应用产品的开发和运营者来说，如何让用户可以快速找到你的产品，是你最需要关心的事。所有的传播都是为了被用户发现。那么，微信将会给小程序提供怎样的分发模式支持呢？
微信作为一个IM平台，目前缺少展示位，很难有足够的位置让用户把常用的小程序展示出来。价值连城的九宫格展示位也已经藏到了系统的三级菜单甚至以后，越藏越深。小程序要获得更好的位置资源确实不易。微信对比浏览器，缺少了域名指向，这让小程序的分发模式又丧失了一种可能性。
现在来看，小程序的入口平台可能会出现在微信首页的导航按钮栏、发现页面或聊天页面。除此之外，大量小程序的分发将会集中在微信的搜索结果里，如何设置小程序的搜索标签属性，让小程序得到更多的展示机会，这会涉及很多的规范性要求，这将会是微信小程序运营者重点思考的问题。
另外，从目前微信流出的一些小程序“谍照”来看，微信小程序将会具备手机桌面图标方式的启动入口，在微信的“发现”页面，也会有小程序的一个统一入口，和“朋友圈”、“附近的人”等并列。2.3 微信小程序将会给前端设计带来的变革
微信小程序的价值，将会体现在下面几个方面：（1）对于开发者，小程序因为兼容JavaScript和XML、CSS语法规范，这将会使开发门槛更低，开发一个程序将会变得更简单。在小程序平台上线初期，会产生一个密集的应用分发高潮，并将持续半年到一年的时间，开发者将能够借助微信平台获得较大的流量，这将比App的流量获取更加容易，也能让营销成本变得更低。（2）对用户来说，小程序因为它的即开即用特性，将会减轻手机的应用压力，避免资源浪费。微信小程序的审核机制会比App更为严格，应用程序将很难获取到用户的敏感权限，这将使用户使用手机更为安全，小程序的获取渠道将更多地集中在微信上，降低了用户获取应用的时间成本。
基于此，我们可以设想一下，微信小程序正式上线后，将会发生什么：（1）需要下载App才能使用的高频工具类应用，如天气预报、火车订票、安全期日历、日程表、课程表等，很快就会有小程序的版本面世，如果那些拥有知名产品的公司不去开发，别人就会趁虚而入。（2）由于目前小程序的重复调用机制还不明确，没有关注机制，以往脸萌、无密等火一把就销声匿迹的应用也会出现在小程序中，但更多会以小额收费的形式，赚一波就走。（3）对于创新型的垂直社交产品会有一个机会，机会大小得看微信对关系链开放的力度。（4）微信肯定会投入精力到电商类小程序，如微店。（5）最终商业价值最大的将会是具备稳定高频次应用场景和用户习惯搜索获取的高流量小程序。2.4 学习微信小程序开发的路径
可以预见的未来，微信小程序会形成一个应用分发新的渠道，同时微信将会短时间内出现一个流量膨胀的入口，也会涌现出一批“微信小程序员”。
作为开发者，我们要学习一个语言的开发，一个框架的使用，并不是仅仅读一本书那么简单，正确的学习方法是：● 建立全局观，设定一个学习路径；● 制订切实可行的学习计划，严格执行；● 从简单的小程序做起，锻炼开发实战能力；● 加入与小程序开发有关的QQ群，微信群，与有经验的人频繁请
教，交流、分享；● 编写一些有可能有刚需的小程序，经常练手，语言规范、组件的
使用、API的调用需要不断地重复使用才能做到得心应手。课后作业
1．参照本书目录，合理安排你的时间，制订一个微信小程序开发的学习计划。
2．微信小程序用到了哪些编程语言的规范（提示：有三种）？第2部分开发前的准备
工欲善其事，必先利其器。学好小程序的开发，首先要对开发工具有充分的了解。
本章我们对小程序的注册申请、小程序管理后台的使用、开发工具的安装和使用分别做详细的介绍。本章要点
● 小程序的注册申请和微信认证
● 认识管理后台
● 开发工具编辑模式和调试模式的使用第3天小程序的注册申请3.1 申请微信小程序
申请小程序首先要有一个没注册过微信公众号的邮箱，请牢记邮箱名称和密码，因为我们将来需要它接收微信的官方通知或者完成取回密码等操作。
在微信公众平台官网首页（mp.weixin.qq.com）单击右上角的“立即注册”按钮进入申请流程。如图3-1所示为微信公众平台注册登陆入口。图3-1 微信公众平台注册登陆入口
进入微信公众平台的注册页，在这个页面单击“账号类型区别”可以查看不同类型账号的区别，我们选择“小程序”选项。
接下来填写注册邮箱和密码，腾讯会发送一份邮件到你的注册邮箱，单击里面的激活链接，小程序的注册和激活就完成了。
邮箱激活后，继续下一步的注册流程，需要选择主体类型、完善主体信息和管理员信息。
申请时一定要慎重填写小程序名称，因为一旦审核通过就不能更改了，服务类目选项决定了我们的小程序在微信搜索引擎的曝光率，所以也要慎重填写，一定要跟小程序的实际功能契合，并且选择尽量多的有关类目，此选项每个月只能修改1次。
目前微信小程序只支持企业、政府等机构注册，不支持个人注册。目前包括企业、政府、媒体、其他组织类型账号，必须通过微信认证验证主体身份。认证通过前，小程序的上传发布功能将无法使用，开发者和体验者的账号数量也会受到限制。如图3-2所示为选择微信公众平台类型。图3-2 选择微信公众平台类型3.2 微信认证
微信认证的目的是确认开发者提交的小程序主体信息的真实性，需要交纳300元的认证费用给腾讯指定的账户，比较方便的方式是通过微信支付扫码提交认证费用。
政府、媒体、其他组织类型账号，必须通过微信认证验证主体身份。企业类型的小程序账号，可以根据需要确定是否申请微信认证，通过微信认证的账号才能使用微信支付、微信卡券等微信提供的比较高级的权限。
微信的审核和认证流程很严格，我们要谨慎对待，认证的名称一旦确定，不易修改，如果需要修改名称，需要我们重新认证并且再次交纳认证费用。
认证入口位于小程序后台的“设置”—“基本设置”—“微信认证”—“详情”一栏。
大部分小程序开发者都是企业类型的用户，所以我们重点说说企业类型的认证方式，一种是通过腾讯对注册公司的对公账户向腾讯公司打款来验证主体身份的方式，打款信息在提交主体信息后可以查看到。另外一种方式是通过微信认证验证主体身份，需支付300元认证费。如果不仅仅是为了尝试小程序的开发而没有上线的计划，建议采用第二种认证方式，因为腾讯小程序如果要上线发布必须通过微信认证，企业认证必须是办理过三证合一的企业营业执照。如图3-3所示为微信小程序的微信认证入口。图3-3 微信小程序的微信认证入口
微信官方的声明是需要10到15个工作日才能认证成功的，但是目前只要1至3个工作日就可以认证成功了，效率很高。
微信认证完成后，我们就可以使用微信小程序管理后台提供的所有功能了。3.3 小程序绑定微信开放平台账号
如果我们注册了微信开放平台，可以将小程序账号绑定到微信开发者平台，绑定后的小程序可以与账号下的其他移动应用、网站应用或者公众号打通，通过UnionID机制让多个小程序应用和公众号之间打通用户账号系统。只要是同一个微信开放平台账号下的移动应用、网站应用和公众账号（包括小程序），用户的UnionID是唯一的。换句话说，同一个用户，对同一个微信开放平台下的不同应用，UnionID是相同的，打通UnionID可以提高用户体验的一致性，也可以帮我们更高效地管理用户。
用户的UnionID可以通过调用“获取用户信息”接口获取。
微信公众平台绑定小程序的入口在：登录微信开放平台（open.weixin.qq.com）后台的“管理中心”—“公众帐号”—“绑定公众帐号”。如图3-4所示。图3-4 小程序绑定到微信开放平台
想要在微信开放平台绑定小程序，首先要有微信平台的开发者资质，开发者资质的认证与小程序微信认证的步骤基本上一样，我们就不单独介绍了。课后作业
申请一个微信小程序开发者资格（不需要通过微信认证），为微信小程序的开发做准备。第4天开发环境的搭建4.1 认识小程序管理后台
成功申请后登陆到小程序管理后台后，会进入如图4-1所示的界面。图4-1 小程序管理后台
界面最顶端是标题栏，包括微信小程序的开发文档、开发者社区入口、通知入口和用户管理。
左侧是导航菜单，共分“首页”、“开发管理”、“用户身份”、“数据分析”、“模板信息”、“微信支付”、“设置”等七个部分。右下是管理后台的主要显示区。（1）“首页”包括小程序的发布流程信息和版本发布工具，发布流程信息包括微信认证的状态、小程序信息，以及小程序的开发工具下载、开发者账号管理、服务器配置等信息。（2）“开发管理”菜单包括上线版本的信息、小程序版本审核信息，以及正在开发尚未发布的版本信息。（3）“用户管理”菜单用于管理员账号的修改、开发者和体验者账号的绑定、解绑。通过微信认证的小程序可以绑定20个开发者和40个体验者账号，未通过微信认证的小程序可以绑定10个开发者和20个体验者账号。（4）“数据分析”菜单用于用户数据的统计和分析，微信提供了简单的小程序用户数据统计和分析功能，供运营者分析小程序的用户使用趋势和偏好，优化小程序的功能。（5）“模板信息”是微信提供给开发者的通用页面模板菜单，包括订购、行程、投保、点评等各类模板，数量很丰富，合理使用模板能大幅度提高小程序的开发效率。（6）“微信支付”菜单用于支付配置，是微信向有支付需求的小程序提供的支付、收款、经营分析等的一整套解决工具，通过微信认证的账号可以使用微信支付功能。微信支付需要独立的审核过程，审核通过后可以在微信商户平台对微信支付进行管理。（7）“设置”菜单用于小程序的基本信息设置和开发设置（见图4-2）。图4-2 开发设置4.2 小程序开发环境的搭建
下载小程序开发工具的链接位于微信小程序的管理后台的“首页”-“开发工具”页面下，安装的过程很简单，一路单击“下一步”按钮就可以完成安装了。如图4-3所示。图4-3 安装微信开发者工具
第一次启动开发工具，会要求扫描一个二维码验证开发者身份，我们用绑定了开发者账号的微信号扫描这个二维码，就能启动微信小程序开发工具了。
开发工具启动后首先要进行调试类型的选择，可选类型包括“本地小程序项目”和“公众号网页开发”，如图4-4所示。因为我们要做的是小程序的开发，所以选择第一项。进入到“添加项目”选单，在这里我们需要输入小程序的AppID，前文已有介绍，AppID在小程序管理后台的“设置”-“开发设置”里获取，接下来我们填写“项目名称”和项目的保存路径，开发工具会完成创建项目和创建项目目录等操作，进入小程序开发工具的主界面。图4-4 选择调试类型4.3 初识小程序开发工具
开发工具主界面分为四个区域：标题菜单栏、导航按钮、模拟器和主操作区。这个布局和Chrome开发者工具非常相似。
最顶部的标题菜单栏的三个菜单按钮分别是“设置”、“动作”和“帮助”，“设置”按钮用于网络代理服务器的设置，如果我们是通过代理网址上网的，就需要对这个选项进行设置，“动作”按钮用于模拟器的页面刷新、前进和后退操作，“帮助”按钮目前只有开发工具的关于信息。如图4-5所示。图4-5 开发工具主界面
导航菜单位于开发工具的最左侧，用于小程序的编辑模式和调试模式的切换、代码的编译、后台和前台模式的切换及项目管理等。
模拟器窗口就是一个页面浏览器，会实时显示页面状态，供我们操作和调试，我们可以在模拟器窗口的最上方选择不同种类的手机型号和不同的分辨率，也可以选择模拟不同的上网方式，系统提供WiFi、2G、3G、4G四种网络连接方式。目前开发工具的模拟器和我们真机运行的结果是有一些差别的，所以我们在编程的时候还是要以真机运行的结果为准。4.4 编辑模式
我们在导航菜单击“编辑”按钮进入编辑模式，可以看到，主操作区会显示小程序的目录树和代码编辑区域，目录树用于小程序的文件管理，我们的代码编写工作需要在代码编辑区域完成。
在“目录树”窗口我们可以方便地查看和管理文件，如图4-6所示。单击“目录树”右上角三个点的按钮可以从硬盘打开小程序代码文件、查找文件里的关键词和新建目录或者代码文件。图4-6 “目录树”窗口
开发工具目前提供了wxml、wxss、js、json共4种文件的编辑功能和图片文件的预览，在我们编辑代码时，也可以实时地在模拟器里预览代码编辑的情况。
在编写代码的过程中，开发工具会自动帮助用户保存当前的代码编辑状态，关闭工具或者切换到别的项目并不会丢失已经编辑的文件状态，但只有按下[Ctrl+S]快捷键保存代码后，修改过的代码才能够被重新编译。
同现在大部分成熟的代码编辑器一样，小程序开发工具提供了自动补全功能，编辑js文件时系统会帮助我们补全所有的API，并自动给出相关的注释解释，编辑wxml文件时系统会帮助开发者直接写出相关的标签，编辑json文件时系统会帮助我们补全相关的配置，并给出实时提示。
下面是小程序开发工具常用的快捷键，其中最重要的是[Ctrl+S]保存文件快捷键，每次修改代码后都需要用这个快捷键保存更改的内容：● 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：在当前行上方插入一行● Ctrl+Shift+F：全局搜索
光标操作快捷键：● Ctrl+End：移动到文件结尾● Ctrl+Home：移动到文件开头● Ctrl+i：选中当前行● Shift+End：选择从光标到行尾● Shift+Home：选择从行首到光标处● Ctrl+Shift+L：选中所有匹配● Ctrl+D：选中匹配● Ctrl+U：光标回退
界面操作快捷键：● Ctrl+\：隐藏侧边栏● Ctrl+m：打开或者隐藏模拟器4.5 调试模式
单击导航菜单的“调试”按钮进入调试模式，主操作区会显示调试工具，调试工具有6个窗口：“Console”、“Wxml”、“Sources”、“Network”、“AppData”、“Storage”。“Console”窗口就是小程序的调试控制台，也被叫作终端窗口，用于给开发者输入调试代码和查看调试信息，也用于小程序的错误输出，是我们在小程序调试时最常用的面板。如图4-7所示。图4-7 调试面板（当前为Console面板）“Wxml”窗口用于帮助开发者开发wxml文件转化后的界面。类似我们在Chrome浏览器窗口查看一个页面时，单击鼠标右键“开发者工具”的“Elements”窗口看到的信息，在这里可以看到真实的页面结构和结构对应的wxss属性，同时可以通过修改wxss属性在模拟器中实时看到修改的情况。通过调试模块左上角的选择器，还可以快速找到页面中组件对应的wxml代码。关于wxml及wxss文件，我们会在后面的章节详细介绍。“Sources”窗口用于显示项目的脚本文件，与浏览器的代码开发不同，微信小程序框架会对脚本文件进行编译，所以在Sources面板中开发者看到的文件是经过处理之后的脚本文件，开发者的代码都会被包裹在define函数中，并且对于Page代码，在尾部会有require的主动调用。“AppData”窗口用于在调试中实时查看和编辑项目数据情况，在此处编辑数据，将会实时反馈到模拟器界面上。“Storage”窗口是存储器窗口，用于显示项目在使用wx.setStorage接口或者wx.setStorageSync接口后的数据存储情况。
试读结束[说明：试读内容隐藏了图片]