微信公众平台应用开发实践

　　

前腾讯公司资深软件开发工程师专业奉献
　　涉及微信公众平台开发的方方面面，技术先进，原理与实践并重
　　提供餐厅管家、微商城、微酒店、游戏开发、HTML 5小游戏、微信与O2O、
　　微信小程序项目的开发方法、技巧与流程，提升你的实际开发能力

　　本书由前腾讯公司软件开发工程师根据微信6.x版撰写，紧跟微信公众平台的技术发展，是目前微信公众平台应用开发领域涵盖内容较全面、系统和深入的一本书。本书全面介绍了微信公众平台的开发模式、环境搭建、消息接口及高级接口，深入地解析了微信内置浏览器的特性及Weixin JS接口，系统地讲解了开发微信公众号的流程、方法、技巧和注意事项，还简要介绍了微信小程序的开发。本书案例丰富，提供了包括餐厅管家、微商城、微酒店、游戏开发、HTML 5小游戏5个项目的完整开发流程，探讨的内容包括自定义菜单、二维码、微信支付、微信小店、位置服务等。学习完本书，读者完全有能力开发企业级的公众号。
　　本书适合于微信公众平台开发初学者，企业微信公众号开发、公众号运营者及移动互联网开发人员，也很适合有一定开发基础但对微信公众号项目开发不熟悉的读者阅读。

闫小坤，资深软件开发工程师。

