uniapp中webview无发访问到uni对象
时间: 2023-07-28 16:10:04 浏览: 92
在uniapp中,webview组件是一个与当前页面独立的webview窗口,它和当前页面是两个不同的文档环境,因此无法直接访问到uni对象。
如果需要在webview中使用uni对象,可以通过在webview中注入js代码来实现。具体做法如下:
1. 在webview组件的src属性中加入query参数,如下所示:
```
<web-view :src="`/pages/webview/index?url=${encodeURIComponent('https://www.example.com')}`"></web-view>
```
其中,url参数指定了webview要访问的页面地址,encodeURIComponent函数用于将url参数进行编码。
2. 在webview组件的mounted生命周期钩子中,通过uni.postMessage方法向webview发送消息,如下所示:
```
mounted() {
uni.postMessage({
data: 'hello'
});
}
```
3. 在webview中监听message事件,并在事件处理函数中执行需要使用uni对象的代码,如下所示:
```
window.addEventListener('message', function(event) {
if (event.data === 'hello') {
// 在这里可以使用uni对象
console.log(uni);
}
});
```
通过以上步骤,就可以在webview中使用uni对象了。需要注意的是,webview组件只能在真机上运行,不能在H5模式下运行。
阅读全文