uniapp+vue3，通过plus创建webview加载vue项目网页，网页如何向uniapp传消息？

欢迎到专业群（ uni-app鸿蒙化技术交流群 ） 咨询，群中有相关专业的管理员和群友。

根据您的问题描述，您是在鸿蒙（HarmonyOS）平台上，通过 plus.webview.create() 创建 webview 加载一个 Vue 项目网页，现在需要网页向 uni-app 宿主传消息以执行关闭和跳转。

这里有一个关键的前提需要明确：在鸿蒙平台上，plus 对象不可用。您使用的 plus.webview.create 是 App（Android/iOS）平台的 API，无法直接在鸿蒙平台使用。因此，您遇到的问题根源在于平台 API 的不兼容。

针对鸿蒙平台的 webview 通信，官方提供了专门的解决方案。以下是详细的实现步骤：

1. 核心方案：使用 uni.createWebviewContext 和 evalJs

在鸿蒙平台，您需要使用 uni-app 内置的 <web-view> 组件，并通过 uni.createWebviewContext 获取 webview 上下文，然后利用 evalJs 方法向网页注入 JavaScript 代码。网页端则通过特定的桥接方式回传消息。

2. uni-app 端代码示例

在您的 uni-app 页面中，使用 <web-view> 组件并监听其 @message 事件。当收到网页发送的关闭消息时，执行隐藏 webview 和页面跳转的逻辑。

<template>  
  <view class="content">  
    <web-view   
      id="web"  
      src="/static/index.html"   
      @message="onMessage"  
    ></web-view>  
  </view>  
</template>  

<script>  
  let context;  

  export default {  
    data() {  
      return {  
        title: 'Hello'  
      }  
    },  
    onReady() {  
      // 获取 webview 上下文  
      context = uni.createWebviewContext('web', this);  
    },  
    methods: {  
      onMessage(event) {  
        const dataList = event.detail.data;  
        dataList.forEach(({ data } = {}) => {  
          if (data && typeof data === 'object' && data.action === '__invoke') {  
            const { method, args, id } = data;  

            // 处理网页发来的关闭请求  
            if (method === 'closeWebview') {  
              // 1. 隐藏当前 webview  
              // 2. 执行页面跳转  
              uni.redirectTo({  
                url: '/pages/index/index' // 跳转到首页  
              });  
            }  
          }  
        });  
      }  
    }  
  }  
</script>

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

3. 网页端（Vue 项目）代码

您加载的网页需要引入并配置 uni.webview.js 来实现通信。根据官方文档，鸿蒙平台需要使用 uni.webview.1.5.8.js 或更新版本。

关键步骤：

1. 在网页的 index.html 中引入 uni.webview.js
2. 在需要关闭的地方调用桥接方法

<!-- 在网页的 index.html 中 -->  
<script src="uni.webview.1.5.8.js"></script>

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

在您的 Vue 组件中，当需要触发关闭时：

// 网页 Vue 组件中的方法  
methods: {  
  closeAndJump() {  
    // 通过桥接调用 uni-app 侧定义的方法  
    if (window.__bridge && window.__bridge.invoke) {  
      window.__bridge.invoke('closeWebview', {}, (err, data) => {  
        // 回调处理  
      });  
    }  
  }  
}

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent

4. 完整通信流程

1. uni-app 侧：通过 uni.createWebviewContext('web', this) 获取 webview 上下文。
2. uni-app 侧：定义 native 对象，包含网页可以调用的方法（如 closeWebview）。
3. 网页侧：加载 uni.webview.js 后，通过 window.__bridge.invoke 调用 uni-app 侧的方法。
4. uni-app 侧：在 @message 事件中接收并处理网页的调用请求。

注意事项

• 平台差异：此方案是鸿蒙平台特有的，与 Android/iOS 的 plus.webview 完全独立。
• SDK 版本：请使用最新的 uni.webview.js（1.5.8 或更高版本），旧版本可能存在兼容性问题。
• 调试建议：如果通信失败，请检查网页是否正确加载了 uni.webview.js，以及 window.__bridge 对象是否存在。

如果您需要更详细的代码示例，可以参考 uni-app 官方文档中的 webview 组件通讯 章节。