微信公众平台与小程序开发——从零搭建整套系统

版权信息

书名：微信公众平台与小程序开发——从零搭建整套系统

ISBN：978-7-115-45033-3

本书由人民邮电出版社发行数字版。版权所有，侵权必究。

您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。

我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。

如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。

•　著　　　　张剑明

　 责任编辑　赵　轩

•　人民邮电出版社出版发行　　北京市丰台区成寿寺路11号

　 邮编　100164 　电子邮件　315@ptpress.com.cn

　 网址　http://www.ptpress.com.cn

•　读者服务热线：(010)81055410

　 反盗版热线：(010)81055315

前言

为什么要写这本书

“再小的个体，也有自己的品牌”是微信公众平台官方页面的一句宣传口号。微信团队从2012年推出公众平台到现在，其发展可以说超出了所有人的想象。许多初创型企业凭借早期运营的一个订阅号或者服务号，便能赢得投资人的青睐，即使其背后没有产品。2017年1月，小程序正式发布，微信再次吸引了众人的关注。订阅号、服务号和小程序已经构成了一个较完善的微信生态体系。

微信公众平台对任何人来说，都是一个机会。和大家一样，我也是在微信公众平台刚推出不久就加入到了探索的行列。书中的内容，绝大部分是我在过去几年工作中的积累，并已经应用在实际的项目中，且得到了良好验证。也有一部分内容是我在工作之余的兴趣爱好创作，例如HelloChats公众号案例。书中的部分内容，不完全针对公众号的开发，例如第4章的“常用调试方法及工具”，它适合所有前端开发人员阅读和参考。

接下来，我会继续关注和探索与公众平台相关的动向和技术，希望能给大家带来更多干货，实实在在地帮助大家。

如何阅读这本书

本书从逻辑上可以分为三大部分：

第一部分为第1～5章，主要介绍微信公众平台开发相关的基础理论知识，包括开发环境和开发框架搭建，常用调试工具使用详解等。这几章可以帮助读者了解公众号开发的背景知识，为后续的章节阅读打下基础。如果读者对这部分内容已经较为熟练，可以选择性阅读。

第二部分为第6～9章，是本书的核心内容，主要提供微信公众平台开发过程中涉及的常见问题的解决方案，包括微信网页授权、微信支付、微信登录。这部分不仅讲解原理，还结合了实际代码，以便帮助读者掌握。另外，第9章的内容结合了时下火热的微信小程序开发，从理论到案例都有详尽的讲解。这部分内容的所有代码都可以在笔者的博客上下载，建议读者结合工作中的项目进行代码和方案的融合。

第三部分为第10～12章，主要是案例实践，讲解了如何接入公众号开发模式，并向读者展示了一个公众号（HelloChats）的开发过程，并在最后一章介绍了如何从零开始搭建站点，以及进行日常服务器运维。掌握了这部分内容之后，读者就可以独立完成一个有复杂逻辑的公众号开发了。

勘误和交流

由于作者水平有限，加上编写时间仓促，书中难免会有一些错误或者更新不及时的地方，特别是微信小程序部分，新技术变化较快，假如遇到和微信官方文档不一致的地方，请以官方文档为准。在此，作者恳请读者批评指正。作者专门建立了一个QQ群（141927779），读者可以加入该群和大家交流，也可以通过我的电子邮箱（hellocpp@foxmail.com）和微信号（hellojammy）与我取得联系。衷心希望作者的这本书能帮助到大家。

书中的所有源码都可以在作者的个人博客http://www.hello1010.com/wechat-book或异步社区中本书页面下载。

致谢

感谢微信团队的这个伟大创新，让我们的生活方法发生了改变。

感谢人民邮电出版社的赵轩，感谢你在我写作过程中给予的帮助和支持，感谢你的高效率工作，向你的专业度致敬。

感谢我的家人，特别是我的妻子，在该书写作过程中给予我的支持和鼓励！

第1章　微信生态

1.1　微信：是一种生活方式

“你的一行代码能影响8亿网民，比奥巴马还多影响5亿人！”

这是腾讯2015年启动校园招聘时的口号。多么吸引人的一句话，足见腾讯的庞大用户群及其影响力。造就这群庞大用户群体的主要幕后功臣，就是腾讯QQ。

截至2016年11月16日，未经审核的第三季度及中期业绩报告显示，腾讯QQ的月活跃账户数为8.77亿人次，智能终端月活跃账户数为6.47亿人次，最高同时在线账户数为2.5亿。想象一下，全球有2.5亿人在同时使用同一款软件，不得不说这是一个奇迹。

聊完了QQ，我们接着来说说它的兄弟产品—微信。

早在2010年，腾讯广州研发中心产品团队便在张小龙的带领下，开始着手微信的研发。张小龙此前曾经开发过Foxmail和腾讯七星级产品QQ邮箱，这两款产品颇受业界好评。这一次，微信成为张小龙又一个得意的产品。

2011年1月，微信发布，针对iPhone用户的1.0测试版本，并通过QQ账户体系来导入好友关系链，快速拥有了微信的第一批用户。

笔者认为，通过QQ来导入用户，是一个非常明智而且正确的选择，也是腾讯经营社交产品多年，厚积薄发的最好印证。这也是令其他互联网企业望尘莫及且不可多得的资源。

图1-1　微信1.0测试版截图（图片来自腾讯微信官网）

我们简单回顾一下微信的发展历史，如表1-1所示。

表1-1 微信iPhone版本更新大事件

从微信的版本更新记录中我们可以看到，微信的每一次重大版本更新，都精准地把握住了用户的核心需求点。要做到这点，显然不可能只靠对产品的简单规划，更多的是需要对用户需求敏锐而又准确的把握和理解，甚至是对人性的把握。而这一切的主要缔造者就是张小龙。他崇尚技术，崇尚颠覆性思维，信奉简单就是美，天生的完美主义。产品不断更新迭代，让用户体验一次次接近极致。他把一款互联网产品打造得老少皆宜。

2012年，张小龙提出一个新观点：微信是一个生活方式。下面我们来详细回顾微信的发展历史，看看它是如何成为我们的一个生活方式的。

