uniapp中唤醒支付宝,微信进行支付并返回app
支付分为前端发起支付,和后端发起支付两种方式1.在前端发起支付,uniapp给我们提供好了,可以使用的api接口。uni.requestPayment({provider: 'alipay',orderInfo: 'orderInfo', //微信、支付宝订单数据success: function (res) {console.log('success:' + JSON.stringify(res
·
支付分为前端发起支付,和后端发起支付两种方式
1.在前端发起支付,uniapp给我们提供好了,可以使用的api接口。
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 使用需要手动指定宽高)。
//点击支付的时候,后端返回一个嵌套支付宝或者微信返回的form表单的一个html,把这个url赋值到web-view中
<web-view v-if="url.length > 0" :src="url"></web-view>
我们如何判断用户的支付结果呢,因为是后端对接的支付宝或者微信的支付接口,返回接口只有后端能监控到。
//1.这里我们可以轮询查询后台接口,进而判断用户的支付结果(这种比较消耗服务器的性能)
//2.借助用web-view,后端监控到支付结果,返回一个html网页。(我们需要从web-view里面返回到自己的app,序需要用到web-vie和uniapp通讯)
//在返回的html中引入uniapp的js文件
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
//监听到uniapp的js文件引入成功了,引导用户返回app
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
})
});
});
最后说明:这只是本人自己的一些见解,有不足的地方,欢迎大家前来指正。
更多推荐
已为社区贡献3条内容
所有评论(0)