微信内置H5支付
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
场景是用户通过微信扫app内的收款码,跳到一个h5页面。然后完成支付。
代码实现的整体流程:
使用微信扫码,码是app内生成的,码的内容是一个h5页面链接,扫码完成后跳转到自定义的h5支付界面。
扫码进入后,将页面展示所需要的参数进行缓存起来,存到本地。 然后需要微信静默授权。
- 微信静默授权的流程: 配置appid、redirect_uri等参数,从项目页面跳转到微信授权页面:
https://open.weixin.qq.com/connect/oauth2/authorize
详细参考[ 微信官方文档]open.weixin.qq.com/connect/oau…
参数说明
// 示例 let ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == 'micromessenger') { // 回调地址:域名加页面路径 let hdurl = encodeURIComponent('https://.../#/page_wallet'); let appId = '申请项目的appid'; window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${hdurl}&response_type=code&scope=snsapi_base#wechat_redirect`; }
- 当授权后,会自动跳转到配置回调页面,也就是配置的‘redirect_uri’ 相当携带这code,重新打开了项目
- 然后解析url中的code,将code取出,支付的时候将code传给后端。
点击支付的时候,请求接口,使用微信浏览器内置对象WeixinJSBridge
调起微信支付,使用方法如下所示,data就是由后端返回的数据。
function onBridgeReady(data) { WeixinJSBridge.invoke( "getBrandWCPayRequest", { // 公众号名称,由商户传入 appId: data.appId, // 时间戳,自1970年以来的秒数 timeStamp: data.timeStamp, // 随机串 nonceStr: data.nonceStr, package: data.package, // 微信签名方式: signType: "MD5", // 微信签名 paySign: data.paySign, }, 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(); }
在使用uniapp开发中使用的代码如下:
<template> <view v-show="show"> ...内容省略 <view @click="confirmPay">付款</view> </view> </template> <script> // 支付接口 import { payment_code } from '@/api/wallet'; export default { data() { return { show: true, // 控制页面展示 user: {}, // 页面信息 form: { price: '', type: 0, code: null, receiver_id: null }, // 提交参数 paydata: {} //返回的支付信息 }; }, onLoad(e) { // 扫码后第一次进入该页面时 if (e.id) { this.user = { name: e.name, id: e.id, }; this.form.receiver_id = e.id; // 将信息存到本地 uni.setStorageSync('userpay', this.user); }else{ // 第二次进入(授权成功后,通过回调进入的页面) let data = uni.getStorageSync('userpay'); this.user = { name: data.name, id: data.id, }; this.form.price = data.price; this.form.receiver_id = data.id; let ua = window.navigator.userAgent.toLowerCase(); //判断是不是微信 if (ua.match(/MicroMessenger/i) == 'micromessenger') { // 第二次进来时,路径上已经携带了code,获取code。 this.form.code = this.getUrlParam('code'); } } // 去授权 this.goAuthorization() }, methods:{ // 授权方法 goAuthorization(){ let ua = window.navigator.userAgent.toLowerCase(); // //判断是不是微信 if (ua.match(/MicroMessenger/i) == 'micromessenger') { // 判断是否已经获取了code if (this.form.code == null || this.form.code === '') { // 如果还没有code,就跳转授权页面 let hdurl = encodeURIComponent('https://.../#/page_wallet'); let appId = '申请项目的appid'; window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${hdurl}&response_type=code&scope=snsapi_base#wechat_redirect`; }else{ // 有code的话,就将页面内容显示出来 this.show = true; } } } }, // 点击支付后,调用 confirm(e) { uni.showLoading({}); uni.$u.http.post('支付接口',this.form).then(res=>{ uni.hideLoading(); // 将返回的data赋值 this.paydata = res.data.data; let that = this; // 绑定事件 if (typeof WeixinJSBridge == 'undefined') { if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', that.wxonBridgeReady, false); } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', that.wxonBridgeReady); document.attachEvent('onWeixinJSBridgeReady', that.wxonBridgeReady); } } else { this.wxonBridgeReady(); } }).catch((err) => { // 如果接口调用失败了,将信息存起来,再走一遍授权。 this.user.price = this.form.price; uni.setStorageSync('userpay', this.user); this.form.code = null; this.goAuthorization(); }); }, // 微信支付 wxonBridgeReady(){ let that = this; WeixinJSBridge.invoke( 'getBrandWCPayRequest', { appId: that.paydata.appId, timeStamp: that.paydata.timeStamp, nonceStr: that.paydata.nonceStr, package: that.paydata.package, signType: that.paydata.signType, paySign: that.paydata.paySign }, function (res) { // 如果取消了支付,就关闭当前h5页面,直接返回微信,也可以进行其他操作,通过res.err_msg来判断即可 if (res.err_msg == 'get_brand_wcpay_request:cancel') { //关闭当前浏览器 WeixinJSBridge.call('closeWindow'); } // 这里是支付成功 if (res.err_msg == 'get_brand_wcpay_request:ok') { // 使用以上方式判断前端返回,微信团队郑重提示: //res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。 } } ) }, // 获取路径上参数的方法,用于获取code getUrlParam(name) { const url = window.location.href; const queryString = url.split('?')[1]; if (!queryString) return null; const params = queryString.split('&'); for (const param of params) { const [key, value] = param.split('='); if (key === name) { return decodeURIComponent(value); } } return null; }, } </script>
如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。