微信公众平台开发注意事项

在此记录一波对接微信公众号的一些经验及注意事项,以供参考

防盗号或诈骗,请不要输入QQ密码

在公众号里打开的网页,遇到输入框时,首先就遇到上面的提示。把它干掉,首要的需求

解决方案:微信公共平台–>公众号设置—>功能设置—>业务域名

授权

点击微信公众号网页,获取用户的openid, 以及其他基本信息(包括头像,微信昵称),这也是基本需求

实现方式有两种,都是基于重定向的

  1. 请求业务后台地址,获取用户信息后,重定向到前端页面。此时前端需要给后端人员一个外网可访问的首页url,openid及头像等参数作为query值拼接在url上
  2. 请求微信网页授权地址,获取用户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
2
3
4
5
6
7
8
9
10
// nuxt.config.js
module.exports = {
head: {
script: [
// 接入微信sdk要用
{src: 'https://cdn.bootcss.com/js-sha1/0.4.1/sha1.min.js'},
{src: 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js'},
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// plugins/wechat
/**
* Created by levy on 2018/8/15.
*/
import {wechatAppId, jsApiTicket,} from '@/const/wechat'
export default function({app}) {
if (process.env.NODE_ENV !== 'production') return
app.router.afterEach(async (to, from) => {
let resp
try {
// jsapi_ticket是公众号用于调用微信JS接口的临时票据,由开发者后台实现
resp = await app.$axios.$get(jsApiTicket)
let ticket = resp.payload,
timestamp = new Date().getTime(),
nonceStr = 'nonceStr',
// 注意:就算是SPA工程,路由模式是hash,url也一定是这样获取
// 直接使用这里的代码就好了,否则必定报错,切记切记
url = location.href.split('#')[0]
let str = `jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}`,
signature = sha1(str)
// 配置菜单
wx.config({
// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: wechatAppId, // 必填,公众号的唯一标识
timestamp, // 必填,生成签名的时间戳
nonceStr, // 必填,生成签名的随机串
signature, // 必填,签名,
jsApiList: [
'hideAllNonBaseMenuItem',
'scanQRCode',
'chooseWXPay',
'closeWindow'
] // 必填,需要使用的JS接口列表,如果为空,则后面调用jsApi时将失败
})
wx.ready(function() {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,
// config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
// 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
// 隐藏所有传播菜单, 不能复制链接等, 只能刷新
wx.hideAllNonBaseMenuItem()
})
} catch (e) {
console.error('wechat sdk config error : ', e)
}
})
}

扫一扫/二维码

  1. 问:是否可以在h5页面中显示自己的微信二维码,让对方扫一扫添加好友?

    答:可以在h5页面中调用SDK的scanQRCodeAPI, 调用扫一扫功能,里面会有一个“我的二维码”,达到“曲线救国”的目的

  2. 问:是否可以实现扫一扫后带参跳转?

    答:可以,不过需要结合具体场景来考虑实现方式

    如果完全由前端来做,那么,这个扫一扫功能必须在公众号的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
2
3
4
5
6
7
8
9
wx.chooseWXPay({
timestamp: '', // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串,不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
signType: '', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: res => {
}
})

用微信web开发者工具观察,我发现chooseWXPay的入参timestamp自动变成了timeStamp,对此我只能呵呵了

一般而言,是先生成业务订单,再调用业务支付接口,业务后台调用微信后台进行统一下单,并返回微信JS-SDK需要的签名及各种参数,示例代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 调用业务支付接口
let resp = await this.$axios.$post(wxPayUrl, {
data: {
openId: 'openId', // 用于业务后台调用统一下单接口,该接口要求必传用户openid
orderAmount: 1, // 分
orderDesc: 'orderDesc'
orderNo: 'orderNo_'
}
})
// 利用后台返回的参数,调用微信支付
wx.chooseWXPay({
timestamp: resp.timestamp, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: resp.nonceStr, // 支付签名随机串,不长于 32 位
package: resp.package, // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
signType: resp.signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: resp.sign, // 支付签名
success: res => {
}
})

调试

强烈建议第一次对接的时候,微信JS-SDK配置时开启debug模式,并下载微信web开发者工具观察网络请求

同时需要在公众平台–>开发者中心–>开发者工具, web开发者工具中绑定你的微信帐号

微信公众号支付签名校验工具

参考

网页授权

微信JS-SDK开发文档

微信web开发者工具

Fork me on GitHub