uniapp-paypal支付（web-view组件对接paypal的web支付）

之前开发的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&currency=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]));
}