2011年5月，微信2.0语音版全新发布，让聊天不再是干巴巴的文字，我们可以像打电话一样和朋友们交流。多么伟大的创新！从此，人们无论是走在大街上、坐地铁，还是排队，都可以随时随地地拿起手机对讲。那标志性的“滴”的声音和按住对讲时屏幕上出现的对讲机图案，在现在看来都是那么的经典。

2011年底春晚的“摇一摇”，让这个功能走进了用户生活。如今，它已经成为微信拥抱O2O的主要互动方式：摇优惠、摇电视、摇周边。

2012年初的相册，让我们拥有了一个简单整洁的朋友圈，我们再也不用在广告漫天飞的屏幕上浏览，净化了我们的眼睛，整个世界都清净了，虽然现在的朋友圈有广告，但是用户至少有一定的选择权，可以选择对某些广告“不感兴趣”。

2012年7月，微信网页版（如图1-2所示）推出。微信从此进入了桌面时代。后来还有针对Windows版本（如图1-3所示）和Mac版本（如图1-4所示）的客户端微信。与手机端微信相比，它拥有除去朋友圈之外的绝大部分功能。这样，再也不用在上班时间盯着手机屏幕查阅微信消息了。

图1-2　微信网页版

图1-3　微信Windows版（微信2.2.0.46）

图1-4　微信Mac版（微信2.0.4）

2013年8月，微信支付推出。腾讯财付通一直都是支付宝的强劲对手，微信支付的推出，再次给支付市场带来了一场血雨腥风。从此，人们去小卖铺买东西结账时都会问一句：老板，可以微信支付吗？商户倘若不接入微信支付，似乎就无法做生意了。由此可见微信支付的深入人心。

2014年1月27日，微信红包席卷了整个春节，它打破了传统的过年红包的使用场景，人们足不出户便可以送祝福。更具趣味性的是“拼手气红包”，每个人抢到的红包金额是随机的，跟抢红包的时间先后无关，考验人品的时候到了。

2014年9月，朋友圈小视频的发布又是一次伟大的创举。它让朋友圈动起来。用户可以录制发送一段6秒的短视频，在朋友圈的朋友聊天中传播。小视频的编码是经过微信团队精心优化的，能最大限度地节省用户流量。

2016年1月底，临近春节，朋友圈突然被马赛克刷屏，这就是“红包照片”。用户点击发布朋友圈按钮，可以看见微信红包照片选项，发布成功之后，该照片将被模糊处理，还有如需评论或者看清照片，需要向好友发送红包，金额由微信随机决定。一时间，各种“我和我男朋友”“小时候的萌照”等这类标题的内容席卷朋友圈，发完红包之后发现照片和描述并不相符。但此时你已经不会去计较这些了，红包照片带来的乐趣不言而喻。需要说明的是，红包照片只可在特定时间使用。

微信一次又一次的创新，给我们带来了惊喜和期待。如今，人们已经越来越离不开微信了，我们在这里聊天、阅读、社交、购物。微信已经深入人心，渗透了生活的每个角落。这正是一个生活方式。

手机占据了我们越来越多的时间，而我们每天只有24小时，除去睡觉和工作，陪伴家人和身边朋友的时间已经不多了。而我们在跟朋友一起吃饭时，在家人身边时，“低头族”们正沉醉在微信的世界里无法自拔。我们不敢想象没有了微信生活会变成什么样。笔者曾经关闭朋友圈两个星期，其实并没有之前想象的那么糟糕，我的生活依旧，让我跟家人和朋友有了更多的交流时间。假如一定要我说失去了什么，那就是朋友圈的那些“八卦”：谁去哪里旅行了，谁去了哪家餐馆吃饭，等等。

其实，微信只是一个生活工具，你用，或者不用，它都在那里。最关键的，是看你怎么用。

1.2　微信公众平台

2012年8月23日，微信公众平台正式上线。微信不再只是一个聊天工具，它正在缔造一个生态系统。

1.2.1　公众平台简介

“再小的个体，也有自己的平台”。这是微信公众平台的标语。它让我们看到微信对后续更大的期望和可能。微信的亿级用户，具有极大的用户挖掘价值，也为这个新的平台增加更加优质的内容，创造更好的粘性，形成一个生态循环。

微信公众平台主要面向个体户、企业、政府、媒体、个人和组织。在这里可以通过渠道将自有品牌推广到线上平台。

公众平台账号分三类。

1．服务号

给企业和组织提供更强大的业务服务与用户管理能力，帮助企业快速实现全新的公众号服务平台。

2．订阅号

为媒体和个人提供一种新的信息传播方式，构建与读者之间更好的沟通与管理模式。

3．企业号

为企业或组织提供移动应用入口，帮助企业建立与员工、上下游供应链及企业应用间的连接。

这些官方说明听起来有点复杂，其实理解它们三者之间的区别，便知何时、何条件应该使用哪种账号。

订阅号，偏向于为用户传达资讯（类似于报纸），每天只可群发一条消息，推送的消息会收起到“订阅号”的文件夹中，需要用户进入文件夹查找订阅号，入口较深。

服务号，偏向于提供服务及互动（如查询服务、商品售卖），每个月可群发4条消息，推送的消息会直接出现在用户的聊天列表中。

企业号，用于公司内部通信使用，需要验证用户是否为企业身份才可关注。

1.2.2　服务号和订阅号

由上述可知，服务号侧重于提供服务和互动，订阅号侧重于提供简单的资讯。简单的理解就是，服务号可以给用户提供更多、更丰富的内容和体验。当然，它们的申请门槛也不一样。

订阅号可通过微信认证资质，审核通过后有一次升级为服务号的机会，升级成功后类型不可变；服务号不可变更为订阅号。

另外，只有认证后的服务号才可申请微信支付。订阅号不可申请微信支付。

微信公众平台高级模式中有两种模式：编辑者模式和开发者模式。

1．编辑模式

在此模式下，可以通过简单的界面逻辑，来设置自动回复，服务号还有公众号底部自定义菜单功能。

2．开发模式

在此模式下，开发者可以通过公众平台提供的接口，实现自动回复、获取订阅者、自定义菜单等功能。

