微信公众号开发教程
注:本教程主要以微信公众号开发扫一扫功能为例,其他相关功能可参照微信开放文档
微信开发者文档
文章目录
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网页签名介绍部分及文档。
【注意】
一旦此步骤生成的签名无效,则后续功能便无法正常执行,所以此步骤是微信网页开发过程中的重要一环
签名生成步骤
-
step1:根据公众号AppID和AppSecret生成access_token并进行本地缓存,介绍及生成方式见上文
-
step2:使用上一步中生成的access_token调用接口生成jsapi_ticket并本地缓存
-
step3:按顺序拼接字符串(所使用到的URL应由前端传值)
-
step4:生成方法签名
签名生成后,后端回传签名、生成签名是的时间戳(精确到秒)以及随机字符串,以便前端进行后续执行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扫一扫接口调用成功示例:
如发现错误可参照:
通常比较容易出错的是签名无效,而签名无效比较常见的原因主要有下面几种:
-
页面中执行
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 线上部署参考方案
线上部署方案与测试环境类似,不在此描述。
【建议】
服务上线后,因为页面中不会显示错误信息,可以使用开发者工具进行测试,可以及时发现问题