uni-app嵌套webview监听事件

Hou° 2024-09-06 09:03:01 阅读 83

uniapp-主页面

<code><template>

<view class="content">code>

<image class="logo" src="@/static/logo.png"></image>code>

<view class="text-area">code>

<text class="title">Hello RuoYi</text>code>

<button @tap="navGen"> 跳转页面</button>code>

</view>

</view>

</template>

<script>

export default {

data(){

return{

codeUrl:'1',

}

},

onLoad: function() {

},

methods:{

navGen(){

uni.navigateTo({

url: '/pages/webview/webview?url=' + encodeURIComponent('http://www.baidu.com')code>

});

}

}

}

</script>

<style>

</style>

uni-app跳转页面

<template>

<web-view :src="url" @message="onMessage"></web-view>code>

</template>

<script>

// webview.vue

export default {

onLoad(option) {

// 获取传递过来的URL参数

if (option.url) {

this.url = decodeURIComponent(option.url);

}

},

data() {

return {

url: ''

};

},

methods:{

onMessage(e) {

// 接收webview发送的消息

console.log('收到消息',e);

if (e.detail.data[0].action == 'success') {

uni.reLaunch({

url:'/pages/report/index'

})

}

}

}

}

</script>

<style>

</style>

外部页面

引入因为vue页面无法使用uniapp事件

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>code>

具体页面

//判断uni是否已经加载完成,不然在这之前调用是无效的

var timer = setInterval(function(){

if(window.uni){

clearInterval(timer);

uni.postMessage({ data: { action: 'success' } });

}

},1000)



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。