支付宝小程序、微信小程序和webview通讯

我们的需求是用户在H5界面点击支付按钮，然后想要使用小程序的支付功能，且我们已知小程序中的webview是覆盖整个界面的，所以选择了让用户点击支付按钮时跳转到小程序的一个界面去支付，h5只需要携带参数进入小程序的这个界面即可。

所以核心其实就是让H5直接调用小程序的api去完成页面的跳转

仔细看下面的代码会发现支付宝和小程序的实现不太一样，是因为根据uni-app官网提供的代码如果使用原生js也就是直接写html文件是没有问题的，但是我们公司的H5还是用uniapp写的，又因为官网提供的代码我怎么试支付宝小程序都不吊起UniAppJSBridgeReady，所以支付宝的实现回不太一样

有人会说怎么不用postMessage，可以去官网看一下这个api触发的时机，感觉很扯淡，所以直接摒弃掉，如果后续有小程序和webview更直接的通讯方式会来更新

<template>
	<view>
		<view id="btn" @click="clicks">触51111</view>
	</view>
</template>

<script>
	export default {
		async mounted() {
			// #ifdef H5
			try{
				if (navigator.userAgent.indexOf('AlipayClient') > -1) {
						await this.loadScript("https://appx/web-view.min.js")
				    }else {
						await this.loadScript("https://res.wx.qq.com/open/js/jweixin-1.4.0.js")
				}
				
				if(navigator.userAgent.indexOf('AlipayClient') == -1) {
					this.loadScript("https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js").then(res => {
						  document.addEventListener("UniAppJSBridgeReady", function () {
								let dom = document.getElementById("btn");
								dom.addEventListener("click", () => {
								  uni.navigateTo({
									url: "/pages/main/home/moreApplication",
								  });
								});							  

						  });
					})
				}
			}catch(e){
				alert(e)
				//TODO handle the exception
			}
			// #endif
		},
		methods:{
			clicks() {
				my && my.navigateTo({
					url: "/pages/main/home/moreApplication",
				});

			},
			loadScript(src, attrs) {
			  return new Promise((resolve, reject) => {
				try {
				  let scriptEle = document.createElement('script')
				  scriptEle.type = 'text/javascript'
				  scriptEle.src = src
				  for (let key in attrs) {
					scriptEle.setAttribute(key, attrs[key])
				  }
				  scriptEle.addEventListener('load', function () {
					resolve('成功')
				  })
				  document.body.appendChild(scriptEle)
				} catch (err) {
				  reject(err)
				}
			  })
			}
		}
	}
</script>
<style></style>