在此记录一波对接微信公众号的一些经验及注意事项,以供参考
防盗号或诈骗,请不要输入QQ密码
在公众号里打开的网页,遇到输入框时,首先就遇到上面的提示。把它干掉,首要的需求
解决方案:微信公共平台–>公众号设置—>功能设置—>业务域名
授权
点击微信公众号网页,获取用户的openid, 以及其他基本信息(包括头像,微信昵称),这也是基本需求
实现方式有两种,都是基于重定向的
- 请求业务后台地址,获取用户信息后,重定向到前端页面。此时前端需要给后端人员一个外网可访问的首页url,openid及头像等参数作为query值拼接在url上
- 请求微信网页授权地址,获取用户code,重定向到前端页面, code作为query拼接在url上,之后再进行一系列操作(获取用户openid, 及基本信息)。这种情况,url同样由前端提供
所以说,对query值的获取是基本操作,推荐yarn
命令走一波
1 | yarn add qs |
至于选用哪种方式,结合己方业务去考量。
注意:如果是网页授权,重定向的url不能带锚点(#),也不能带query(会被微信Auth2.0重定向后的query覆盖掉),所以hash模式的SPA只能重定向到首页, 微信模板消息同理。
微信JS-SDK
需要做以下配置:
- JS安全域名: 微信公众平台–>公众号设置–>功能设置–>JS接口安全域名
- ip白名单: 获取access_token要用到
需要拿到以下参数:
- appsecret(获取access_token要用到, 这是获取jsapi_ticket的前提)
- appid(获取access_token要用到, 这是获取jsapi_ticket的前提)
后面则是引入js文件,获取jsapi_ticket,并进行配置
jsapi_ticket需要后台提供接口
下面给出基于Nuxt开发的Vue SPA工程的配置实现,以供参考:
1 | // nuxt.config.js |
1 | // plugins/wechat |
扫一扫/二维码
问:是否可以在h5页面中显示自己的微信二维码,让对方扫一扫添加好友?
答:可以在h5页面中调用SDK的
scanQRCode
API, 调用扫一扫功能,里面会有一个“我的二维码”,达到“曲线救国”的目的问:是否可以实现扫一扫后带参跳转?
答:可以,不过需要结合具体场景来考虑实现方式
如果完全由前端来做,那么,这个扫一扫功能必须在公众号的h5页面内,自行处理
scanQRCode
后的处理逻辑,在公众号内实现带参的跳转。如果有后台配合,则可以做到由微信自带的扫一扫功能,扫码后带参进入公众号h5页面
公众号支付
你需要做以下设置:
- 设置JS安全域名:微信公众平台–>公众号设置–>功能设置–>JS接口安全域名(微信JS-SDK要用)
- 设置授权域名:微信公众平台–>公众号设置–>功能设置–>网页授权域名
- 设置支付目录:微信商户平台 –> 产品中心 –> 开发配置–> 微信支付授权目录(支付页面所在的最后一层目录)
你需要拿到以下参数:
- appid(公众账号ID,一定是wx开头的,如wxd678efh567hg6787)统一下单,配置JS-SDK要用到
- mch_id(商户号, 如1230000109) 统一下单要用到
- 商户平台设置的密钥key 统一下单要用到: 微信商户平台(pay.weixin.qq.com)–>账户设置–>API安全–>密钥设置
微信支付分旧版跟新版,如何区分呢?简单来说,写这篇文章的时候,就已经是新版的了
微信支付很多坑,懂的自然懂,但我希望你不需要懂
如果不想看到下面的报错
1 | {"errMsg":"chooseWXPay:fail"} |
请严谨检查以下操作
- 微信支付授权目录一定要配置到最后一层
例如调用微信支付的页面url为
1 | http://portal.deepexi.top/moby-mobile/index.html#/payment-method |
则支付授权目录为
1 | http://portal.deepexi.top/moby-mobile/ |
- 后台参与生成签名的有appId, timeStamp, nonceStr, package, signType
- 后台生成chooseWXPay的签名时,timestamp的s要大写,即timeStamp;appid的i也要大写,即appId
虽然前端调用JS-SDK时是这样的
1 | wx.chooseWXPay({ |
用微信web开发者工具观察,我发现
chooseWXPay
的入参timestamp
自动变成了timeStamp
,对此我只能呵呵了
一般而言,是先生成业务订单,再调用业务支付接口,业务后台调用微信后台进行统一下单,并返回微信JS-SDK需要的签名及各种参数,示例代码如下
1 | // 调用业务支付接口 |
调试
强烈建议第一次对接的时候,微信JS-SDK配置时开启debug
模式,并下载微信web开发者工具观察网络请求
同时需要在公众平台–>开发者中心–>开发者工具, web开发者工具中绑定你的微信帐号