微信公众号开发教程

微信公众号开发教程

注：本教程主要以微信公众号开发扫一扫功能为例，其他相关功能可参照微信开放文档
微信开发者文档

1. 开发须知

1.1 相关概念

1.1.1 AppID

开发者ID，公众号开发识别码，在申请公众号成功后，会在微信公众平台-基本配置-公众号开发信息下看到微信生成的唯一AppID，与下面的AppSecret是进行微信公众号开发的基础

1.1.2 AppSecret

开发者密码，是校验开发者身份的密码，安全性很高，启用时会生成一次，建议生成后妥善保存，若忘记该密码可以重新生成，但是若需要第三方代为开发该公众号，官方建议使用授权方式开发

1.1.3 access_token

所有接口调用是通过该参数调用的，接口调用之前都需要先使用上边的两个参数请求接口获取到access_token，然后才能进行下一步的接口调用工作，该参数一天内获取次数有限，有效时间为7200s(2小时)，所以建议开发者在服务端缓存该参数，防止因获取次数限制导致公众号无法正常提供服务

access_token相关内容可参照以下文档：access_token介绍与获取

1.1.4 jsapi_ticket

jsapi_ticket是公众号用于调用微信JS接口的临时票据，通过access_token获取，和access_token一样，有效期为两小时，同样为了避免影响业务，建议开发者在服务端全局缓存该值

1.1.5 JS_SDK网页签名

网页签名的作用是为了验证在当前页面下所申请JS_SDK接口的使用权限，以为前端在实际进行接口调用时，会调用wx.config过程使用签名及需使用的apiList进行验证，如果出错，讲无法进行之后的接口调用，签名相关内容参照如下链接：JS_SDK签名算法文档

【注】文档中提到的生成签名的URL建议由前端动态获取，传到后端以便生成正确的签名，所描述的“ 当前网页的URL，不包含#及其后面部分 ”意为当前调用JS_SDK的页面URL，也就是当前地址栏中的页面

1.2 开发主要配置

1.2.1 JS安全域名

重要设置，公众号的接口调用权限就是通过这个参数绑定的，配置该参数之后，标识在该域名下的页面均可以使用当前公众号所具有的接口，具体公众号所具有的接口权限可在开发 -》接口权限菜单下查看

【注意】

JS安全域名不允许使用IP，也不允许添加端口号，因此调用JS_SDK的页面URL也不能包含端口号

1.2.2 IP白名单设置

重要设置，该项设置位于 设置 -》安全中心 -》IP白名单，只有设置了IP白名单，才能够正常进行接口调用，比如获取access_token，换句话说，如果需要调用微信接口(获取access_token或其他)，则必须先行配置IP白名单

1.2.3 服务器配置

该配置的作用主要是配置微信服务器，用于处理微信公众号消息请求，场景比如：在公众号内回复‘999’便返回一个对应的链接，这样的功能就需要在微信服务器中实现，本教程暂不提供该部分内容详细配置及使用。

【注意】
根据微信官方文档，配置该项内容后，用户消息会转发至所配置的微信服务器处理，且自动回复和自定义菜单将会失效，另外在配置前应先分配微信服务器，并在该服务器上开发消息校验功能，作用是便于配置时消息验证，以及实际公众号的客户端消息验证

• 服务器URL

该项配置主要是标识微信服务器地址，配置前提是在URL所对应的服务器上要有对应的服务能够处理配置验证的服务，否则配置会失败

• token

该项可随意填写，但是微信服务器中用于消息验证所使用的的token需与此处配置的token保持完全一致

• EncodingAESKey

要求同上

• 消息加解密方式

要求同上

2. 开发与调试

2.1 开发

微信网页开发——扫一扫功能主要使用JS-SDK进行开发，该部分相关开发者文档如下：

微信网页开发之JS-SDK开发者文档

前端操作步骤只需根据文档中的步骤进行开发即可，在这里只介绍后端签名生成部分步骤注意事项，开发前建议先阅读上文JS_SDK网页签名介绍部分及文档。

【注意】

一旦此步骤生成的签名无效，则后续功能便无法正常执行，所以此步骤是微信网页开发过程中的重要一环

签名生成步骤

• step1：根据公众号AppID和AppSecret生成access_token并进行本地缓存，介绍及生成方式见上文

• step2：使用上一步中生成的access_token调用接口生成jsapi_ticket并本地缓存

• step3：按顺序拼接字符串(所使用到的URL应由前端传值)

• step4：生成方法签名

JS_SDK签名算法文档

签名生成后，后端回传签名、生成签名是的时间戳(精确到秒)以及随机字符串，以便前端进行后续执行wx.config进行验证

【建议】

签名生成后，建议使用微信提供的签名算法校验工具校验生成算法是有正确,，若页面上signature字段值与代码中生成的值一致，则签名算法正确

正如示例代码，开发时前端同学应将debug设置为true，以方便排查问题

2.2 本地调试

