1.public/index.html加入代码
<script>
if (navigator.userAgent.indexOf('AliApp') > -1) {
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
}
window.$my = my
</script>
2.vue其他具体页面加入代码
methods: {
async handleFn() {
window.$uni.postMessage(
{
data: {
key: 'H5Fn'
}
})
var userAgent = navigator.userAgent
var isAlipay = userAgent.indexOf('Alipay') !== -1 || userAgent.indexOf('AliApp') !== -1
// 接收来自支付宝小程序的消息。
if (isAlipay) {
var _this = this
window.$my.onMessage = function (e) {
console.log('e', e)
}
}
},
}
3.小程序的webview
<template>
<view>
<web-view :webview-styles="webviewStyles" id="web-view" :src="webviewUrl" @message="getMessage"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
webviewStyles: {
progress: {
color: '#FF3333'
}
},
webviewUrl: ''
}
},
async onLoad(e) {
this.webViewContext = my.createWebViewContext('web-view');
},
methods: {
/**
* @description: 接收h5传递给小程序的消息
*/
getMessage(e) {
let data = e.detail.data
if (data.key === 'H5Fn') {
this.webViewContext.postMessage({ data:“具体返回的数据” });
}
},
},
}
</script>