【报Bug】nvue 下 plus.globalEvent.addEventListener('plusMessage') 事件不触发

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： macOS Big Sur 11.2.3

HBuilderX类型：正式

HBuilderX版本号： 3.2.11

手机系统： Android

手机系统版本号： Android 12

手机厂商：华为

手机机型： MI 8

页面类型： vue

打包方式：云端

项目创建方式： HBuilderX

示例代码：

nvue页面

 <hbb-webview src="https://baidu.com" />

自定义webview组件

<template>  
  <view v-if="loading" class="spinner">  
    <text class="spinner-txt">加载中</text>  
  </view>  
</template>  

<script>  
export default {  
  name: 'HbbWebview'  
  props: {  
    src: {  
      type: String,  
      default: "",  
    },  
  },  
  data() {  
    return {  
      loading: false,  
    };  
  },  
  created() {  
    const web = plus.webview.create("", `custom-webview_${Date.now()}`, {  
      "uni-app": "none", // 不加载uni-app渲染层框架，避免样式冲突  
      top: uni.getSystemInfoSync().statusBarHeight + 44, // 顶部高度  
      bottom: 0,  
      opacity: 0, // 手动控制内容显示  
      bounce: "vertical", // 垂直方向有反弹效果  
      userSelect: false, // 表示可选择内容  
      errorPage: "none", // 不显示异常页面  
    });  
    this._web = web;  
    web.addEventListener("loaded", () => {  
      if (this._loaded) return; // 防止安卓下多次触发 loaded  
      this._loaded = true;  
      this.onLoading(false);  
    });  
    plus.globalEvent.addEventListener("plusMessage", this.onPlusMessage);  
    plus.webview.currentWebview().append(web);  
    web.loadURL(this.src);  
    this._timer1 = setTimeout(() => this.onLoading(true), 500); // 0.5s显示菊花  
    this._timer2 = setTimeout(() => this.onLoading(false), 2000); // 2s强制打开  
  },  
  beforeDestroy() {  
    plus.globalEvent.removeEventListener(this.onPlusMessage);  
    clearTimeout(this._timer1);  
    clearTimeout(this._timer2);  
  },  
  methods: {  
    onLoading(show = true) {  
      this.loading = show;  
      this._web.setStyle({ opacity: show ? 0 : 1 });  
      if (show) return;  
      clearTimeout(this._timer1);  
      clearTimeout(this._timer2);  
    },  
    onPlusMessage(event) {  
      console.log("onPlusMessage", event);  
    },  
  },  
};  
</script>  

<style lang="scss" scoped>  
.spinner {  
  flex: 1;  
  display: flex;  
  align-items: center;  
  justify-content: center;  

  &-img {  
    width: 100rpx;  
    height: 100rpx;  
  }  

  &-txt {  
    font-size: 24rpx;  
    color: #999;  
  }  
}  
</style>

操作步骤：

hbb-webview 加载一个页面，页面呢调用 uni.postMessage

预期结果：

nvue 页面能获取到 plusMessage 事件

实际结果：

nvue 页面不能获取到 plusMessage 事件

bug描述：

实机测试

vue 下 plus.globalEvent.addEventListener('plusMessage') 正常触发
nvue 下 plus.globalEvent.addEventListener('plusMessage') 没有触发

2021-10-25 17:56 负责人:DCloud_Android_ST 分享

3 个回复

DCloud_Android_ST

没太弄清楚你写个demo吧提供一下我们看下

像素方舟_青阳 (作者)

明天给你，今晚有其他事。页面事 demo.nvue, 组件事 hbb-webview.vue 这种情况下，webview 内注册plusMessage捕获不到消息，但是如果把页面改成demo.vue 就可以了。我安卓和苹果模拟器测试都是一样的。demo明天给你

2021-10-25 20:47
像素方舟_青阳 (作者)

主要是nvue项目中打算使用自定义navigation-bar，然后和web-view组合。webview需要一些hack逻辑（evalJS的注入，titleupdate的捕获等），所以需要自己给予 plus.webview.create 封装一个webview组件出来

2021-10-25 20:49
132liyh

回复像素方舟_青阳: 有解决了吗

2021-11-17 10:18
像素方舟_青阳 (作者)

回复 1***@sina.com: 由于没提供demo，官方还没处理，问题是有的

2021-11-18 11:39
十金科技

回复像素方舟_青阳: 还没解决？

2021-12-04 17:12
像素方舟_青阳 (作者)

回复十金科技: 不是没解决，是没处理

2021-12-07 11:33