第1章 微信公众平台简介 1
1.1 微信：连接一切 2
1.1.1 物联网 2
1.1.2 二维码革命 3
1.2 认识微信公众平台 4
1.2.1 大事记 4
1.2.2 分类：服务号与订阅号 5
1.2.3 微信认证 6
1.2.4 公众号运营 7
1.2.5 微社区 8
1.2.6 微信公众平台管理后台 8
1.3 本章小结 10
第2章 编辑模式和微信公众号 11
2.1 开启编辑模式 12
2.2 自动回复消息 12
2.2.1 开启自动回复 13
2.2.2 被添加自动回复 13
2.2.3 消息自动回复 14
2.2.4 关键词自动回复 15
2.2.5 自动回复优先规则 16
2.3 自定义菜单 17
2.3.1 设置自定义菜单 17
2.3.2 设置动作 18
2.4 投票 19
2.5 案例分析 20
2.5.1 利用自动回复实现我的书目功能 20
2.5.2 自定义菜单的典型案例：小道消息 22
2.5.3 自定义菜单增加历史消息 23
2.6 本章小结 24
第3章 搭建开发环境 25
3.1 启用公众平台开发模式 26
3.1.1 申请网址接入 26
3.1.2 数据交换方式 28
3.1.3 接口列表 28
3.2 新浪云环境搭建 31
3.2.1 应用创建 31
3.2.2 搭建本地开发环境 35
3.2.3 SAE常用服务 38
3.2.4 新浪云虚拟主机 40
3.3 BAE环境搭建 45
3.3.1 创建工程 46
3.3.2 BAE常用服务 47
3.4 开发第一个应用 48
3.4.1 下载PHP SDK 48
3.4.2 微信公众平台接口测试账号申请 48
3.4.3 上传服务器 49
3.4.4 扫描二维码 50
3.5 本章小结 51
第4章 消息接口API 52
4.1 接入开发者模式 53
4.2 基础支持 54
4.2.1 申请测试账号 54
4.2.2 获取access_token 55
4.3 接收消息 58
4.3.1 文本消息 58
4.3.2 图片消息 60
4.3.3 语音消息 61
4.3.4 地理位置消息 62
4.3.5 链接消息 64
4.3.6 公众平台消息体签名及加、解密 67
4.4 接收事件消息 67
4.4.1 关注/取消关注事件 68
4.4.2 扫描二维码事件 69
4.4.3 上报地理位置事件 71
4.4.4 自定义菜单事件 72
4.5 回复消息 74
4.5.1 回复文本消息 74
4.5.2 回复图片消息 75
4.5.3 回复语音消息 76
4.5.4 回复视频消息 78
4.5.5 回复音乐消息 79
4.5.6 回复图文消息 81
4.6 生成带参数的二维码 84
4.6.1 创建二维码ticket 84
4.6.2 通过ticket换取二维码 86
4.7 客服接口 87
4.8 语音识别 92
4.8.1 让微信听懂你的话 92
4.8.2 翻译助手 92
4.9 本章小结 96
第5章 高级接口 97
5.1 自定义菜单 98
5.1.1 自定义菜单的创建 98
5.1.2 自定义菜单的查询和删除 102
5.2 上传/下载多媒体文件 102
5.2.1 上传多媒体文件 102
5.2.2 下载多媒体文件 104
5.2.3 测试案例 105
5.3 用户管理 106
5.3.1 管理分组 106
5.3.2 获取用户基本信息 112
5.3.3 获取用户列表 114
5.4 获取用户地理位置 116
5.5 OAuth 2.0网页授权 117
5.5.1 配置授权回调域名 118
5.5.2 OAuth 2.0授权流程 119
5.5.3 代码实现 122
5.5.4 案例 124
5.6 高级群发接口 126
5.6.1 上传图文消息素材 126
5.6.2 根据分组进行群发 128
5.6.3 根据OpenID列表群发 134
5.6.4 删除群发 134
5.6.5 事件推送群发结果 135
5.7 多客服功能 136
5.8 微信小店 139
5.9 模板消息 140
5.9.1 创建模板 140
5.9.2 发送模板消息 141
5.10 企业号 142
5.10.1 申请企业号 143
5.10.2 组织架构 144
5.10.3 发送通知 145
5.11 本章小结 145
第6章 微信内置浏览器Weixin JS接口 146
6.1 微信内置浏览器 147
6.1.1 特征 147
6.1.2 WeixinJSBridge 148
6.2 WeixinJSBridge使用说明 150
6.2.1 WeixinJSBridge接口一览 150
6.2.2 界面接口 151
6.2.3 分享接口 153
6.2.4 监听事件 156
6.2.5 功能接口 158
6.2.6 第三方App接口 159
6.3 案例 162
6.3.1 WeixinJSBridge的加载顺序 162
6.3.2 隐藏/显示WebView分享按钮 163
6.3.3 隐藏/显示WebView底部的导航栏 165
6.3.4 跳转到扫描二维码界面 167
6.3.5 关闭WebView 168
6.3.6 图片预览 170
6.4 微信iOS客户端内置浏览器适配 172
6.4.1 UIWebview和WKWebview介绍 172
6.4.2 内核切换方法 172
6.4.3 内核识别方法 173
6.4.4 微信内置浏览器内核判断 174
6.4.5 适配注意事项 175
6. 5 本章小结 175
第7章 微信JS-SDK 176
7.1 微信JS-SDK简介 177
7.2 微信Web开发者工具 178
7.3 JS-SDK的使用 180
7.3.1 JS接口安全域名 180
7.3.2 微信客户端版本要求 181
7.4 在SAE上使用JS-SDK 181
7.5 微信网页开发样式库 185
7.6 本章小结 186
第8章 餐厅管家 187
8.1 功能设计 188
8.1.1 需求分析 188
8.1.2 功能演示 189
8.1.3 注意事项 191
8.2 “餐厅管家”的实现一：创建自定义菜单 191
8.2.1 自定义菜单 192
8.2.2 数据库操作类封装 193
8.2.3 微信消息接口 206
8.3 “餐厅管家”的实现二：预约管理 215
8.3.1 数据表设计 215
8.3.2 流程设计 216
8.3.3 网页与样式 217
8.3.4 预约页面 218
8.3.5 我的预约页面 222
8.4 “餐厅管家”的实现三：菜单管理 223
8.4.1 数据表设计 223
8.4.2 菜单展示页面 224
8.4.3 菜单管理后台 226
8.5 “餐厅管家”的实现四：优惠券二维码 226
8.5.1 数据库设计 226
8.5.2 生成二维码优惠券 227
8.5.3 优惠券列表 230
8.5.4 使用优惠券 233
8.5.5 利用WebSocket实现信息推送 237
8.6 “餐厅管家”的实现五：路线导航 239
8.6.1 腾讯地图API 239
8.6.2 数据库设计 240
8.6.3 添加饭店位置 241
8.6.4 获取用户位置 244
8.6.5 路径选择算法 245
8.7 本章小结 252
第9章 微商城 253
9.1 抽奖系统 254
9.1.1 前端展示 254
9.1.2 抽奖动画 254
9.1.3 中奖概率 255
9.1.4 抽奖控制逻辑 256
9.1.5 数据表设计 257
9.1.6 代码实现 258
9.2 微信支付 263
9.2.1 微信支付介绍 263
9.2.2 JS API支付 264
9.2.3 安全支付 269
9.2.4 订单查询 272
9.3 微信小店 274
9.3.1 认识微信小店 274
9.3.2 开店五步 275
9.4 多客服功能 278
9.4.1 服务开通 278
9.4.2 添加客服工号 279
9.4.3 在电脑上使用多客服 280
9.4.4 在微信上使用多客服 280
9.5 本章小结 281
第10章 微酒店 282
10.1 微酒店功能及设计 283
10.1.1 功能 283
10.1.2 数据库设计 283
10.2 功能实现 284
10.2.1 自定义菜单 284
10.2.2 消息处理 286
10.2.3 位置消息 287
10.2.4 附近酒店 288
10.2.5 预订酒店页面 291
10.2.6 用户注册页面 295
10.2.7 添加订单页面 297
10.2.8 我的订单页面 300
10.2.9 退订 303
10.2.10 订单后台管理 304
10.2.11 我的会员卡 307
10.3 本章小结 308
第11章 游戏开发：谁是卧底 309
11.1 谁是卧底功能及设计 310
11.1.1 游戏规则 310
11.1.2 核心流程 310
11.1.3 数据表设计 310
11.2 代码实现 311
11.2.1 消息判断 311
11.2.2 创建游戏 313
11.2.3 创建房间 314
11.2.4 换词 317
11.2.5 改词 318
11.2.6 加入房间 318
11.2.7 后台操作 319
11.3 效果展示 320
11.4 本章小结 321
第12章 HTML 5小游戏开发 322
12.1 一秒钟有多长 323
12.1.1 界面与样式 323
12.1.2 Zepto实现 325
12.1.3 Vue.js实现 327
12.2 测测你是三国杀中的谁——测试类游戏通用解决方案 332
12.2.1 JSON介绍 332
12.2.2 问题和答案的数据结构 333
12.2.3 代码解析 334
12.3 本章小结 337
第13章 微信与O2O 338
13.1 微信小店 339
13.1.1 小店功能 339
13.1.2 开发接口 341
13.2 微信摇一摇周边 342
13.3 微信连Wi-Fi 343
13.4 微信扫一扫 348
13.5 本章小结 349
第14章 公众号与小程序 350
14.1 小程序介绍 351
14.1.1 小程序是什么 351
14.1.2 小程序的开放能力 351
14.1.3 小程序的前世今生 351
14.2 《一秒钟有多长》小游戏 352
14.2.1 游戏规则 352
14.2.2 下载与运行 353
14.2.3 界面、样式与脚本 354
14.3 本章小结 356

