支付实现流程
首先前端写一个页面,简单说就是有一个输入支付金额的
然后有一个按钮,点击可以支付。
点击按钮后触发支付方法,就是我下面写的这些代码,复制就可以了。
然后先请求后端的一个方法,把你的价格还有openid之类的传给后端
具体的问后端需要什么信息。这些信息是后端拿来跟微信那边交互拿到信息用的
然后后端在微信那边拿到了信息后会返还给前端
前端在这个请求的成功内继续调用微信的方法uni.requestPayment
把后端传给你的6个参数按我这样写上去,就可以调用起微信的支付功能了。
然后就是正常的支付了。支付成功和支付失败走success和fail方法。
效果图
这是点击了按钮后直接触发这个方法出现的页面
代码
这套代码,如果是在电脑上测试,点击支付后是会显示一个二维码让你扫码支付的。
如果你是手机上测试,就是直接掉起支付,跟上面的图一样。
如果出现了调用不起来的,没反应的,看一下uni.requestPayment内的参数是否错误。比如是否全是字符串的。
async submit() {
//获取用户信息,没有信息的从新登录
if (!uni.getStorageSync('userinfo')) {
uni.navigateTo({
url: '/pages/login/login'
})
return
}
//先调用后台接口获取调用支付需要用到的参数
let [code, res] = await this.$http.post('/applet/wechat/createOrder', {
"openid": uni.getStorageSync("openid"),//从缓存拿到openid
"total_price": 0.01,
"user_id": 440,
"goods_id": 6
})
let data = res.data.data
//调用微信支付功能
uni.requestPayment({
appId: data.appid,//小程序的appid
timeStamp: data.timeStamp,//时间戳,要字符串类型的
nonceStr: data.nonceStr,//随机字符串,长度为32个字符以下。
package: data.package,//prepay_id 参数值,提交格式如:prepay_id=xx
signType: data.signType, //MD5类型
paySign: data.paySign,//签名
success: function(res) {
//支付成功的回调 成功之后你想做什么在这里操作 比如弹窗一个提示:支付成功等
uni.showToast({
title: '支付成功!',
icon: 'success'
})
},
fail: function(err) {
//支付失败的回调 失败之后你想做什么在这里操作 比如弹窗一个提示:支付失败等
console.log(err);
}
});
},