全网最详细的uniapp微信支付教程,包含APP微信支付、微信内置浏览器支付、微信外h5支付

2

全网最详细的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支付的实现。

支付支付微信支付uni-appthinkphph5支付

版权声明:除非特别标注,否则均为网络文章,侵权请联系站长删除。

上一篇 vue支付项目-APP微信支付功能

下一篇 微信支付V3版本回调+验签流程