第1章 微信公众平台简介
坐拥8亿注册月活跃用户的微信已成为很多人装机的必备软件。人们发语音聊天，刷朋友圈，读公众账号文章，过着离不开微信的日子。对广大开发者有利的是，这个移动互联网上的重要入口一开始就以开放姿态面世。微信提供了公众平台和开放平台，分别供公众账号运营者和移动应用开发者使用。
再小的个体也有自己的品牌。无论是企业、组织，还是媒体、个人，微信公众平台都可以以轻应用的形式提供服务。公众平台的编辑模式使不会编程的用户也能轻松使用，而开发模式和众多的开放接口为开发者提供了广阔的想象空间和难得的机遇。
本章重点介绍一下微信、微信公众平台及公众账号，希望读者在投入微信公众平台开发时，对微信公众平台能做什么、鼓励做什么有一定的认识，避免在开发中走弯路。
1.1 微信：连接一切
不止一种技术幻想过这样的场景：快下班时对空调说“温度降到27度”，对热水器说“烧热水要洗澡”。企业以智能家居为物联网技术的突破口，已经使这样的场景变为了现实。微信不止可以连接人，还可以连接能上网的机器。每个机器都有二维码作为设备ID，在微信里可以通过和设备对话来控制设备。微信作为连接者，已经成为最有价值的、用户与用户最满意的产品之间的桥梁。
1.1.1 物联网
微信有两大逆天功能：摇一摇和扫一扫。前者曾创造了“点亮广州塔”的辉煌事迹，后者则培养了用户见黑白方块就扫的习惯。见到下面印有二维码的奶牛（见图1-1），读者是不是有扫一扫的冲动呢？