本次开发调试所使用的的工具主要有以下几个：微信测试公众号、微信开发者工具以及natapp内网穿透工具

2.2.1 微信测试公众号使用

开发者可以在 </>开发 -》 开发者中心菜单下看到公众平台测试账号，扫码登录后就能看到测试所用的AppID和AppSecret，测试时，需要进行测试的同学应先扫描测试号二维码获得测试权限，否则将无法进行测试，然后填写JS接口安全域名，即可进行测试，本地测试时，就需要用到上面说的另一个工具natapp

2.2.2 NATAPP内网穿透工具

使用教程不在此赘述，可参考官方详细文档之-natapp进行微信本地开发调试

作用就是利用该工具生成有效的域名并与本地ip:端口绑定，该过程应由前端实现，将原来访问公众号页面方式由本地切换为使用生成的域名访问，然后将生成的域名配置到测试公众号-JS安全域名上

2.2.3 微信开发者工具

网页调试可以采用Chrome DevTools，但建议使用微信提供的Web开发者工具，详细内容可点击开发者工具使用手册，点击下载

下载并安装完成后，扫码进入工具，选择“微信公众号网页”即可

在上方地址栏输入NATAPP工具生成的域名(假如是 pwdicg.natappfree.cc )，那么在地址栏输入“ http://pwdicg.natappfree.cc/ ”即可访问到本地所开发的公众号网页，如下图为例：

示例页面

设置在第一个扫描图标处调用扫一扫SDK，此时效果图如下：

SDK扫一扫接口调用成功示例：

如发现错误可参照：

全局返回错误码

JS_SDK常见错误及解决方案

通常比较容易出错的是签名无效，而签名无效比较常见的原因主要有下面几种：

• 页面中执行wx.config所使用的AppID与后端生成签名所使用的AppID不一致，可以在上图中查看前端所使用的AppID

• 传递到后端的页面URL有误导致生成的签名无效，此问题多是因为当前页面并非与所配置的JS安全域名一致或为JS安全域名的子级页面，一般来说，例如安全域名配置为wx.qq.com，页面也为wx.qq.com，那是很小概率会出现错误的，或者页面可以配置成wx.qq.com/xx等

3. 测试

测试环境或者线上环境验证都需要保证配置JS安全域名时，能根据URL+文件名获取到校验文件，比如配置安全域名为wx.qq.com/scan，校验文件为XXX.txt，那么当在浏览器中输入http(s)😕/wx.qq.com/scan/XXX.txt时，如果能够看到XXX.txt中的内容，则说明此域名可用；另外在配置提交时，微信方会自动检测是否能够找到校验文件，原理如上所述，在域名后拼接校验文件文件名，如果能够成功找到校验文件，那么会将安全域名保存，否则返回找不到校验文件的提示信息

【注意】
JS安全域名配置每月只能修改三次，提交成功一次即算作一次修改，配置时应慎重

3.1 测试概述

本次测试使用Nginx实现，测试之前应先准备好备案域名，可使用已备案域名申请二级域名

JS安全域名校验文件配置方式由两种：

• 代码实现

开发接口，将接口路径设置为拼接好的查询校验文件路径，以上为例，那么最终访问此接口的完整接口路径就应设置成http(s://wx.qq.com/scan/XXX.txt

• Nginx静态资源实现

将校验文件XXX.txt放置到前端资源包中，通过Nginx加载此校验文件

【备注】

因不同开发环境对于域名解析以及资源加载方式略有不同，无法统一叙述，因此关于域名解析部分及Nginx配置部分仅对笔者所使用环境做一简单叙述

【建议】

为减少错误的发生，当在新服务器上部署此类服务时，最好现行将服务器IP配置到IP白名单中，若不清楚当前服务器详细IP，也可从报错信息中找到IP地址之后配置到白名单，此方法虽有效，但并不提倡！！！

3.2 测试环境搭建参考方案

首先使用已有域名分配二级域名，建议使用云服务器，在配置域名解析以及实际测试中会少走很多弯路，实际部署时，可以只部署签名生成部分代码，减少环境部署时要准备各种环境的工作(已有完整项目运行环境的同学请自行略过)解析至对应部署签名生成服务以及前端代码所在服务器(该环境是将后端及前端代码放置到同一台服务器上)，笔者使用的协议为http，此时域名已确定，那么就可以在微信公众平台配置JS安全域名

完成后，在服务器端配置Nginx进行页面加载及请求转发，此过程不进行详细描述

【注意】

配置完成后请先测试对应服务器80(http协议)端口是否可以外网访问，否则请先开启此端口，测试是否外网访问及开启服务器80端口请自行百度

3.3 线上部署参考方案

线上部署方案与测试环境类似，不在此描述。

【建议】

服务上线后，因为页面中不会显示错误信息，可以使用开发者工具进行测试，可以及时发现问题

附录1 关于内网穿透

网络中的一些概念及内网穿透

NAT穿透