支付分为前端发起支付,和后端发起支付两种方式
1.在前端发起支付,uniapp给我们提供好了,可以使用的api接口。
1 2 3 4 5 6 7 8 9 10
| uni.requestPayment({ provider: 'alipay', orderInfo: 'orderInfo', success: function (res) { console.log('success:' + JSON.stringify(res)); }, fail: function (err) { console.log('fail:' + JSON.stringify(err)); } });
|
具体使用方式请查看官方文档
2.后端发起支付
我们调用后端的接口,后端负责对接支付宝,或者微信的支付接口。基本支付宝和微信返回都是一个form表单,在h5端可以直接使用v-html表单form表单,但是这种方式不能在app中使用。我们要借助web-view实现。
web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。
1 2
| <web-view v-if="url.length > 0" :src="url"></web-view>
|
我们如何判断用户的支付结果呢,因为是后端对接的支付宝或者微信的支付接口,返回接口只有后端能监控到。
1 2 3 4 5 6 7 8 9 10 11 12 13 14
|
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
document.addEventListener('UniAppJSBridgeReady', function() { let data = GetRequest() document.querySelector('.btn-list').addEventListener('click', function(evt) { uni.navigateTo({ url: '/pages/orderDetail/orderDetail?orderId=' + data.out_trade_no }) }); });
|
最后说明:这只是本人自己的一些见解,有不足的地方,欢迎大家前来指正。