一、配置公众号及商户平台
打开微信公众号后台-》公众号设置-》功能设置 里配置网页授权域名，域名为项目域名，目的是用户授权时获取code
打开微信商户平台-》支付配置-》公众号支付 配置项目授权域名，主要是为了让微信支付给我们的域名加上域名白名单，支付成功会跳转回我们的页面
二、通过拉起微信授权获取code
1.首先判断是否是微信浏览器，只有微信内置浏览器才能拉起鉴权
if (ua.match(/MicroMessenger/i) == "micromessenger") { //微信浏览器} else { //其他浏览器}
2.请求微信接口
open.weixin.qq.com/connect/oau…
参数含义
|
参数 |
是否必须 |
说明 |
|
appid |
是 |
公众号唯一标识 |
|
redirect_uri |
是 |
授权后重定向的回调链接地址，请使用 urlencode
对链接处理
|
|
response_type |
是 |
返回类型，请填写 code
|
|
scope |
是 |
应用授权作用域， snsapi_base
（不弹出授权页面，直接跳转，只能获取用户
openid
），
snsapi_userinfo
（弹出授权页面，可通过
openid
拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
|
|
state |
否 |
重定向后会带上 state
参数，开发者可以填写
a-zA-Z0-9
的参数值，最多
128
字节
|
|
#wechat_redirect |
是 |
无论直接打开还是做页面 302
重定向时候，必须带此参数
|
**用户授权同意后**
如果用户同意授权，页面将跳转至redirect_uri/?code=CODE&state=STATE。通过decodeURIComponents进行解析url中code参数，Vue项目中不能使用router获取
getUrlKey (name) {//获取url 参数 return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || ["", ""])[1].replace(/\+/g, '%20')) || null; }
三、根据code获取用户唯一标识openid
通过发送code给后台，然后获取openid
四、微信支付
1.通过微信内置浏览器内置对象WeixinJSBridge拉起支付
if (typeof window['WeixinJSBridge'] === 'undefined') { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false); } else if (document['attachEvent']) { document['attachEvent']('WeixinJSBridgeReady', onBridgeReady); document['attachEvent']('onWeixinJSBridgeReady', onBridgeReady); } } else { onBridgeReady({ "appId": appid, //公众号名称，由商户传入 "timeStamp": timeStamp, //时间戳，自1970年以来的秒数 "nonceStr": nonce_str, //随机串 "package": "prepay_id=" + prepay_id, "signType": signType, //微信签名方式： "paySign": paySign //微信签名 }); }
function onBridgeReady (params) { WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId": params.appId, //公众号名称，由商户传入 "timeStamp": params.timeStamp, //时间戳，自1970年以来的秒数 "nonceStr": params.nonceStr, //随机串 "package": params.package, "signType": params.signType, //微信签名方式： "paySign": params.paySign //微信签名 }, function (res) { if (res.err_msg == "get_brand_wcpay_request:ok") { // 使用以上方式判断前端返回,微信团队郑重提示： //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。 } });}
2. 通过微信JsSDK拉起支付
wx.config({ debug: false, nonceStr: nonce_str, appId: appid, signature: sign, timestamp: timeStamp, order_id: params.order_id, jsApiList: [ 'chooseWXPay' ] }) wx.ready(() => { wx.chooseWXPay({ timestamp: timeStamp, nonceStr: nonce_str, package: 'prepay_id=' + prepay_id, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*） signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5' paySign, success: function (res) { // 支付成功后的回调函数 } }); }) wx.error(function (res) { Toast(res) });
五、踩坑记
1. code已经通过url返回，为啥获取不到Code
需要进行decodeURIComponent解析
2.拉起支付时报“支付验证签名失败”
paysign加密错误，要根据文档里写的参数进行加密，加密方式要和统一下单接口一致才可
3.拉起支付时报“当前url未注册”
没有在微信商户平台注册项目域名
