niuhonghua 2019-06-30
微信文档中的例子如下。
function onBridgeReady(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', { "appId":"wx2421b1c4370ec43b", //公众号名称,由商户传入 "timeStamp":"1395712654", //时间戳,自1970年以来的秒数 "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串 "package":"prepay_id=u802345jgfjsdfgsdg888", "signType":"MD5", //微信签名方式: "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 }, function(res){ if(res.err_msg == "get_brand_wcpay_request:ok" ){ // 使用以上方式判断前端返回,微信团队郑重提示: //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。 } }); } // 下面是兼容不同浏览器绑定事件的方法 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{ onBridgeReady(); }
我们主要是从后台中获取数据传入onBridgeReady这个方法中。
所以第一步是获取数据,第二步是把获取到的数据传入到onBridgeReady方法
第一步:发送请求获取后台数据
1.在对应的api文件下封装请求(get)
export function wechatPay(type, vid, token, point, discount) { let discount_type = discount || null return axios.get(`${Host}/api/save_mobile`,{ params: { pay_type: type, video_id: vid, token, point, discount_type } }) }
2.在对应的组件调用请求
<p @click="_wechatPay(paytype, $route.query.video_id, info.token, info.points)" class="submit">发送支付请求</p>
import { wechatPay } from '../../../api/pay.js' export default { name: 'payfooter', computed: { info() { return this.$store.state.user.info }, // 获取选择支付的方式 paytype() { return this.$store.state.pay.paytype } }, methods: { _wechatPay(type, vid, token, point) { wechatPay(type, vid, token, point).then(res => { console.log(res) // 这个res就是后台返回的数据 }) } } }
3.后台返回的json格式数据如下(这不是console出来,方便显示我就直接把json数据复制过来)
{ "code": 0, "data": { "appId": "wx5beac*******7c40c", "nonceStr": "8491k3******Rs5", "package": "prepay_id=wx07**************2653", "paySign": "CDE21B*************40C1A", "signType": "MD5", "timeStamp": "15******1" }, "msg": null }
第二步:把数据传给onBridgeReady函数
所以真正需要获取的内容是 res.data.data,然后再把res.data.data的值传给onBridgeReady函数
4.重新整理一下代码就是
methods: { _wechatPay(type, vid, token, point) { wechatPay(type, vid, token, point).then(res => { res = res.data if(res.code === 0) { this.onBridgeReady(res.data) // 这样就把res.data传给onBridgeReady函数 } }) }, // 微信支付api相关配置文档 onBridgeReady(data) { if (typeof WeixinJSBridge === 'undefined') { this.$toast({ message: '请使用微信内置浏览器进行支付' }) } else { WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId: data.appId, // 公众号名称,由商户传入 timeStamp: data.timeStamp, // 时间戳,自1970年以来的秒数 nonceStr: data.nonceStr, // 随机串 package: data.package, signType: data.signType, // 微信签名方式: paySign: data.paySign // 微信签名 }, res => { if (res.err_msg === 'get_brand_wcpay_request:ok') { this.$toast({ message: '支付成功' }) this.$router.push({path: '/videoplayer', query: { video_id: this.$route.query.video_id }}) // 支付成功之后跳转的路由 } else { this.$toast({ message: '支付失败' }) } } ) } }, }
与微信支付不同的是,支付宝支付后台是返回form格式的数据,如下
<form name="punchout_form" method="post" action="https://openapi.alipay.com/gateway.do?charset=UTF-8&method=alipay.trade.wap.pay&sign=DEpMkI**********************eWUs6EW3QKlt9OHYv%2FqkporO8Sr5%2Bay5VA9dpx3pAbIiPPajQ2gEcWHvz5bm*******kxH8ZvHUXahQL9S69p9wKNXpXOxYadlsxE8QKGUc4cO5rrgGq08%2BpiOq%2FOz4fLogEBWANXILUMWXNzJn8YryNifZ416Pd%2BxkKgXs%2Fo%2FQDcqEUg*********VXXPRq7IGRGQg%2FpZkOhxCH%2Fq%2B9hnWEncAfQLlAXfPqjdcQTNJ0TJdVr1X1ENOdAr5LQkydWw2EQ8g%3D%3D&return_url=+https%3A%2F%2**********¬ify_url=+https%3A%2F%*********Fpub%2Fapi%2Fv1%2F********allback1&version=1.0&app_id=20********57&sign_type=R***×tamp=2019-0******55&alipay_sdk=al*******.49.ALL&format=json"> <input type="hidden" name="biz_content" value="{"body":"","enable_pay_channels":"balance,moneyFund,bankPay,debitCardExpress,creditCardExpress,creditCard,pcredit,pcreditpayInstallment,coupon,point,voucher,mdiscount,honeyPay","out_trade_no":"132ecf937ad84487aa6cbaeb2ec157fe","product_code":"13","subject":"SpringBoot 2.x微信支付在线教育网站项目实战","timeout_express":"20m","total_amount":"98"}"> <input type="submit" value="立即支付" style="display:none" > </form> <script>document.forms[0].submit();</script>
那么在处理后台数据的时候用下面的方法(参考网络大神)
_wechatPay(type, vid, token, point) { wechatPay(type, vid, token, point).then(res => { const form = res.data const div = document.createElement('div') div.id = 'alipay' div.innerHTML = form document.body.appendChild(div) document.querySelector('#alipay').children[0].submit() // 执行后会唤起支付宝 }) }