【从零开始搭建uniapp开发框架】（十一）—— 微信支付封装
框架开源地址：https://gitee.com/yunhaotian/uniapp_mobileFrame
开发移动端（微信小程序、H5、App）电商平台需要用到微信支付，下面封装一个微信小程序和H5的支付封装类
在common文件夹下新建 sju.pay.js 文件
sju.pay.js源码：
import ajax from '@/common/sju.ajax.js';
import nav from '@/common/sju.nav.js';
import jsAlert from '@/common/sju.alert.js'
let pay = {
/**
* @description 微信H5调起微信支付
* @param {object} wxJsApiParam 微信支付验证参数(后台接口调用微信商家支付平台回调)
* @param {string} orderCodePay 订单编号
*/
payWeixinH5: function(wxJsApiParam, orderCodePay) {
console.info(wxJsApiParam);
//内部函数
function jsApiCall(jsStr, orderCodePay){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": jsStr.appId,
"nonceStr": jsStr.nonceStr,
"package": jsStr.package,
"paySign": jsStr.paySign,
"signType": jsStr.signType,
"timeStamp": jsStr.timeStamp
},
function(res) {
if (res.err_msg == "get_brand_wcpay_request:ok") {
//微信回调支付成功后，调用后台接口修改订单状态
ajax.post('/api/xxx/xxx', {
orderCodePay: orderCodePay
}, (data) => {
// nav.navigateTo("/my/order") //支付成功跳转页面
nav.navigateBack(1) //支付成功返回上一页
})
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
alert("已取消支付");
} else {
alert("支付失败,请重试");
console.info(res);
}
}
);
}
//方法内代码 --- 开始
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', jsApiCall);
document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
}
} else {
jsApiCall(wxJsApiParam, orderCodePay);
return false;
}
},
/**
* @description 微信小程序支付
* @param {string} orderCodePay 订单编号
*/
payWeiXinApp: function(orderCodePay, success, fail) {
//根据运行环境获取支付的提供程序
uni.getProvider({
service: "payment",
success: (res) => {
//获取到提供程序
var provider = res.provider;
//小程序登录,获取临时code
uni.login({
provider: provider,
success: (data) => {
var code = data.code;
//利用临时code获取用户的openID
//后台接口调用微信接口回调：
//provider:服务提供商
//orderInfo:订单数据
//timeStamp:时间戳从1970年1月1日至今的秒数，即当前的时间
//nonceStr:随机字符串，长度为32个字符以下
//package:统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=xx
//signType:签名算法，暂支持 MD5
//paySign: 签名 参考网址：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=3
ajax.post('/api/xxx/xxx', {
code: code
}, (data) => {
//利用openID和订单编号请求后台下单接口
var openID = data.openID;
ajax.post('/api/xxx/weixinPay', {
openID: openID,
orderCodePay: orderCodePay
}, (data) => {
var order = JSON.parse(data.orderInfo);
uni.requestPayment({
provider: provider,
orderInfo: data.orderInfo,
timeStamp: order.timeStamp,
nonceStr: order.nonceStr,
package: order.package,
signType: order.signType,
paySign: order.paySign,
success: (res) => {
//微信小程序支付成功回调，调用后台接口通知后台支付成功修改数据库订单支付状态
ajax.post('/api/xxx/weixinPaySuccess', {
orderCode: orderCode
}, (data) => {
// 支付成功后进行的操作
success();
})
},
fail: (res) => {
// 支付失败
fail();
}
});
});
});
}
})
}
})
}
}
export default pay;
main.js引入封装类代码：
import sjuPay from './common/sju.pay.js' Vue.prototype.sjuPay = sjuPay;
H5调用微信支付封装方法：
//请求后台的微信支付方法获取支付参数
this.sjuAjax.post('/api/xxx/weixinPay', {
openID: openID,//微信openID
orderCodePay: orderCodePay,//订单编号
userCode: this.jsLogin.getValue('userCode') //用户编号
}, data => {
console.log(data)
//获取成功后，前端调起微信支付
var orderInfo = JSON.parse(data.orderInfo);
console.info(orderInfo);
this.sjuPay.payWeixinH5(orderInfo, orderCodePay);
}, true);
微信小程序调用微信支付封装方法：
//请求后台的微信支付方法获取支付参数
this.sjuAjax.post('/api/xxx/weixinPay', {
openID: openID,//微信openID
orderCodePay: orderCodePay,//订单编号
userCode: this.jsLogin.getValue('userCode') //用户编号
}, data => {
console.log(data)
//获取成功后，前端调起微信支付
this.sjuPay.payWeiXinApp(orderCodePay);
}, true);
