//1
<view @click="gopayFun()">支付费用</view>
//2.引入jweixin-module包,导入jweixin-module
<script>
var wx = require('jweixin-module')
export default {
}
</script>
//具体安装:https://www.npmjs.com/package/jweixin-module
//3.去支付(uniapp开发h5-调用支付)
gopayFun() {
var that = this;
var params = {
userid: that.userid,
total_fee: that.payLowest //支付金额
}
this.$api.appPlateForm('GET', 'user/UnifiedOrder', params, function(res) {
console.log('打印支付res', res)
if (res.return_code == 'SUCCESS') {
that.out_trade_no = res.out_trade_no //订单号
wx.config({
debug: false,
appId: res.appId, // 必填,公众号的唯一标识
timestamp: res.timeStamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.paySign,
jsApiList: ['chooseWXPay']
});
wx.ready(function() {
wx.chooseWXPay({
timestamp: res.timeStamp,
nonceStr: res.nonceStr, // 支付签名随机串,不长于 32 位
package: res.package,
signType: 'MD5', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: res.paySign, // 支付签名
success(res) {
console.log('success:' + JSON.stringify(res));
//用定时器查询是否为已完成状态(限制执行次数为5次)
var repeat = 5;
that.timer = setInterval(function() {
if (repeat <= 0) {
clearInterval(timer);
} else {
repeat--;
that.QueryPayResult() //获取到支付状态
}
}, 1000);
},
fail(res) {
console.log('失败res',res)
uni.showToast({
icon:'none',
title:'未完成支付!'
})
}
});
});
} else {
uni.showToast({
icon: 'none',
title: res.msg,
duration: 1500
})
}
});
},
//微信支付-查询订单支付状态接口
QueryPayResult() {
var that = this;
var params = {
out_trade_no: that.out_trade_no //订单号
}
this.$api.appPlateForm('GET', 'user/QueryPayResult', params, function(res) {
if (res.trade_state == 'SUCCESS') {
uni.showToast({
icon:'none',
title:'支付成功!'
})
//清空定时器
if(that.timer) {
clearTimeout(that.timer);
that.timer = null;
}
//进入下一页
that.steps_active = 2
}else{
uni.showToast({
icon:'none',
title:res
})
}
}, function(err) {
uni.showToast({
icon: 'none',
title: err.msg
})
});
},
【h5调用微信支付】uniapp开发H5-调用微信支付
于 2021-12-27 18:58:37 首次发布