官方描述H5应用场景:
H5支付是指商户在微信客户端外的移动端网页展示商品或服务，用户在前述页面确认使用微信支付时，商户发起本服务呼起微信客户端进行支付。
接口流程图
前端实现代码
首先准备一个地址栏参数截取方法，干什么的？请往下看
// 截取方法
function getUrlParam(name) { //name 代表截取参数名
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
获取code
获取code是为了让后台解析从而得到openID,在网页授权回调的地址中可以获取到用户的code
function getCode() {
/*
① 静默授权：snsapi_base，没有弹窗，只能获取用户的openId。
②非静默授权：snsapi_userinfo，有弹框弹出需要用户手动点击确认授权。可以获取openId，用户的头像、昵称等
secret：秘钥
*/
let par = {
redirectUriWx: 'https://www.baidu.cn/pay/index.html', // 获取code 后回调地址
appid: appcode,
scope: 'snsapi_userinfo',
secret: '0cc67c5ad79e65168c080b66b660ef123'
}
let urlhd = encodeURIComponent(par.redirectUriWx); // 注意一定要encodeURIComponent
var ua = window.navigator.userAgent.toLowerCase();
if (!ua.match(/MicroMessenger/i) == 'micromessenger') {
alert("请在微信环境中使用");
}
const code = getUrlParam('code') // 截取路径中的code
if (code == null || code === '') {
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${par.appid}&redirect_uri=${urlhd}&response_type=code&scope=${par.scope}&state=#wechat_redirect`
}
}
微信支付
微信h5支付两种使用方法介绍：
1：weixinjsbridge.invoke()是微信浏览器的内置方法，
2：wx.choosewxpay在引用的微信jssdk文件中 也调用了weixinjsbridge.invoke() 是对weixinjsbridge.invoke() 的再次封装；
使用方法
*方法一*
wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串，不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: function (res) {
// 支付成功后的回调函数
}
});
*方法二*
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": data.appId, //公众号id，由商户传入
"timeStamp": data.timeStamp.toString(), // 时间戳
"nonceStr": data.nonceStr, // 随机字符串
"package": data.package, //订单详情扩展字符串
"signType": data.signType,//微信签名方式
"paySign": data.paySign //微信签名
},
function (result) {
if (result.err_msg == "get_brand_wcpay_request:ok") {
// 支付成功后回调
}else {
//失败处理
}
}
);
以上是H5微信支付的两种方式
实际调用调取支付
function subMitPay(openid) {
// 下单参数
let params = {
"appId": appcode,
"ip": "123.36.123.3",
"openId": 'SDAKSDKASJDASDJJAD',
"totall": "0.01", //付款金额
"orderId": "SK231231jk1231"//订单id
}
//先进行下单，根据接口返回，注入配置信息
$.ajax({
url: url, // 下单接口地址
type: 'POST',
contentType:'application/json;charset=UTF-8', // 设置json格式
data: params, // 参数
success: function (data) {
//**注入配置信息**
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timeStamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.paySign,// 必填，签名，
jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
});
wx.ready(function () {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
// 方法一 调用支付
wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串，不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '', // 支付签名
success: function (res) {
// 支付成功后的回调函数
}
});
// 方法二 调用支付
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: '', // 支付签名随机串，不长于 32 位
package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
signType: '', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign: '', // 支付签名
}, function (result) {
if (result.err_msg == "get_brand_wcpay_request:ok") {
//支付成功回调
} else {
//支付失败
}
}
);
// 以上两种支付方法，根据需求选取一种
});
}, error: function (code, msg) { }
});
}
以上就是H5微信支付方法啦 (^_^)
