前几天做微信公众号 这次用的是vue前端 php后端提供接口
微信支付不管是mvc还是前后分离思想都是一样的
在mvc中 提前要把微信数据赋值在view模板中 支付调起时携带view模板页面数据去微信请求
在前后分离中 要设置一个监听事件 先触发事件请求服务端微信数据到本页面 然后另一个方法携带请求好的参数去微信请求
以下是vue参考代码 希望有所帮助
commitClick () {
if (this.radio == 2) {
this.$layerText('微信公众号仅支持微信支付')
return
}
//自己的参数
var params = {
fee: this.fee,
type: 1
}
//请求服务端 获取微信数据
this.$api.Payment.wechat({
params}).then(res => {
this.list = res
if (typeof WeixinJSBridge === 'undefined') {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
}
} else {
//调起支付
this.onBridgeReady()
}
// eslint-disable-next-line handle-callback-err
}).catch(err => {
})
},
onBridgeReady () {
window.WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
'appId': this.list.appId, // 公众号名称，由商户传入
'timeStamp': this.list.timeStamp, // 时间戳，自1970年以来的秒数
'nonceStr': this.list.nonceStr, // 随机串
'package': this.list.package,
'signType': this.list.signType, // 微信签名方式：
'paySign': this.list.paySign // 微信签名
},
function (res) {
// alert(JSON.stringify(res))
if (res.err_msg === 'get_brand_wcpay_request:ok') {
// 使用以上方式判断前端返回,微信团队郑重提示：
// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
alert('支付成功')
}
if (res.err_msg === 'get_brand_wcpay_request:cancel') {
// 使用以上方式判断前端返回,微信团队郑重提示：
// res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
alert('取消支付')
}
})
}