图1-1
真的能扫！你会发现打开了网页，上面这样介绍这头奶牛：
名字：Shamrock
品种：黑白花乳牛
每天产30~40升牛奶。
夏天到野外吃新鲜青草，冬天青草不再生长时，改吃青贮饲料。
需要平衡的饮食。
时常有农业科学家来和农场主讨论青贮饲料和谷物的比例，并制定一系列计划来保证它的健康。
这是一篇来自BBC的报道，农场主给奶牛身上涂上二维码来宣传牧场。只要扫一下奶牛身上的二维码，即可知道这头奶牛的所有资料。
奶牛二维码的内容是一个短链接：http://goo.gl/yAE1Q，完整URL为：
http://www.thisisdairyfarming.com/news-press/in-the-news/lady-shamrock/
不能扫一扫的读者可以访问此链接。
这在技术上并不神奇，生成二维码和扫描二维码都是业界成熟的技术。但利用微信“扫一扫”连接奶牛（物理世界）和互联网（信息世界），或者用微信控制家用电器，这种人与物、物与物之间的连接正是物联网的基础。
1.1.2 二维码革命
奶牛身上印有二维码，扫描后显示链接（文字），再跳转到相应的网页。这说明二维码是一种编码方式，这里介绍一下二维码及其前景。
1. 什么是二维码
二维码英文为Quick Response Code，简写为QR Code。通俗地讲，二维码是二维的条形码，可以在水平和竖直方向同时存储信息。生成的二维码图形一般为正方形，根据特定的编码方式，在平面（二维方向）上绘制黑白相间的图形，如微信公众平台的二维码。
大家是否见过图1-2所示的两张火车样票？

图1-2
我相信大多数读者都见过右边的蓝票，左边的红票为软纸票，是1997年确定的车票统一样式。2009年12月，铁路部门对火车票进行升级改版，并在2010年春运前推出磁卡票（蓝票）。
蓝票与红票最明显的变化是车票下方的条形码变成了二维码。

