之前开发的app时需要对接paypal支付,对接完以后写的整个开发流程,创建订单是后端写的,所以在create的回调中只把orderId给return出去了
uniapp对接paypal主要是需要html和vue的数据传递 其他步骤和pc端大差不差的,之前写的比较潦草,有问题欢迎指正
paypal支付(web-view组件对接paypal的web支付)
VUE
1、将html文件放入hybrid文件夹中(在web-view中引用的本地html必须放到该文件夹,与pages文件夹同级)
html内容demo:PayPal Buttons Integration
2、将html文件放入web-view组件中
<template>
<view>
<web-view src="/hybrid/html/index.html" @message='handleMessage'></web-view>
</view>
</template>
HTML
3、支付页面可以正常显示以后要请求后台接口,会涉及到uniapp与web-view之间的通信
a、app向we-bview传递数据
// 页面栈最顶层就是当前webview
let currentWebview = this.$scope.$getAppWebview();
setTimeout(() => {
this.wv = currentWebview.children()[0]
}, 1000)
setTimeout(() => {
this.sendRequestData(this.setData) // 获取页面栈 发送数据
}, 1100)// 发送消息到 HTML
sendRequestData(res) {
let param = JSON.stringify(res)
console.log(param);
this.wv.evalJS(`requestData(${param})`);
},
JavaScript
b、web-view接收app数据
<!-- 引入uniapp的SDK (必须引用)-->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"> </script>
<!-- 引入vue方法-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
<!-- 引入paypal-->
<script
src="https://www.paypal.com/sdk/js?client-id=你的clientId¤cy=USD">
</script>
var dataInfo = '' // 在引用依赖的文件后,需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后,才能安全调用 uni 的 API。 document.addEventListener('UniAppJSBridgeReady', function() { uni.getEnv(function(res) {
console.log('获取当前环境:' + JSON.stringify(res));
});
// // 向APP发送消息的方法
// uni.postMessage({
// data: {
// name: 'ff',
// age: '18'
// }
// });
});
// 接收数据
function requestData(data) {
console.log(JSON.stringify(data), '接收数据');
dataInfo = data // 赋值
}
</script>
JavaScript
c、web-view向app发送消息
uni.postMessage({
data // 要发送的数据
});
JavaScript
d、app接收web-view数据
handleMessage(evt) {
console.log(evt);
console.log('接收消息:' + JSON.stringify(evt.detail.data[0]));
}