编辑模式上手容易，不要求懂编写代码，响应速度快，不依赖于第三方开发者服务器。但是它的缺点也比较明显，即它的扩展功能有限，不能调用公众平台提供的九大高级接口，无法实现大部分定制化功能。所以，有开发能力的个人或企业，建议使用服务号来承担公司的核心业务功能，同时使用订阅号辅助来做资讯推广等工作，最大限度地利用微信公众平台的服务号和订阅号各自优势发挥的作用，为企业发展提供有力保障。

1.3　企业号

2014年9月18日，微信企业号正式公测。微信企业号是一个互联网化连接器，它可以帮助企业实现业务及管理互联网化。

企业号可以高效地帮助政府、企业及组织构建自己独有的生态系统，随时随地连接员工、上下游合作伙伴及内部系统和应用，实现业务及管理互联网化。具体体现在以下4个方面。

1．连接人与组织

通讯录可灵活地管理组织架构，连接员工和上下游；企业级的权限体系可支持层层授权的管理模式。

2．连接微信能力

帮助用户构建基于微信的线上业务，通过扫一扫、摇一摇、支付和卡券打通线上线下，实现新的融合场景。

3．连接内部系统

企业号可作为移动应用入口，通过统一的身份认证，方便地连接内部系统和应用，消除信息孤岛。

4．连接第三方应用

企业号的开放生态吸引了大量SaaS服务商和定制化服务商，用户可以方便地选择第三方应用和服务。

除此之外，企业号还提供可靠的安全保障，以及丰富的功能体验，如企业通讯录、权限分级、统一的会话入口、自由收发消息、保密消息、应用定制、微信原生功能和安全开放的接口等。

1.4　小程序

2016年1月9日，是应用号（小程序）的启动日。经过一年的不断思考和碰撞，小程序慢慢地找到了自己的定位和形态。2016年11月3日，小程序宣布开始公测。在2016年12月28日的微信公开课上，张小龙宣布了微信小程序的发布时间是2017年1月9日。小程序的存在，主要是为了解决高频使用场景下的用户体验问题，它不是以HTML5网页的形式存在，也不是Hybird。简单的理解是，小程序是运行在微信这个应用之上的应用，它是订阅号和服务号的延展。有了它，可以使微信生态有更多的应用场景和服务入口，让我们拭目以待吧。

1.5　微信开放平台

微信推出公众平台之后，又推出了开放平台，为第三方应用程序提供接口，可以将第三方内容分享到朋友圈和聊天会话中，以便更大范围地传播信息，其最大的优势是可以开通支付功能。

微信开放平台，能应用在以下4类开发场景。

1．移动应用开发

让移动应用支持微信分享、微信收藏和微信支付。使第三方应用和微信在一定程度上打通。

2．网站应用开发

让网站支持使用微信账号登录。用户只需用微信“扫一扫”功能便可实现登录，还可以在网站自有账户体系和微信账户之间建立连接关系。

3．公众账号开发

微信公众号开发，为亿万微信用户提供轻便的服务。

4．公众号第三方平台开发

成为公众号第三方平台，为广大公众号提供运营服务和行业解决方案。零售行业的典型代表“有赞”、在线图文排版和“秀米”H5场景制作等。

微信开放平台主要面向App开发者。通常是已经拥有了应用之后，通过开放平台将内容分享至朋友圈或发送给微信好友。例如QQ音乐App的分享，可以直接发送到朋友圈，如图1-5所示。或者是通过微信授权来登录App，如图1-6所示。

图1-5　QQ音乐分享至朋友圈和微信好友

图1-6　QQ音乐可以使用微信账号登录

1.6　微信支付

微信支付改变了人们的支付体验，让支付变得如此轻松。微信支付是集成在微信客户端的支付功能，用户可以通过手机快速完成支付流程。微信支付以绑定银行卡的快捷支付为基础，向用户提供安全、快捷、高效的支付服务。

公众号要接入微信支付，必须是认证的服务号，并且开通微信支付认证。

微信支付的支付模式主要有五种：刷卡支付、扫码支付、公众号支付、H5支付和App支付。

1．刷卡支付

刷卡支付是用户展示微信钱包内的“付款”给商户系统扫描后直接完成支付，主要应用场景是面对面的线下收银，如图1-7所示。

图1-7　扫码支付路径：我-钱包-付款

2．扫码支付

扫码支付是商户系统按照微信支付相关协议生成支付二维码，用户使用微信“扫一扫”完成支付的模式。该模式的主要应用场景有PC网站二维码支付、实体店单品或订单支付等。该模式又称为Native原生支付。

3．公众号支付

公众号支付是用户在微信中打开商户的H5页面，商户在页面中通过调用微信支付提供的JSAPI接口拉起微信支付模块完成支付。主要应用场景有：用户在进入商家的微信公众号，打开某个商品页面完成支付；用户在好友分享的朋友圈、聊天窗口等入口进入商家购买链接，用户点击链接后打开页面完成支付；商户将商品页面转换成二维码，用户扫描二维码后在微信浏览器中打开页面后完成支付。

公众号支付，依赖于微信浏览器环境的JSAPI提供的桥接支付模块。

4．H5支付

H5支付是指商户在微信客户端之外的移动端网页展示商品或服务，用户在上述页面确认使用微信支付时，商户发起本服务拉起微信客户端进行支付。

H5支付主要用于触屏版的手机浏览器请求微信支付的场景。用户可以方便地从外部浏览器唤起微信支付。不过，此支付模式的申请门槛较高。

5．App支付

又称为移动端支付，是商户通过在移动端App中集成开放SDK拉起微信客户端的支付模块，用户完成支付。

微信支付的五大支付场景，几乎涵盖了用户日常生活的所有线上线下支付需求，为O2O行业的支付环节提供了有效的解决方案。

1.7　表情开放平台

微信表情，亿万人都在看的表情。

微信表情开放平台，对所有艺术家开放，只要你设计的表情能让大家在聊天时开怀大笑，就有机会登上微信客户端，获得亿万微信用户的关注。按照一定的制作规范，制作好表情提交审核，通过之后你制作的表情便可以供大家下载使用。用户下载时，假如觉得足够好玩，还可以使用微信支付“打赏”作者，让作者的付出得到回报。

1.8　微信广告

2015年1月，朋友圈出现了第一批商业广告，如图1-8所示。微信试图重新定义社交广告，让广告成为生活的一部分。

微信广告目前有两种方式：朋友圈广告和公众号广告。