微信公众平台的发展
微信和短信、相机一样，已经逐渐成为手机的标配工具。微信的即时通信、语音、视频聊天、朋友圈、群聊等功能极大程度地迎合了大众的沟通交流需求；微信公众平台、微信开放平台、企业微信等功能极大程度地帮助企业以低成本直接对接大量客户，有效地积累用户；微信小程序、扫一扫功能更是促进线上与线下、虚拟与现实、数字经济和传统经济的融合。在腾讯公司最新披露的数据中，微信月活跃账户数达到8.89亿，公众平台汇聚超过1000万公众账号、20万第三方开发者。对于微信公众平台应用开发来说，公众号也已经成为标配。很难想象一家企业没有自己的服务号，一个媒体人没有自己的订阅号。
笔者一直关注微信公众平台的最新进展。在微信公众平台发布之初，笔者撰写了《微信公众平台开发基础与实践》（机械工业出版社，2014）一书，当时微信版本为5.3；之后又撰写了《微信公众平台应用开发从入门到精通》（清华大学出版社，2015）一书，当时微信版本为6.2。
时光流逝，现在距离上一本书发表已将近两年，微信版本已到6.5。对于高速发展的IT行业来说，两年时间确实能够使知识变得陈旧，技术趋于落后。在这两年时间，微信公众平台发布了微信JS-SDK来为HTML 5提供原生功能支持，增加了微信卡券、微信门店、微信小店等新功能，开放了微信连Wi-Fi、微信摇一摇周边和微信扫一扫接口。最重要的是，微信团队在2017年1月9日发布了小程序，并将其与公众号打通，这给IT从业者带来了新的机遇与挑战。于是，笔者有必要将公众号的最新进展记录下来，给想了解公众号最新技术的读者提供一些帮助。
本书的更新之处除了公众号最新的开放能力外，还有根据读者意见的内容修订。之前的两本书出版后，笔者收到了许多读者的邮件，在疑问、建议和勘误。笔者将读者的意见进行了整理，并在新书出版之际，对书中不明、易混、错误之处加以更正。
如何阅读本书
本书在内容逻辑上分为4部分。
第一部分（第1章～第3章）介绍公众平台的基础知识、编辑模式的使用和开发环境的搭建。通过这部分的学习，读者可以使用编辑模式来运营公众账号，并通过简单的配置来搭建开发环境，开发第一个DEMO应用，为后面的学习打下基础。
第二部分（第4章～第7章）重点介绍公众平台的消息相关接口及九大高级接口，提供完整的封装类，还将介绍Weixin JS和JS SDK开发。读者在学完本部分之后，能够对公众平台提供的全部服务有所了解。本部分将提供众多的案例供读者学习。
第三部分（第8章～第12章）以大项目为例，每章实现一个公众号的功能。5个项目分别为餐厅管家、微商城、微酒店、游戏开发：谁是卧底、HTML 5小游戏开发，探讨的内容包括自定义菜单、二维码、微信支付、微信小店、位置服务等。学习完本部分，读者完全有能力开发企业级的公众号。
第四部分（第13、14章）为拓展阅读，介绍微信公众号在O2O领域的开放能力，并讲解微信重磅推出的小程序。学习完本部分，读者会了解到微信公众号和小程序能做什么、能适应什么样的场景、能有多大的前景。
读者对象
对微信公众平台开发感兴趣的人员。
微信公众账号运营人员。
移动互联网开发人员。
HTML 5开发人员。
已有微信开发基础，但对项目开发不熟悉的开发人员。
有编程经验，希望转型做微信公众平台开发的人员。
技术交流
由于笔者水平有限，加之编写时间仓促，书中难免会出现一些错误或不准确、不全面的地方，恳请读者批评指正。为了更好地和读者交流，笔者建立了一个网站，请访问以下地址：
https://www.weixinbook.net/
同时，读者有任何问题，可以发送邮件到davidsp@foxmail.com邮箱，笔者会尽快为您解答。
代码下载
本书配套源代码的下载地址：https://www.weixinbook.net/download/。若下载有问题，请发送电子邮件至davidsp@foxmail.com，邮件标题为“求代码，微信公众号开发”。
致谢
感谢腾讯公司的微信团队，是他们创造了这款伟大的产品。
感谢清华大学出版社的王金柱编辑，感谢他在我写作过程中提供的帮助和支持。
谨以此书献给我的家人，以及微信公众平台和所有离不开微信的朋友们。

闫小坤
2017年4月于北京