这个是html通知uni-app方法
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({
data: {
action: 'load'
}
})
})
<template>
<web-view id="iframe" ref="webview" @message="onPostMessage"></web-view>
</template>
<script>
let wv = null // html页面实例
export default {
data() {
return {
};
},
onUnload() {
// 退出页面卸载监听
// #ifdef H5
window.removeEventListener('message', this.h5PostMessage, false);
// #endif
},
onLoad() {
// 监听html页面传递过来的消息
// #ifdef H5
window.addEventListener('message', this.h5PostMessage, false);
// #endif
},
onReady() {
// 获取html页面实例
// #ifdef APP-PLUS
const currentWebview = this.$scope.$getAppWebview();
setTimeout(() => {
wv = currentWebview.children()[0]
},100)
// #endif
},
methods: {
h5PostMessage(event) {
// 非postMessage事件过滤掉
if (event.data.data.name != 'postMessage') return;
this.onPostMessage({
detail: {
data: [event.data.data.arg]
}
});
},
onPostMessage(event) {
// html发过来的数据
},
evalJsHeaderClass(info) {
// 注意这里是evalJS 不是 nvue的 evalJs
// #ifdef APP-PLUS
wv.evalJS(`window.html里面的方法(${JSON.stringify(info)})`)
// #endif
// #ifdef H5
if (this.$refs.webview.iframe) {
const _iframe = this.$refs.webview.iframe.contentWindow;
_iframe.html里面的方法(info);
}
// #endif
}
}
};
</script>
<style lang="scss">
.flex-1 {
height: 100%;
}
</style>