朋友圈广告基于微信公众号生态体系，以类似朋友原创内容形式进行展现，在基于微信用户画像进行精准定向的同时，通过实时社交混排算法，依托关系链进行互动传播。这是一种比较有趣的广告呈现方式，出现在朋友圈的广告，大家可以自由评论，这种新颖的呈现方式，让广告的内容成为一个大家热议的话题。再加上朋友圈广告的精准投放，让产品、内容、服务，这些身边的事物，恰好出现。

图1-8　朋友圈广告

除此之外，微信广告还会出现在公众号内，可以推广微信卡券、增加粉丝，等等。

1.9　小结

本章围绕微信生态展开讨论，介绍了微信生态的主要组成部分：公众平台（服务号、订阅号和小程序）、微信开放平台和微信支付等。微信已经不再是一个简单的手机应用，它正在改变着我们的生活方式。下章开始，我们将讲解微信公众号开发的相关技术内容。

第2章　开发环境及技术介绍

本章主要介绍微信公众平台开发环境的搭建，以及用到的主要开发技术。

开发环境的选择跟使用的后端开发语言有一定的关系。微信公众号的开发后端语言不限，只要能和微信服务器正常交互即可。常见的后端开发语言有Java、PHP、C/C++、C#、Python、Node.js和Go语言等。微信官方的SDK代码示例有PHP、Java以及Node.js的版本。笔者选择的开发语言是PHP，并使用集成软件开发包XAMPP（Apache+ MySQL/MariaDB+PHP+Perl）。

2.1　集成软件包介绍

在本地开发时，需要在本地搭建一个能运行Web站点程序的环境。为了简化安装，我们可以选择集成软件包，这种环境集成了运行程序的基本环境，主要包括HTTP服务器，数据库管理软件以及程序设计语言运行环境，如图2-1所示。

这类集成软件开发包主要有以下4个。

• WAMP（Apache+MySQL/MariaDB+PHP/Perl/Python）
  只支持在Windows系统下安装使用，开源平台。

• LAMP（Linux+Apache+MySQL/MariaDB+PHP/Perl/Python）
  只支持在Linux系统下使用，开源平台。

• MAMP/MAMP Pro（Mac+Apache+MySQL+PHP）
  只支持在Mac系统下使用，开源平台，支持PHP多版本切换。

• XAMPP（Apache+ MySQL/MariaDB+PHP+Perl）
  开头的X代表X-OS，代表可以在任何常见操作系统下使用，包括Windows、Mac、Linux，开源平台。

图2-1　集成开发环境架构

上述几个集成软件开发包，从跨平台、易用性、可扩展性和可配置性等方面综合对比，笔者选择的集成开发环境是XAMPP。XAMPP是Apache（HTTP服务器）、MySQL（数据库管理软件）、PHP（程序设计语言）和Perl（脚本语言）的简称。新版本的XAMPP已支持PHP7。

2.2　XAMPP的安装与配置

XAMPP的下载地址是：https://www.apachefriends.org/zh_cn/index.html。读者可根据自己的操作系统选择合适的版本。XAMPP属于Apache发行版，是Apache Friends
（一个推广Apache服务器的非盈利性项目）下面的产品，感兴趣的读者还可以加入社区，地址是：https://community.apachefriends.org/。

笔者下载的是XAMPP for OS X版本。安装过程简单，需要注意的是，在选择安装组件这一步，如图2-2所示，需要勾选“XAMPP Core Files”，这样才能安装完整的集成软件开发包。XAMPP的默认安装目录是/Applications/XAMPP。

安装成功后，启动程序，然后选择Manage Servers，选择Apache Web Server 启动Apache。启动成功后，绿色小灯会亮起，如图2-3所示。假如启动失败，可以切换到Application log，查看原因，常见的原因是系统的80端口被占用。

图2-2　选择安装组件

图2-3　启动XAMPP

选择“Configure”，出现一个简单的设置界面，如图2-4所示。这里可以设置Http以及Https的端口，默认是80和443。在“Open Access Log”和“Open Error Log”中可以分别查看Apache的访问日志和错误日志。

笔者的本地开发环境，访问的URL地址是通过配置Virtual hosts来实现的，例如dev.hello1010.com。这样做的好处是，在多人协作开发时，只要保证各开发者本地的Virtual hosts是一致的，大家的访问URL就是一样的，并且URL中不出现localhost。需要通过以下4步来实现这一点。

图2-4　XAMPP设置界面

① 修改Apache配置文件：在XAMPP的设置界面，如图2-4所示，点击“Open Conf File”打开Apache的配置文件。定位到靠近文件底部的位置或直接搜索“Virtual hosts”，把下方被注释的“ Include etc/extra/httpd-vhosts.conf”这句前面的“#”去掉，如图2-5所示，假如没有被注释则直接跳过这一步。

图2-5　打开Virtual hosts功能

② 修改Apache的httpd-vhosts文件：进入Virtual hosts的目录，在Application/ XAMPP/xamppfiles/etc/extra目录下，打开httpd-vhosts.conf文件，在文件末尾新增配置代码，如下所示。

<VirtualHost *:80>
       DocumentRoot "/Applications/XAMPP/htdocs/dev.hello1010.com/"
ServerName dev.hello1010.com
       ErrorLog "logs/dev.hello1010.com.com-error_log"
       CustomLog "logs/dev.hello1010.com-access_log" common
       <Directory "/Applications/XAMPP/htdocs/dev.hello1010.com">
           Options Indexes FollowSymLinks Includes ExecCGI
           AllowOverride All
           Order deny,allow
           Allow from all
       </Directory>
</VirtualHoswt>

在这里，设置域名为dev.hello1010.com。域名可以根据自身开发情况修改。错误日志和访问日志均在logs/下，并设置了站点根目录的目录为：

/Applications/XAMPP/htdocs/dev.hello1010.com

③ 配置本地hosts文件：打开电脑终端，输入命令“sudo vim /etc/hosts”，按提示输入密码，如图2-6所示。进入vi模式，输入“i”编辑hosts文件，如图2-7所示。在文件末端新增一行代码，把域名“dev.hello1010.com” 映射到本地“127.0.0.1”。编辑完成后保存文件并退出。可以通过ping域名的方式来验证是否配置成功，如图2-8，输入以下命令：

