uniapp前端实现微信支付(小程序、公众号H5、app)
UU-阿Q 2024-08-14 08:33:07 阅读 77
这段时间通过uniapp开发一个三端合一的项目,涉及到不同平台的支付方式,这里为大家简单介绍一下,希望能有所帮助;
阅读: 微信支付文档
一、微信小程序支付
通过wx.login()获取code、调用后端接口获取openid;
wx.login({ -- -->
success (res) {
if (res.code) {
//发起网络请求获取openid,一般是访问后端封装好的接口,也可以通过访问微信官方接口获取
uni.request({
url: '后端接口地址,获取openid',
method: 'GET',
success(res) {
//获取openid:用户真实唯一id进行保存
console.log(res.data.openid)
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
调用后端接口创建订单,获取orderId;
uni.request({
url: '后端接口地址,获取订单id',
method: 'POST',
data: { 传入接口需要的参数,如商品金额,商品个数等 },
success(res) {
console.log(res.data.orderId)
}
})
调用后端接口获取支付核心参数,预支付;
uni.request({
url: '后端接口地址,获取支付核心数据',
method: 'POST',
data: { 传入接口需要的参数,如订单ID,openId等 },
success(res) {
console.log(res.data)
//接口会返回以下核心参数
//timeStamp 时间戳
//nonceStr 随机字符串
//package 统一下单接口返回的 prepay_id 参数值
//signType 签名算法
//paySign 签名
}
})
通过支付核心参数调用wx.requestPayment()发起支付;
//调用微信官方支付接口弹出付款界面,输入密码扣款
wx.requestPayment({
timeStamp, //时间戳
nonceStr, //随机字符串
package, //prepay_id
signType, //签名算法MD5
paySign, //签名
success (res) {
if (res.errMsg == "requestPayment:ok"){
console.log('支付成功', res)
}else{
console.log('支付失败')
}
},
fail (res) {
console.log('支付失败', res)
}
})
二、公众号H5支付
支付方式可以参考两种方式:
JSAPI 支付:通过JSAPI下单接口获取到发起支付的必要参数prepay_id,然后使用微信支付提供的前端JS方法调起公众号支付
在获取订单id、openid后,调用预支付,获取JSAPI核心参数;
uni.request({
url: '后端接口地址,获取支付核心数据',
method: 'POST',
data: { 传入接口需要的参数,如订单ID,openId等 },
success(res) {
//调用下方支付方法
wxpay(res.data)
console.log(res.data)
//接口会返回以下核心参数
//appId 公众号ID
//timeStamp 时间戳
//nonceStr 随机字符串
//package 统一下单接口返回的 prepay_id 参数值
//signType 微信签名方式RSA
//paySign 微信签名
}
})
通过JSAPI核心参数发起支付;
// 检测支付环境中的 WeixinJSBridge
function wxpay(data) {
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady(data), false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady(data));
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(data));
}
} else {
onBridgeReady(data);
}
}
function onBridgeReady(data) {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
// 传入第一步后端接口返回的核心参数
"appId": data.appId, //公众号
"timeStamp": data.timeStamp, //时间戳
"nonceStr": data.nonceStr, //随机串
"package": data.package, //prepay_id
"signType": data.signType, //微信签名方式RSA
"paySign": data.paySign //微信签名
},
function(res) {
// 支付成功
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
}
// 支付过程中用户取消
if (res.err_msg == "get_brand_wcpay_request:cancel") {
}
// 支付失败
if (res.err_msg == "get_brand_wcpay_request:fail") {
}
/**
* 其它
* 1、请检查预支付会话标识prepay_id是否已失效
* 2、请求的appid与下单接口的appid是否一致
* */
if (res.err_msg == "调用支付JSAPI缺少参数:total_fee") {
}
});
}
上一篇: javaEE WebServlet、SpringWebMVC、SpringBoot实现跨域访问的4种方式及优先级,nginx配置跨域
下一篇: 【前端bug】栅格布局(grid布局)导致的父元素高度不固定,子元素设置溢出滚动失效???
本文标签
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。