uni-app 纯nvue项目webview打开的本地网页中监听不到 plusready事件

uni-app 纯nvue项目webview打开的本地网页中监听不到 plusready事件

测试过的手机：

  • 小米 红米 x30
  • ipad pro 二代 12.9 ios14

操作步骤：

  1. 建立一个纯nvue项目，编译模式uniapp
  2. 建立hybrid/html目录，目录中建立index.html文件，里面写入 plusready 监听
  3. 建立一个nvue页面，页面中使用 webview打开第二步建立的index.html文件
  4. 测试plusready事件

预期结果：

  • plusready事件能监听到，可以执行事件回调代码

实际结果：

  • 未执行到

bug描述：

纯nvue项目webview打开的本地网页中监听不到 plusready事件

  1. manifest.json-纯nvue项目，nvue编译模式-uniapp
  2. 在nvue页面中，使用webview打开 本地 hybrid/html/index.html 网页，此网页中无法监听到 plusready 事件
    // .nvue 代码  
<web-view :style="'width:' + width + 'px;height:' + height + 'px'" src="/hybrid/html/index.html"></web-view>  

// index.html 中代码  
if(window.plus){    
    alert(1) //此两处代码永远无法执行到  
}else{     
    document.addEventListener("plusready", function(){  
        alert('aaaaaaaaa') //此两处代码永远无法执行到  
    }, false);    
}
  3. 测试设备 红米x30 android10 ipad pro ios14

更多关于uni-app 纯nvue项目webview打开的本地网页中监听不到 plusready事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

app-nvue页面的web-view组件不能运行plus API。 文档里有说明 https://uniapp.dcloud.io/component/web-view

更多关于uni-app 纯nvue项目webview打开的本地网页中监听不到 plusready事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


额，好吧 “app-nvue页面的web-view组件不能运行plus API” 这句话太不起眼了，这么重要的事项，建议粗体标记下。还以为是bug呢

webview文档中的注意事项已经说明了nvue无法使用plus的API，如果想调用的话，建议使用uni.webview.js调用uni部分api或者使用页面通讯完成。

好的，3q

这是一个已知的nvue架构限制问题。在纯nvue项目中，webview组件加载的本地HTML页面无法直接访问5+ API，因此监听不到plusready事件。

原因分析：

  1. nvue页面的webview组件与vue页面的webview实现机制不同
  2. 纯nvue环境下，webview中的页面运行在独立的渲染进程中，无法直接获取到5+运行环境
  3. plus对象和5+事件系统在nvue的webview中不可用

解决方案：

  1. 使用vue页面替代：将webview页面改为vue页面，vue环境下的webview可以正常使用5+ API
  2. 通过postMessage通信：在nvue页面中监听webview的消息，通过evalJS方式向webview注入代码
    // nvue页面
const webview = this.$refs.webview
webview.addEventListener('message', (e) => {
  // 处理来自webview的消息
})

// 向webview注入代码
webview.evalJS('yourCode()')
回到顶部