全网最详细的uniapp微信支付教程,包含APP微信支付、微信内置浏览器支付、微信外h5支付
全网最详细的uni-app微信支付教程
本教程将指导您完成APP微信支付、微信内置浏览器支付和微信外H5支付的实现。我们将一步步地讲解每个部分,以确保您能够顺利完成微信支付。
一、APP微信支付
1. 微信支付之前就要生成自己的订单了,也就是存在自己服务器的订单在进行微信支付前,我们需要先在自己的服务器上生成一个订单。这个订单将作为微信支付的基础信息。
```javascript// 每个人的请求方式封装不一样,可忽略this.$u.api...
this.$u.api.submitOrder({
good_name: _that.bjInfo.name,
good_id: _that.bjInfo.id,
user_id: _that.user.id,
order_amount: _that.orderAmount}).then(res => {
// 获取订单ID let orderId = res.data.order_id;
// 使用orderId进行微信支付 this.weixinPay(orderId);
});
```
2. 微信支付在上一步中,我们已经获取到了订单ID。现在我们可以使用这个ID进行微信支付。
```javascript// 使用wx.requestPayment接口进行微信支付wx.requestPayment({
'timeStamp': res.data.timeStamp,
'nonceStr': res.data.nonceStr,
'package': res.data.package,
'signType': res.data.signType,
'paySign': res.data.paySign,
'success': function(res) {
// 支付成功后执行的操作 console.log('支付成功');
},
'fail': function(res) {
// 支付失败后执行的操作 console.log('支付失败');
}
});
```
3. 支付结果处理在上一步中,我们已经完成了微信支付。现在我们需要处理支付结果。
```javascript// 支付成功后执行的操作if (res.errMsg === 'requestPayment:ok') {
// 支付成功,更新订单状态 this.updateOrderStatus(orderId, 'paid');
} else if (res.errMsg === 'requestPayment:cancel') {
// 支付取消,更新订单状态 this.updateOrderStatus(orderId, 'canceled');
}
```
二、微信内置浏览器支付
1. 微信内置浏览器支付在APP中,我们可以使用微信内置浏览器进行支付。
```javascript// 使用wx.navigateTo接口打开微信内置浏览器wx.navigateTo({
url: ' 支付结果处理在上一步中,我们已经完成了微信内置浏览器支付。现在我们需要处理支付结果。
```javascript// 支付成功后执行的操作if (res.errMsg === 'navigateTo:ok') {
// 支付成功,更新订单状态 this.updateOrderStatus(orderId, 'paid');
} else if (res.errMsg === 'navigateTo:cancel') {
// 支付取消,更新订单状态 this.updateOrderStatus(orderId, 'canceled');
}
```
三、微信外H5支付
1. 微信外H5支付在APP中,我们可以使用微信外H5进行支付。
```javascript// 使用wx.navigateTo接口打开微信外H5wx.navigateTo({
url: ' 支付结果处理在上一步中,我们已经完成了微信外H5支付。现在我们需要处理支付结果。
```javascript// 支付成功后执行的操作if (res.errMsg === 'navigateTo:ok') {
// 支付成功,更新订单状态 this.updateOrderStatus(orderId, 'paid');
} else if (res.errMsg === 'navigateTo:cancel') {
// 支付取消,更新订单状态 this.updateOrderStatus(orderId, 'canceled');
}
```
以上就是全网最详细的uni-app微信支付教程。希望通过本教程,您能够顺利完成APP微信支付、微信内置浏览器支付和微信外H5支付的实现。