ping dev.hello1010.com

图2-6　打开hosts文件

假如返回类似如下则说明配置成功：

PING dev.hello1010.com (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.042 ms
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.052 ms

图2-7　编辑本地hosts文件

图2-8　ping域名，看是否设置成功

④ 重启Apache：进入Apache的设置界面，在如图2-3所示的界面，点击“Restart”重启。

至此，Apache的配置完成。打开浏览器，输入dev.hello1010.com即可访问。如图2-9所示的输出信息，是CodeIgniter开发框架的默认页面，关于该框架稍后会有详细介绍。

图2-9　在浏览器中访问

2.3　PhpStorm的安装及配置

选择一款好用并且自己心仪的IDE（Integrated Development Environment）非常重要。能支持PHP语言的集成开发环境有很多，比如Eclipse、NetBeans、Zend Studio、PhpStorm等。选择自己习惯使用的开发环境即可，笔者选择的是PhpStorm。

PhpStorm是JetBrains公司开发的一款跨平台PHP集成开发环境，它是一款智能的PHP编辑器，并支持JavaScript、HTML/CSS的智能编写，支持PHP单元测试以及代码重构，如图2-10所示。

图2-10　PhpStorm 10的启动界面

JetBrains是一家位于布拉格的软件开发公司，该公司最为人所熟知的产品是Java语言的IDE—IntelliJ IDEA。该公司旗下的其他比较有名的编辑器主要有以下几款。

• IntelliJ IDEA：一套智能的Java语言开发工具，并支持Android开发。

• PhpStorm：跨平台PHP集成开发环境。

• PyCharm：Python集成开发环境。

• RubyMine：Ruby和Rails集成开发环境。

• WebStorm：智能的HTML/CSS/JS开发环境，Web前端开发人员的首选。

• AppCode：智能的iOS/OS X集成开发环境，与XCode类似。

• CLion：跨平台的C/C++集成开发环境。

• Rader：跨平台C#集成开发环境。

PhpStorm的官方下载地址是https://www.jetbrains.com/phpstorm/，下载安装后，会提示30天免费试用期，过了试用期需要购买才能继续使用。

安装完成之后，可以通过Create New Project（创建新工程）、Open（打开目录）、Create New Project from Existing Files（以向导的方式打开现有工程），或者Check out from Version Control（从源码版本管理器中Check out代码，如从Subversion或Github中下载代码）新建工程，如图2-11所示。

图2-11　PhpStorm打开工程的方法

笔者选择的是直接打开现有工程代码。为了更好地工作，笔者做了以下简单的设置。

① 设置主题：默认的主题是白色背景，不是很利于保护眼睛，可以设置为近黑色的背景，这样长期对着电脑屏幕眼睛不会那么累。在左上角找到PhpStorm菜单，依次打开“Preferences→Appearance&Behavior→Appearance→UI Options”，选择Darcula主题，然后点击右下角的Apply应用该设置就可以看到效果了，如图2-12所示。

② 设置文件头的模板：在文件的头部，可以写上一些作者和代码版本的信息，这样就可以智能地生成文档了。可以对PHP文件和JavaScript文件单独设置，如图2-13所示。笔者设置的文件头部信息如下。

/**
  * 
  * create at ${DATE}
  * @author hellojammy (http://hello1010.com/about)
  * @version 1.0
  *
  */

图2-12　设置PhpStorm的主题为Darcula

图2-13　设置文件的头部信息

这里用到了预定义变量，常用的有日期、时间和文件名等。在设置框的Description中有所有的预定义变量。这里使用了Apache Velocity模板引擎语言，感兴趣的读者可以在这里了解更多：http://velocity.apache.org/engine/devel/user-guide.html#Velocity_Template_Language_VTL:_An_Introduction。

③ 设置常用快捷键：以笔者的经验来看，善用快捷键能从一定程度上提升工作效率。依次打开“Preferences→Keymap”，在Keymaps中选择一种你习惯的IDE快捷键，然后再根据自身的使用习惯做修改。笔者选择的是IntelliJ IDEA Classic(OS X)，先复制一份，然后再修改快捷键，如图2-14所示。

图2-14　设置快捷键

2.4　相关技术介绍

本小节介绍微信公众平台开发中涉及的常见技术，如HTTP的基本概念、POST/GET的基本区别、Redis以及HTML5的相关知识。对以上知识熟悉的读者可以直接略过本小节。

2.4.1　HTTP

HTTP（HyperText Transport Protocol）超文本传输协议，是互联网上应用最为广泛的一种网络协议。它的发展是万维网协会W3C（World Wide Web Consortium）和Internet工作小组IETF（Internet Engineering Task Force）合作的结果。最终发布了一系列的RFC，RFC 1945定义了HTTP/1.0版本。其中最著名的就是RFC 2616。RFC 2616定义了今天普遍使用的一个版本—HTTP 1.1。

HTTP用于从服务器传输超文本到本地浏览器，它可以使网络传输减少，浏览器更加高效。它不仅保证计算机正确快速地传输超文本文档，还确定传输文档中的哪一部分，以及哪部分内容首先显示（如文本先于图形）等。

HTTP的请求响应模型如图2-15所示。HTTP协议是一个无状态协议，是客户端发起请求，服务器响应。

图2-15　HTTP的请求-响应模式

HTTP的请求方法主要包括这几种：GET、POST、HEAD、PUT、DELETE、OPTIONS、
TRACE、CONNECT。其中最常用的是GET、POST、DELETE和PUT，对应的是查、改、删和增4个操作。我们在工作中接触和使用的最多的是GET和POST操作。

GET用于获取/查询资源信息，它主要向服务器发送索取数据的请求，请求的键值对数据通常是通过附加到URL中一起发送给服务器。HTTP规定，GET请求应该是安全的和幂等的；POST用于更新资源信息，向服务器提交数据，请求的数据通常是放在HTTP包的包体中。

注意

　

网络上存在着一些对GET和POST方法的误解，比如从请求数据的长度等方面来比较二者，其实是不够准确和严谨的。在此，笔者查阅HTTP协议的文档后总结如下。

HTTP协议没有对GET和POST长度进行限制。之所以存在这个误解，是因为早期的IE浏览器限制URL长度在2048个字符以内，也会对POST请求的数据限制在80K字节/100K字节以内。不过，在实际项目中，也不宜构造过长的请求URL，一方面是可读性降低，另一方面是过长的URL会增加服务器的处理负担。

自1999年发布HTTP 1.1之后的十几年间，HTTP协议均无更新。HTTP 1.1也是现在使用最多的一个版本，它是HTTP 1.0的一个优化版本，从一定程度上解决了连接无法复用的问题。但是，HTTP 1.1也存在着诸多问题，例如报头字段过于冗长和重复，造成流量的浪费；无法支持服务器推送等。

针对HTTP 1.1的这些问题，业界也提出了各类优化方案，但这些方法都是在尝试绕开协议本身的缺陷，治本不治标。2012年，Google提出了基于TCP的应用层协议SPDY，用以最小化网络延迟，提升网络速度，优化用户的网络使用体验。SPDY并不是一种用于替代HTTP的协议，而是对HTTP协议的增强。HTTP 2.0协议标准的制定是以SPDY为原型进行讨论的，并于2015年正式发布，编号7540（相关链接：http://www.rfc-editor.org/rfc/rfc7450.txt）。

相比HTTP/1.x，HTTP/2.0主要变更和优化点是多路复用、HEAD压缩、服务器推送和优先级请求。关于HTTP2.0和HTTP1.1协议的请求速度对比，可以参考由Akamai公司建立的一个官方演示，地址为：https://http2.akamai.com/demo。同时请求379张图片，从加载时间的对比可以看出HTTP/2在速度上的优势。

新协议的普及需要一定的时间，但HTTP本身属于应用层协议，和当年的IPv6网络层协议不同，它不需要网络基础硬件设施的改造，因此普及速度较快。另外，HTTP 2.0兼容HTTP 1.x协议。Firefox在2015年检测到有13%的HTTP流量使用了HTTP 2.0协议，27%的HTTPS流量也使用了HTTP 2.0协议。

移动端的HTTP 2.0普及情况也在有序地推进。在iOS方面，iOS9+开始自动支持HTTP 2.0。Android方面，需要基于Chrome内核的WebView才能支持HTTP 2.0，而Android系统WebView从Android4.4（KitKat）才改成基于Chrome内核的。

2.4.2　HTML5

HTML5是下一代的HTML，它是HTML、XHTML和HTML DOM的新标准。HTML5的第一份正式草案在2008年公布，经过多个组织和机构的完善和推动，于2014年定稿。

HTML5为下一代Web提供了全新功能，并将引领下一代Web实现类似于桌面应用的体验。它支持的新特性主要包括：本地视频音频的播放、动画、地理信息、硬件加速、本地运行（离线能力）、本地存储、语义化标记等。HTML5将会减少对外部插件的依赖（例如Flash）。目前，主流的浏览器如Chrome、Safari和Firefox均已实现了对HTML5新特性的支持，不过部分功能可能会因浏览器厂商的实现方式不同而产生微小差异。随着移动互联网的发展，HTML5也将成为一个能在各个终端运行的跨平台语言。

2.5　小结

本章主要介绍微信公众号的开发环境及其相关技术，首先介绍主流的集成软件开发包，并从不同维度进行对比，最后选定XAMPP作为讲解示例，并详细介绍了配置过程。IDE选择的是PhpStorm，并介绍了PhpStorm的基本配置。本章的开发环境搭建，只是作为一个示例，读者可以根据自身需求选择其他开发环境。接下来的一章将介绍微信公众号开发前需要具备的知识。

第3章　开发前的准备

本章主要介绍微信公众号开发的相关概念、基本原理、接入指南以及接口调用的权限及频率。本章内容作为公众号开发的必备知识，对于初次接触公众号开发的读者来说尤为重要。

3.1　开发概述

微信公众平台，是微信官方提供给运营者为微信用户提供资讯和服务的平台。公众平台中已经包含了基本运营功能，如文章推送、消息的自动回复等。但是若要实现一些比较复杂的功能及交互，则需要用到微信提供的公众平台开发接口。所有的接口文档都可以在这里找到：https://mp.weixin.qq.com/wiki。

3.1.1　OpenID

用户在跟公众号交互时，为了让程序识别用户的身份，需要有一个身份标识。出于对用户信息安全的考虑，保护用户隐私，微信没有暴露用户的微信号，而是对开发者提供OpenID，它是一个由数字、大小写英文字母和下划线组成的28位字符串，可以将其理解为加密后的微信号。它的产生规则是：每个微信用户针对每个公众账号会产生一个OpenID，如图3-1所示。

图3-1　微信用户与公众号的OpenID对应关系

对于同一个开发者，可能会开发多个公众号以及移动应用，假如需要做到用户共通，则需要在微信开放平台中将这些公众号和移动应用绑定到同一个开放平台账号下。绑定后，同一个微信用户对多个公众号和移动应用仍然会有多个不同的OpenID，但是它们会有一个相同的UnionID，这样用户在同一个平台下就有了唯一标识，可以区分用户的唯一性。

OpenID对开发者来说非常重要，给用户发送微信模板消息、微信支付和获取用户基本信息等这些操作和场景都需要使用到OpenID。另外，它也是微信用户账户与已有系统用户账户体系打通的关键桥梁，稍后的章节有详细介绍。

微信官方对OpenID的生成算法是不公开的，不提供接口从微信号到OpenID的转换。因此，即使知道了用户的微信号和公众号的AppId，也无法推算出用户的OpenID。这样从一定程度上保护了用户隐私。

3.1.2　公众号使用场景

公众号在给用户提供服务时，主要是通过公众号消息会话和公众号网页这两种形式来实现的。

1．公众号消息会话

微信把公众号当作用户的一个联系人，因此，我们在跟公众号交互时，也可以把它当作我们的一个“朋友”，只不过这个“朋友”有些特殊，它的背后有开发者事先定义好的业务逻辑。我们从公众号角度看，可以把消息服务分为被动消息回复、消息群发、模板消息和客服消息四大类。

• 被动消息回复：用户主动给公众号发送消息（如文字、语言和图片等），微信服务器会将该消息转发给开发者预设的服务器，服务器根据接收到的消息，执行相应的代码逻辑，然后把执行结果返回给微信服务器，微信服务器再把消息推送给用户。这是由用户主动发起的消息会话，故称作被动消息回复。

• 消息群发：公众号可以向用户群发消息，比如图文消息。消息群发的频率跟公众号类型相关，订阅号1次/天，服务号4次/月。

• 模板消息：给用户主动推送服务通知类消息，例如服务预约成功提醒、优惠券消费到期提醒。这类消息是通过预先设定的模板来填相应的文案来实现的，微信公众号后台会提供不同行业的模板供开发者选择，假如都不能满足需求，开发者可以自定义模板并提交审核。需要注意的是，用户取消关注公众号后，开发者无法再向用户推送微信模板消息。

• 客服消息：客服场景中，公众号可以给用户发送不限数量的消息，前提是48小时内用户给公众号发送过消息或有过互动，例如在公众号消息对话框中与公众号的交互，用户点击公众号的菜单，这些都是用户和公众号的主动交互。

2．公众号网页

上述的消息会话，只能满足最基础的消息互动，对于更为复杂的业务场景则无法满足。这时，就需要通过网页的形式来提供服务。这是一种非常开放的形式，开发者在开发公众号网页服务时，与其他场景的网页应用一样，需要额外做的就是符合一定的“游戏规则”。在这个网页应用里，可以通过网页授权获取到微信用户的基本信息，也可以通过微信JS-SDK直接调用微信的原生模块，例如微信支付、扫一扫和拍照等。

注意

　

通过网页授权的方式获取用户基本信息时（授权scope值为snsapi_userinfo），需要区分两个场景。

一是用户通过公众号进入到网页，例如从公众号菜单，公众号推送的图文消息进入。这种方式无需用户授权同意，即可直接通过接口调用获取到用户的OpenID和用户基本信息，这称为静默授权。

二是用户在公众号之外进入到网页，例如朋友圈分享的链接、聊天会话的消息链接等，这些场景已经脱离了“通过公众号进入”，这时需要用户主动同意授权，公众号才能获取到用户的基本信息。在此场景下，无论用户有没有关注公众号，都要主动同意授权。

当授权scope为snsapi_base时，所有场景的网页授权都是静默授权，用户无感知。

3.2　公众号消息会话流程

公众号消息会话是公众号与用户交互的基础，因此，理解消息会话的流程，对公众号开发者来说是一门必修课。

一次完整的消息会话流程如图3-2所示。分两个方面来介绍，一方面是消息从微信终端输入，抵达开发者的业务逻辑处理层；另一方面是业务逻辑处理完成之后回复给用户。下面以具体的场景来讲解整个流程，假如用户在公众号会话中输入“hello”，公众号回复“hello world”，其他输入则原样返回。

图3-2　消息会话流程

① 用户从微信客户端输入文本消息“hello”。

② 消息到达微信服务器。

③ 微信服务器按照一定的格式打包消息， POST到开发者预先设定的服务器地址。

④ 开发者服务器接收到POST请求，验证签名是否合法，假如非法，可以忽略该请
求，直接结束，跳转至⑨，或者做其他操作。假如合法，则跳转至⑤。

⑤ 解析请求数据。

⑥ 执行业务逻辑。这里的逻辑是判断文本消息是否为“hello”，假如是，则回复消
息为“hello world”，假如不是，则保留原消息。

⑦ 按照要求组装好回复的消息内容和格式，回复给微信服务器。

⑧ 微信服务器接收到回复消息，输出到用户微信客户端。

⑨ 结束。

流程中的第④步，是一个验证消息是否来自微信服务器的过程，确保调用方的合法性。

3.3　接入指南

由图3-2可知，微信服务器会回调开发者服务器地址，这是开发者实现和微信用户互动的关键。我们需要在微信公众号后台填写开发配置信息。

登录公众号后台后，依次选择“开发→基本配置→服务器配置”。这里需要进行四项设置。

① URL：必须以http://或https://开头，只支持80端口和443端口。

② Token：非常重要的一个值，用来生成签名。微信服务器的每次回调中都会带签名字段（signature），该签名的生成算法跟Token有关。长度为3～32字符，笔者建议随机生成好后填写。

③ EncodingAESKey：消息体加解密密钥，长度为43位字符串。微信提供了随机生成密钥的功能。

④ 消息加解密方式：指的是微信服务器和开发者服务器之间进行通信时，消息体是否需要加密。此处有三种模式：明文模式、兼容模式和安全模式。可根据业务需求，选择加解密类型。加解密要耗费一定的CPU时间，所以可以根据需要来选择。对于安全性要求较高的业务，建议选择安全模式，这也是微信官方推荐的模式。

配置完成后，点击提交，微信服务器会发送一个GET请求到刚刚填写的URL地址中，并带上4个参数，参数及其含义如表3-1所示。

表3-1 验证消息来自微信服务器时附带参数列表

开发者通过验证signature的值来校验请求是否来自微信服务器。假如验证通过，则原样返回echostr参数的内容，此时接入成功。加密流程分为以下三步。

① 将token、timestamp和nonce三个参数进行字典序排序。

② 将三个参数拼接成一个字符串进行sha1加密。比如token=abc、timestamp=123、nonce=456，则sha1(abc123456)。

③ sha1加密后，值与signature比较，假如相同，则说明请求来自微信服务器，否则签名为非法。

校验的PHP代码，在微信的官方文档中有示例，如下所示。

private function checkSignature()
{
  $signature = $_GET["signature"];
  $timestamp = $_GET["timestamp"];
  $nonce = $_GET["nonce"]; 
  $token = TOKEN;
  $tmpArr = array($token, $timestamp, $nonce);
  sort($tmpArr, SORT_STRING);//字典序排序
  $tmpStr = implode( $tmpArr );//拼接成一个字符串
  $tmpStr = sha1( $tmpStr );//sha1加密
  if( $tmpStr == $signature ){
      return true;
  }else{
      return false;
  }
}

至此，微信开发者模式接入成功，接下来就是实现业务逻辑。用户的某些交互和操作，例如向公众号发送消息，点击自定义菜单，开发者的服务器均会收到来自微信服务器推送的消息和事件。收到消息后，执行相应的业务逻辑，返回给微信服务器。

注意

　

微信提供的这种签名验证方法，其实可以适用于对安全性要求不是非常高的API接口调用的验证上。但是，考虑到一种情况，假如有第三方恶意地拦截了这个请求，并且在不修改签名的情况下，篡改或新增一些参数，再重新发送请求到目标服务器，就不安全了。

上述这种行为称为重放攻击（Replay Attacks），是指攻击者发送一个目标主机已接收过的数据包，特别是在认证的过程中，用于认证用户身份所接收的数据包，来达到欺骗系统的目的，主要用于身份认证过程的攻击，破坏认证的安全性。

对于这类重放攻击，有一个方法可以从一定程度上规避：对时间戳timestamp字段进行验证。接收到请求后，把timestamp的值和服务器当前时间进行比较，如果差值大于某个阈值，就认为这是一个非法请求。设置这个阈值的原因是，源服务器和目标服务器的时间不一定完全一致，再加上网络传输存在延时，所以存在一定的时间误差。

3.4　接口权限及调用频率

由于订阅号和服务号的定位和承载的媒体属性不一样，因此它们拥有的接口权限也不一样。简单的理解是，服务号的接口集合大于订阅号。服务号九大高级接口如下。

1．语言识别接口

功能描述：通过语音识别接口，可以将用户发送的语音识别成文本并推送给公众号。

应用场景：开发者可以直接调用微信自主研发的语言识别技术，使用语音输入这种更具互动性的交互来开发更丰富的应用和服务。

2．客服接口

功能描述：通过客服接口，公众号可以在用户发送完消息的一段时间内（目前是48小时）向用户发送消息。

应用场景：此接口主要用于客服等需要人工消息处理环节的场景，方便公众号为用户提供更加优质的服务。从一定程度上解决了公众号只能被动回复消息的问题。

3．OAuth2.0网页授权接口

功能描述：请求用户授权，获取用户OpenID和基本信息，例如昵称、头像、性别、地区等。

应用场景：获取到用户的基本信息后，可以建立公众号自己的账户体系，实现在微信浏览器环境中的自动登录，这个功能在后续章节中有详细介绍。

4．生成带参数的二维码接口

功能描述：公众号可以获取携带不同参数的二维码，用户通过微信“扫一扫”后，微信服务器会把该参数推送给公众号，来实现不同的业务逻辑。

应用场景：对于连锁店的应用来说，可以放不同的二维码在不同的门店，用户扫描后关注公众号，后台可以看到不同门店带来的关注量分别是多少；另外，这个功能还可以用来做账号绑定和朋友圈的商品分销。

5．获取用户地理位置接口

功能描述：获取用户进入公众号会话时的地理位置。

应用场景：提供基于地理位置的LBS服务（Location Based Service）和导航类服务。

6．获取用户基本信息接口

功能描述：根据用户的OpenID，获取用户的基本信息，例如昵称、头像、性别、地区等。

应用场景：获取用户基本信息后，可以建立公众号自己的账户体系，做CRM管理后台等。

7．获取关注者列表接口

功能描述：获取所有关注者的OpenID。

应用场景：结合“获取用户基本信息”接口，可以获取到所有关注者的基本信息，这样就可以知道是哪些用户在关注公众号，并基于用户数据做用户画像分析。

8．用户分组接口

功能描述：可以在微信公众平台后台创建用户分组，并管理这些分组。

应用场景：对不同人群分组，方便管理，实现消息的个性化推送。

9．上传下载多媒体文件接口

功能描述：上传下载多媒体文件到微信服务器，并可以上传一定数量的永久性素材。

应用场景：上传素材到微信服务器，并在推送消息时直接选择这些素材。

这九大高级接口，可以让服务号为用户提供更多服务和应用场景，例如为商家提供O2O类服务等。认证后的订阅号和服务号的主要接口权限和区别如表3-2所示（只列举了部分重要接口，完整接口请登录微信公众平台后台，进入“开发→接口权限”中查看）。

　表3-2 订阅号和服务号的主要接口权限

部分接口每天有调用次数限制，对于粉丝量不大的公众号，微信默认的接口调用次数已经足够使用。接口调用量在短时间内不够用时，可以临时申请提高日调用上限。每三个月可申请一次，申请通过后15天内有效，所有接口的调用量提高至现有调用限额的10倍。

3.5　微信网页开发样式库

微信客户端以极简主义著称，但是又不失易用性，可谓“简约而不简单”。拿微信的“发现”这个菜单来举例，整体分为四大类：朋友圈、工具类、陌生人社交、电商和游戏。把最常用的“朋友圈”和“扫一扫”放在顶部，而其他跟微信聊天及社交主功能关联性不强的功能，都通过一个大类收纳起来，留一个入口。比如“游戏”这个大类，用户进去后会发现功能特别多，有搜索、消息、推荐和排行榜等功能，俨然就是一个游戏栏目的子系统，如图3-3所示。

图3-3　微信-发现和微信游戏页面

微信客户端的简洁设计，现在已经移植到了网页端—WeUI。它是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队专为微信内网页而设计，让用户在微信的环境中使用网页时，就像在使用微信的功能一样，体验更加统一。

目前这套基础样式库包含button、cell、dialog、progress、toast、article、icon等样式，并已在GitHub开源，下载地址：https://github.com/weui/weui。也可以直接扫描图3-4的二维码在手机上预览。此外，微信团队还设计了WeUI-Design样式库，提供Sketch与PSD基础样式库的源文件，下载地址：https://github.com/weui/weui-design。

图3-4　WeUI在线预览二维码

WeUI的源码采用单页面形式，实现了一套简单的页面路由，各页面组件封装到单独的HTML文件中，方便维护。部分运行效果如图3-5所示。WeUI对企业的实际项目具有较高的参考价值。在公司的实际项目开发中，对于一些简单的应用，建议在WeUI的基础上进行二次UI开发。使用WeUI的网页能在微信的环境中营造一个较好的用户体验。笔者后续的案例介绍中也会使用到WeUI的相关基础样式。

图3-5　WeUI运行效果图

3.6　小结

本章首先介绍了OpenID的基本概念，它在公众号的开发中扮演了非常重要的角色。然后介绍了公众号消息会话的流程，分析了消息会话的原理。最后详细介绍了服务号的九大高级接口，以及服务号和订阅号权限的对比，为后续的章节打下基础。