uniapp之APP/微信小程序/公众号支付
涉及到微信支付的都需要从后端接口获取支付配置信息：
await this.$http({
apiName:"wxPayConfig",
type:"POST",
data:{
orderId:this.orderId
}
}).then(res => {
}).catch(_ => {})支付宝支付获取的配置信息参数跟微信不一样，需要单独从接口获取，得到是一长串字符串：
await this.$http({
apiName:"aliPay",
type:"POST",
data:{orderNo:this.orderId}
}).then(res => {}).catch(_ => {})一、APP微信支付
1，manifest的APP SDK中配置好微信支付的appid
2，调用支付：
// #ifdef MP-WEIXIN
let obj = {
nonceStr: res.data.nonceStr,
timeStamp: res.data.timeStamp,
package:res.data.packageValue,
signType:res.data.signType,
paySign:res.data.paySign,
appId: res.data.appId
}
uni.requestPayment({
provider: 'wxpay',
...obj,
success: function (res) {
uni.redirectTo({
url:"/pages/money/paySuccess"
})
},
fail: function (err) {
uni.redirectTo({
url:"/pages/money/payFail"
})
}
});
// #endif二、APP支付宝支付
1，manifest的APP SDK中勾选支付宝支付
2，调用支付：
uni.requestPayment({
provider: 'alipay',
orderInfo: res.data, //支付宝订单数据
success: function (data) {
uni.redirectTo({
url:"/pages/money/paySuccess"
})
},
fail: function (err) {
uni.redirectTo({
url:"/pages/money/payFail"
})
}
});三、微信小程序支付（调用微信支付）
1，manifest的微信小程序配置中填写微信小程序AppID
2，调用支付：
// #ifdef MP-WEIXIN
let obj = {
nonceStr: res.data.nonceStr,
timeStamp: res.data.timeStamp,
package:res.data.packageValue,
signType:res.data.signType,
paySign:res.data.paySign,
appId: res.data.appId
}
uni.requestPayment({
provider: 'wxpay',
...obj,
success: function (res) {
uni.redirectTo({
url:"/pages/money/paySuccess"
})
},
fail: function (err) {
uni.redirectTo({
url:"/pages/money/payFail"
})
}
});
// #endif四、微信公众号内微信支付
1，开通JSAPI支付
2，两个支付方法
（1）使用WeixinJSBridge调用支付
定义方法：
jsApiCall(data ,callback_succ_func ,callback_error_func){
//使用原生的，避免初始化appid问题
WeixinJSBridge.invoke('getBrandWCPayRequest', {
appId:data['appId'],
timeStamp: data['timeStamp'],
nonceStr: data['nonceStr'],
package: data['package'],
signType: data['signType'],
paySign: data['paySign'],
},
function(res) {
var msg = res.err_msg ?res.err_msg :res.errMsg;
//WeixinJSBridge.log(msg);
switch (msg) {
case 'get_brand_wcpay_request:ok': //支付成功时
if(callback_succ_func){
callback_succ_func(res);
}
break;
default: //支付失败时
WeixinJSBridge.log('支付失败!'+msg+',请返回重试.');
if(callback_error_func){
callback_error_func({msg:msg});
}
break;
}
})
},
//WeixinJSBridge判断
wxJsPay(data ,callback_succ_func ,callback_error_func){
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', this.jsApiCall);
document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
}
} else {
this.jsApiCall(data ,callback_succ_func ,callback_error_func);
}
},
//判断是否是微信内浏览器
isWxBrowser(){
if(window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger"){
return true
}else{
return false
}
},支付调用：
//判断是否是公众号
// #ifdef H5
//判断微信浏览器
if(utils.isWxBrowser()){
let obj = {
appId: res.data.appId,
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.packageValue,
signType:res.data.signType,
paySign:res.data.paySign,
}
let callback_succ_func = function(){
uni.redirectTo({
url:"/pages/money/paySuccess"
})
};
let callback_error_func = function(){
uni.redirectTo({
url:"/pages/money/payFail"
})
};
utils.wxJsPay(obj,callback_succ_func,callback_error_func)
}else{
uni.showModal({
title:"提示",
content:"请使用微信打开进行支付",
showCancel:false
})
}
// #endif（2）使用jssdk支付
安装jweixin-module
npm install jweixin-module --save util.js
//获取配置
async configWeiXin(callback) {
//将当前需要使用jssdk的页面传到后端获取公众号配置
let resConfig = await http({
apiName: "wxJsdkConfig",
type:"POST",
data:{
url: encodeURIComponent(window.location.href), //后台通过域名进行授权
}
})
if (resConfig) {
let apiList = [ // 可能需要用到的能力
'onMenuShareAppMessage',
'onMenuShareTimeline',
'hideOptionMenu',
'showOptionMenu',
'chooseWXPay'
];
let info = {
// debug: true, // 调试，发布的时候改为false
appId: resConfig.data.appId,
nonceStr: resConfig.data.nonceStr,
timestamp: resConfig.data.timestamp,
signature: resConfig.data.signature,
jsApiList: apiList
};
jweixin.config(info);
jweixin.error(err => {
console.log('config fail:', err);
});
jweixin.ready(res => {
if (callback) callback(jweixin,resConfig.data.appId); // 配置成功回调
});
}
},
//公众号授权之后会跳回当前页面并带有code参数，可以通过判断当前页面是否有code参数来验证是否授权过
async wxJsdkAuthorize(_appid){
let link = window.location.href;
let _code = '';
if(link.includes("code=")){
_code = link.split("code=")[1].split('&')[0]
}
// 如果拿到_code，调用授权接口，没有拿到就跳转微信授权链接获取
if (_code) {
//如果授权过，可以将code传到后台关联用户账户（适用于登录手机号登录但是没有关联微信账户的情况）
await http({ apiName:"wxJsdkLogin", data:{ code:_code }}); //code传到后台关联账户
} else {
let appid = _appid;
let uri = encodeURIComponent(link);
let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
window.location.href = authURL;
}
},进入页面调用授权：
methods:{
async wxJsdkLogin(jweixin,_appid){
utils.configWeiXin((jweixin,_appid) => {
try{
utils.wxJsdkAuthorize(_appid)
}catch(e){
console.log("授权失败:",e)
}
})
},
}
async onLoad(opt) {
//公众号中进入授权
// #ifdef H5
//判断微信浏览器
if(utils.isWxBrowser()){
uni.showLoading({
title:"授权中...",
mask:true
})
await this.wxJsdkLogin();
uni.hideLoading()
}else{
uni.showModal({
title:"提示",
content:"请使用微信打开进行支付",
showCancel:false
})
}
// #endif
}调用支付：
//判断是否是公众号
// #ifdef H5
//判断微信浏览器
if(utils.isWxBrowser()){
let obj = {
appId: res.data.appId,
timeStamp: res.data.timeStamp,
nonceStr: res.data.nonceStr,
package: res.data.packageValue,
signType:res.data.signType,
paySign:res.data.paySign,
}
let callback_succ_func = function(){
uni.redirectTo({
url:"/pages/money/paySuccess"
})
};
let callback_error_func = function(){
uni.redirectTo({
url:"/pages/money/payFail"
})
};
jweixin.chooseWXPay({
...obj,
success: () => {
callback_succ_func()
},
fail: err => {
callback_error_func()
},
cancel: err => {
callback_error_func()
}
});
}else{
uni.showModal({
title:"提示",
content:"请使用微信打开进行支付",
showCancel:false
})
}
// #endif
公众号支付中，如果需要授权，可以使用jssdk先获取配置再授权，然后调用WeixinJSBridge支付；如果不需要获取配置信息，直接WeixinJSBridge支付即可