作者：席新亮,等
出版社：电子工业出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
微信公众平台网页开发实战：HTML5+JSSDK混合开发解密试读：
前言
移动Web的发展速度令人惊叹，近几年所有互联网大企业都在往移动端发展，微信几乎占领了移动互联网的大部分江山，微信的公众号也已超过1000万，越来越多的企业不再建设网站，而是只要有一个包含所有功能的微信公众号就可以了，所有的服务行业也都创建了自己的公众号。由此可见，微信开发的人才需求非常旺盛。
微信公众号实际上就是一个MINI版的浏览器，可以说，HTML 5的网页功能都能在微信公众号内部实现，甚至通过JSSDK，HTML 5网页还可以调用微信提供的所有接口，包括分享、扫一扫、支付、卡券、定位、照片、语音等功能。所以Web开发人员可以设计并实现更多的微信公众号内容，而不用学习更多移动开发的知识，只要会调用这些接口即可。
本书就是一本帮助读者学习微信公众平台+HTML 5网页开发的入门书，只要有简单的HTML和JavaScript知识，就可以开发出一个功能完整的微信公众平台。本书特色
为了与时俱进，从事前端开发工作的读者朋友，都应该了解、学习一下微信的JSSDK，本书中介绍了微信HTML5+JSSDK+微信网页样式的示例代码、技巧和实战案例。本书主要讲解形式如下：（1）针对每个API，都设计一个包含页面结构的完整效果，然后根据API中提供的各个接口，设计好针对每个接口的调用方法。（2）所有的案例代码都很完整，读者在调试不通的情况下，可以直接使用本书资源中的源代码文件进行调试。（3）很多人即使熟悉了API的接口，也不知道如何应用，本书最后还提供了两个完整的项目案例，利用JSSDK+HTML 5的形式，把制作项目的流程、代码和技巧完整地演示出来。本书的结构
第1章：由于做微信HTML 5+JSSDK开发离不开微信公众号，所以首先介绍了微信公众号的注册流程，并讲解一些关于微信后台的操作，以便于读者对微信后台有一个更清晰的认知。
第2章：微信JSSDK的API使用需要搭建微信JSSDK的基础环境，本章综合讲解了搭建过程，为后续接口调用做铺垫。
第3～9章：阐述了微信开放的所有API，包含代码示例、常见问题及一些小技巧。
第10章：详细介绍了如何使用微信提供的网页样式库，结合这些样式和HTML 5，能够开发出更Native的微信公众号。
第11～12章：用案例作为载体，结合比较流行的HTML 5技术，讲解了微信JSSDK在实际项目中的重要作用。
第13章：总结了在微信JSSDK开发中可能面临的一些问题，随后又介绍了在微信调试模式下，一些提示信息的作用。本书写给谁
· Web网页开发人员
· PHP开发人员
· 微信开发人员
· 大学毕业想利用微信平台创业的人员
· 微信公众号的维护人员
· 微信公众号的运营人员
由于作者个人能力有限，书中难免有疏漏之处，欢迎读者朋友提出宝贵的建议。
最后，感谢您购买此书，相信您也是一位前端技术爱好者。祝您在技术及职场生涯中，一帆风顺！
参与本书编写的还有：刘鑫、陈士领、陈丽、毛聪、王琳、张喆、薛淑英、李兰英、周洋、张学军、张兴瑜、陈宇、王健、张鑫，一并感谢他们。席新亮第1章 认识微信公众平台
微信，英文名WeChat，是腾讯公司在2011年1月21日发布的一款产品，主要是在智能终端为用户提供即时通信的免费服务。所有国人都知道，微信这几年有多火，大家见面不再问电话多少，而是问：“您的微信号是什么？”让我们通过一串数字来了解一下国内的微信市场到底有多大。
截至2016年底，微信每月活跃用户已超过了8亿，汇聚的公众号超过了1000万，用户覆盖了200多个国家、超过20种语言，企业号的注册用户也突破了2000万个。微信所获取的广告收入也实现了大幅度的增长，这些广告收入主要来自于朋友圈、移动端新闻应用以及微信公众账号的效果广告。
微信不仅可以帮助使用者跨平台、跨系统地进行语音通信（文字、图片、视频、语音等），还提供了很多衍生服务，例如基于位置与时间流的“摇一摇”、“漂流瓶”、“位置共享”、“公众平台”等。微信已不单单只是一个充满创新功能的手机APP，它已成为中国移动互联网革命的代表。它覆盖了95％以上的智能手机，成为人们生活中不可或缺的日常使用工具，所以更多的商家进入“公众平台”领域，本书讲解的微信网页开发和JS-SDK便是依托于“公众平台”，旨在让商家与用户更加近距离地亲密接触。“公众平台”是给企业、个人及一些组织性服务机构提供的一种新型开放平台。借用微信亿级的用户资源，让“公众平台账号”创造优质内容，服务于普通的大众，增加黏性，形成良性循环。“公众平台账号”简称“公众号”。1.1 微信公众平台账号分类
目前微信“公众号”分为4类：订阅号、服务号、小程序和企业号。这个分类主要以微信开放的权限为参考依据，下面分别介绍。1.1.1 订阅号“订阅号”的目的是为用户提供订阅信息，权限如下：
· 每天只能向订阅者（粉丝）群发一条信息。
· 发送给订阅者（粉丝）的信息，会在“订阅号”文件夹中提醒，点击进去才能进一步查看，如图1.1所示。图1.1 订阅号查看位置和打开后的效果
提醒：个人只能申请“订阅号”。1.1.2 服务号“服务号”的目的是为用户提供服务信息，权限如下：
· 1个月内（自然月）仅可以群发4条信息。
· 发送给订阅者（粉丝）的信息，会直接显示在微信好友对话列表中，不会像订阅号一样被折叠在一个文件夹中，如图1.2所示。图1.2 服务号查看位置
说明：服务号申请需要提交企业或组织机构的相关信息。
服务号与订阅号在功能上的具体区别参见图1.3。图1.3 服务号与订阅号在功能上的具体区别1.1.3 企业号
企业号是“微信公众平台”的一种创新，目标是帮助企业、学校、政府机关及任何组织机构，打通横向、纵向信息流，建立上下游伙伴、内部员工之间的连接，增加协同效率，降低沟通成本，高效的运作。
微信企业号与前两个公众号最主要的区别是，只有限定范围内的用户才可以关注对应的企业号，使用企业号发送的信息数量几乎不受限制。
企业号也显示在微信的首页中，不会像订阅号一样被折叠，如图1.4所示。图1.4 企业号查看位置1.1.4 小程序
微信在2017年1月9日开放了小程序，从其名字就可以看出来，这是一个支持快速注册、快速开发、快速使用、快速离开的程序。小程序最大的特色就是可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
小程序在微信的“发现”栏最下角，打开后会显示曾经使用过的小程序，也可以通过搜索栏搜索其他小程序，如图1.5所示。图1.5 小程序查看位置1.2 微信公众号申请流程
既然微信公众号这么有用，那么作为使用者及开发者如何去申请注册呢？图1.6给出了一个简易的申请步骤。图1.6 微信公众号申请步骤
为了方便读者操作，下面列出详细的步骤：（1）https://mp.weixin.qq.com/cgi-bin/readtemplate?t=register/step1_tmpl＆lang=zh_CN，在浏览器中输入这个链接地址，如图1.7所示。然后输入有效邮箱、密码及验证码，最后勾选“我同意并遵守《微信公众平台服务协议》”复选框，单击“注册”按钮。图1.7 微信公众账号注册页面（2）因为上一步是用邮箱注册的，所以注册后，微信会提示您登录邮箱进行激活，如图1.8所示。图1.8 微信公众账号邮箱激活提示
此时登录你第（1）步填写的邮箱，会收到一封激活邮件，然后单击激活链接，如图1.9所示。图1.9 微信公众账号邮箱激活链接（3）选择账号类型，如图1.10所示。笔者选择“订阅号”演示流程（注意，选择公众号类型后不可更改）。图1.10 微信公众账号选择账号类型（4）选择账户类型后直接进入信息登记页面，选择主体类型，笔者选择“个人”，如图1.11所示。图1.11 微信公众账号选择登记信息
选择“个人”或“企业”后，直接出现信息填写页面，目前微信主推微信支付，已经把微信支付捆绑为公众号的注册条件了，如图1.12所示。图1.12 微信公众账号填写详细登记信息（5）填写信息正确之后，进入填写公众号信息页面，填写的账号名称要合法，不能重复，填写完毕之后即可申请成功，当然此时还需要微信管理员审核。如图1.13所示。图1.13 微信公众账号填写公众号信息1.3 微信公众号的认证
微信的JSSDK接口开发不是所有公众号都可以使用的，这需要不同的权限，例如自定义菜单、高级功能接口（多客服）这些接口就需要被认证过的公众号才可以使用。
目前“微信认证”暂时不支持主体类型是“个人”类型的，如果读者朋友有企业的账号可以申请认证。登录微信公众号后，单击左侧列表中的“微信认证”就可以认证公众号了。如果微信认证通过，会显示如图1.14所示的界面。图1.14 微信认证成功之后界面1.4 公众号设置
成功注册一个公众号之后，需要对公众号进行一些基本的设置。登录公众号后，单击左侧列表中的“公众号设置”，打开公众号的设置页面，这里主要包括“账号详情”与“功能设置”两项，设置都比较简单。要特别说明的是，在“功能设置”中，有一个使用JSSDK需要设置的“JS接口安全域名”（在第2章会介绍），如图1.15所示。图1.15 公众号设置的功能设置界面1.5 成为微信开发者
成为微信开发者有两种方式：一种是在任意公众号内部，通过开通成为开发者；一种是无须公众账号、快速申请接口测试号，只要微信登录就可以。1.5.1 通过公众号
登录微信后，左侧最后有一个“开发”选项，分别包括“基本配置”、“开发者工具”、“运维中心”和“接口权限”4个选项。
1.基本配置（1）单击“基本配置”，如果还没有成为开发者，如图1.16所示。图1.16 成为开发者（2）勾选“我同意”复选框，然后单击“成为开发者”按钮，就会出现我们需要的开发者ID，如图1.17所示。图1.17 开发者ID
2.开发者工具
开发者工具，主要包含了微信开发的一些辅助工具，例如开发者文档、在线接口调试工具、开发者问答系统、接口测试申请系统、公众平台测试账号（如果没有开发权限可以试用）、公众号第三方平台。
3.运维中心
包括数据监控、日志查询、接口报警三个选项。数据监控功能实时统计公众号接口/被动回复调用数据，并支持特定时间段调用数据查询，帮助开发者了解公众号接口调用情况。日志查询可查询公众号48小时内接口调用错误日志。接口报警的功能是专门为开发者设计的，它是为了帮助开发者在自身服务器和接口响应出现问题时，尽快发现问题。接口报警通过微信群来通知，所以需要扫描当前界面下的二维码以加入微信群。
微信自己定义了一些报警的情形，如图1.18所示，我们可以采用默认的阀值，也可以设计自己的阀值。图1.18 接口报警的情形
4.接口权限
□显示接口权限列表，主要告诉当前“公众号”的拥有者有哪些权限能开发，如图1.19所示。图1.19 部分“接口权限列表”1.5.2 通过测试号
微信为开发者提供了测试号，无须开通公众号就可以申请接口测试，直接体验和测试公众平台所有高级接口。输入网址https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login，就可以打开申请界面，如图1.20所示。图1.20 测试号申请
单击“登录”按钮后，使用任意个人的微信号扫描二维码就可以登录，登录后就会获得一个开发者ID，如图1.21所示。图1.21 开发者ID
在测试时如果没有自己的服务器，可以使用一些免费的云服务器来解决，目前国内使用最多的是新浪的SAE，注册送200个云豆，可以免费使用一周左右。1.6 公众号的安全中心
登录微信后在左侧栏中有个“安全中心”选项，腾讯的安全措施做得不错，这个模块中包含了几大安全控制的功能，如图1.22所示。
在“安全中心”里，我们可以修改微信登录密码、可以设置管理员微信号（发布微信时需要用管理员微信的“扫一扫”功能才能发布）、可以设置运营者微信号、可以对“群发”功能实现风险保护，还可以对“开发者中心”重置AppSecret的保护。
作为开发人员或一个平台的维护人员，安全中心是我们在运营产品前必须了解的一个环节。图1.22 安全中心功能列表1.7 本章小结
通过本章的学习，相信以前没有接触过微信公众平台的读者也有一个大概的全貌认知了。本章虽然还没有涉及微信网页的开发，却是微信公众号开发的必备知识，如果我们连什么是公众号都不知道，又何谈公众号的开发呢？本书后面的章节将正式进入微信JSSDK和网页开发的学习。第2章 搭建网页JSSDK开发环境
2015年伊始，微信便开放了JSSDK，从此JSSDK以惊人的速度打造了庞大的HTML 5微信链条。很多寄生于微信平台下的第三方企业热捧微信的公众号开发体系，同时这一SDK也受到了广大程序员的好评。如今已经越来越多的微信开发人员加入到了HTML 5开发的行列中，所以本书更详细地介绍JSSDK+HTML5的微信网页应用，让读者能更好地学习JSSDK。
本章的目的就是帮助读者搭建起自己的JSSDK开发环境。2.1 JSSDK介绍
在学习JSSDK之前，首先要知道JSSDK到底是什么，到底符不符合自己的项目情况。下面笔者就基于官方说明及个人理解，梳理一下。
1.面向的对象
JSSDK主要是针对在微信内部做网页开发的同学们发放的福利，在JSSDK的接口范围内想怎么玩就怎么玩，同时JSSDK也支持网页内微信支付，便利了微信商城的开发。
2.截止到2017年2月1日开放的接口
主要包括基础接口、分享接口、图像接口、音频接口、智能接口、设备信息、地理位置、摇一摇周边、界面操作、微信扫一扫、微信小店、微信卡券、微信支付（具体的接口列表在2.5节中介绍）。
3.接口统一说明
JSSDK的所有接口都通过“wx”（或jWeixin）对象调用，参数以对象形式配置。除了每个接口特有的参数外，所有的接口还有如下一部分通用参数：
· success，调用成功时执行的回调函数。
· fail，调用失败时执行的回调函数。
· complete，无论成功与失败，只要调用完成，就会执行的回调函数。
· cancel，用户取消某项操作时的回调函数。
· trigger，监听Menu中按钮交互时的方法，此参数仅支持Menu中的相关API。
4.JSSDK的大致部署过程
依据账号类型不同，部署有如下两种形式：
1）普通公众账号，大多数开发者都是基于此做开发的。（1）绑定域名。（2）将JS文件引入。（3）配置config接口权限，主要目标是获取access_token与jsapi_ticket，再通过signature进行配置，这几个关键的“配置点”是以后操作JSSDK的重要依据。（4）验证是否接入成功，其中有两个回调函数用于确定结果（ready表示接入成功，error表示接入失败）。
2）第三方平台开发者，这类开发与第一种差别不大，只是在接入方式上略有差异。（1）填写网页的开发域名，将此域名作为旗下的授权公众号，简单的理解就是申请第三方平台开发权限（详情请参考官方的接入前必读-申请资料说明）。（2）与第一种一样，引入JS文件。（3）配置config接口验证，与第一种唯一的区别是在获取jsapi_ticket时，不是通过公众号的access_token获取，而是通过第三方平台的授权公众号token获取，另外，在JSSDK的其他配置中，其他信息都是正常的公众号资料，而非第三方的。（4）验证是否接入成功，其中有两个回调函数用于确定结果（ready表示接入成功，error表示接入失败）。
特别说明：2.2节的代码适用于有自己的服务器并且有自己认证的公众号的读者；2.3节的代码适合使用微信测试号并且公众号还没有认证，但是想学习微信网页开发的读者。2.2 部署JSSDK
部署JSSDK并不难，有时候需要一点后台知识，但也不是太难的那种。本节主要用PHP作为后台参考语言，为了照顾初学者，会把代码写得简单一点。
在2.1节中已经讲解了部署的大致流程，现在与笔者一起详细地部署一下吧。2.2.1 绑定域名
如果读者是第1次绑定域名，则可按照下面的步骤操作：（1）首先需要登录微信公众平台。（2）选择左侧列表栏的“公众号设置”选项，如图2.1所示。图2.1 选择“公众号设置”选项（3）在打开的“公众号设置”界面中，单击“功能设置”选项卡，然后填写JS接口的安全域名。填写的域名一定要合法并且备案，如图2.2和图2.3所示。图2.2 单击“功能设置”选项卡JS接口安全域名图2.3 填写JS接口安全域名2.2.2 引入JS文件
在需要调用微信JSSDK的页面引入JS文件即可，支持使用AMD或CMD的方式加载文件，文件地址为：http://res.wx.qq.com/open/js/jweixin-1.0.0.js。
这里对AMD和CMD规范作一个简单说明。AMD或CMD都是模块加载规范，AMD规范全称是Asynchronous Module Definition，目前requireJS、Node.js、Dojo、jQuery都支持AMD规范。CMD规范的全称是Common Module Definition，该规范明确了模块的基本书写格式和基本交互规则。不管是AMD还是CMD，这些规范的目的都是为了实现JavaScript的模块化开发，特别是在浏览器端的开发。目前这些规范的实现都能达成在浏览器端模块化开发的目的。
说明：在CMD规范中，一个模块就是一个文件。2.2.3 通过wx.config接口验证JSSDK权限
这个环节比较麻烦，也比较关键，它关系到以后所有接口的使用。要想配置wx.config，前期需要做5项准备工作。（1）在“开发”|“基本配置”里，获取AppID和AppSecret，如图2.4所示。目前考虑到安全问题，AppSecret并不在界面中显示，开发者需要自己登记下来，如果忘记，则需要重置。图2.4 微信后台→开发者ID
在开始介绍下一步之前，首先搭建一个通用的微信JSSDK库，以方便流程讲解，并且可以作为将来项目的公共模块使用。此库依赖index.html、PHP脚本、外部库3个文件。
注意：下面的代码比较多，如果读者想尽快阅读，可以直接从本书源码中获取以下文件。如果要了解代码流程，则可参考代码中的注释。
下面是“wxJSSDK”库的JS代码：
试读结束[说明：试读内容隐藏了图片]