在harmonyos next下使用uni-app webview与浏览器交互，无法向浏览器传数据，但是可以接收到浏览器发送的数据。

在harmonyos next下使用uni-app webview与浏览器交互，无法向浏览器传数据，但是可以接收到浏览器发送的数据。

开发环境 版本号 项目创建方式
Windows Windows 11 HBuilderX
家庭中文版 23H2

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：Windows 11 家庭中文版 23H2

HBuilderX类型：正式

HBuilderX版本号：4.57

手机系统：HarmonyOS NEXT

手机系统版本号：HarmonyOS NEXT Developer Preview

手机厂商：华为

手机机型：nova 13

页面类型：vue

vue版本：vue3

打包方式：云端

App下载地址或H5网址：https://static-mp-ff40e3ac-9cb8-4dc9-add1-486c5e802f30.next.bspapp.com/ywx/webview.html

示例代码：

// 发送数据到网页  
const sendDataToWeb = (data) => {  
  // 获取所有页面路由  
  const pages = getCurrentPages();  
  // 找到最后一个索引  
  const index = pages.length - 1;  
  // 获取到当前页面的webView实例  
  const currentWebview = pages[index].$getAppWebview();  
  // 取到真正的webview  
  const webView = currentWebview.children()[0];  
  webView.evalJS(`RequireMapMobile('${JSON.stringify(data)}')`);  
}  

const context = getCurrentInstance(); // 允许访问对高级使用或库创建者有用的内部组件实例  
// 接收浏览器发送的消息  
const messageHanle = (e) => {  
    console.log("浏览器发送的消息", e.detail.data[0]);  
};

更多关于在harmonyos next下使用uni-app webview与浏览器交互，无法向浏览器传数据，但是可以接收到浏览器发送的数据。的实战教程也可以访问 https://www.itying.com/category-93-b0.html

19 回复

你直接参考我这样写吧，如果不行的话那可能就是H5端有点问题，或者uniapp又有什么特殊bug了，不兼容你这个机型。补充一下，你要等H5页面完全加载完之后才能调用获取方法，你一进来就调用的话（比如onload）是获取不到的。

更多关于在harmonyos next下使用uni-app webview与浏览器交互，无法向浏览器传数据，但是可以接收到浏览器发送的数据。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


鸿蒙要用这个方法 uni.createWebviewContext(‘webModule’, this).evalJS(function)

uni.createWebviewContext第一个参数是web-view这个组件绑定的id

回复 Adlaw: 那个是使用vue2的语法了，this。这个方法其实我也试过，也不行。请问你成功了吗，纯血鸿蒙（harmonyos next）

回复 忆往昔: 我是vue3，这个方法一定行，我都做了好多鸿蒙项目了

回复 Adlaw: uni.createWebviewContext(‘webview’, this).evalJS(RequireMapMobile(${JSON.stringify(mapConfig)})) 打印console.log(uni.createWebviewContext(‘webview’, this)); 结果是{ “evalJS”: function evalJS() {}, “evalJs”: function evalJs() {}, “back”: function back() {}, “forward”: function forward() {}, “reload”: function reload() {}, “stop”: function stop() {} } 获取到的都感觉不对，你之前的项目可能不是harmonyos next的纯血鸿蒙

回复 Adlaw: 您好，我在renderjs中使用navigator.mediaDevices.getUserMedia()在鸿蒙端无法获取到到本地视频流而且报错：Permission denied。权限都是提前给了的，而且安卓端是没问题的。请问这个咋解决？

你要不信这个方法行就算了，你再找找别的方法吧

大佬，我不是不信，运行起来没效果。evalJS这个函数都是空的，可以帮我分析一下么。还是说浏览器那边的代码要对应修改

下面是我写的代码，感觉没啥区别。就是传不过去，很难受

你H5是怎么写的？

回复 Adlaw: 可以了，谢谢。非常感谢

回复 Adlaw: 其实我之前就穿进去了，但是我是用console.log打印来判断有没有接收到

回复 Adlaw: uniapp运行在鸿蒙上是没打印34行的。在uniapp的控制台看不到

回复 忆往昔: 好的

回复 Adlaw: 大佬，可以再向你请教一个问题吗，就是我从一个页面跳转到含webview的页面，中间会有两秒左右的白屏

回复 忆往昔: 这个很正常，uniapp性能很差，如果有些页面比较大那就会有白屏等待时间

这是html的

在HarmonyOS NEXT下使用uni-app的WebView与浏览器交互时遇到单向通信问题，可能是由于系统安全限制或API差异导致的。以下是关键分析点：

  1. HarmonyOS NEXT的WebView限制： NEXT版本对WebView的安全策略更严格，可能默认禁止了evalJS这类动态脚本执行方法。建议改用postMessage API进行双向通信。

  2. 推荐修改方案：

// 发送端改用postMessage
webView.postMessage({ data: JSON.stringify(data) });

// 网页端需要监听message事件
window.addEventListener('message', (e) => {
  if(e.data && e.data.type === 'fromApp') {
    RequireMapMobile(e.data.payload)
  }
});

  1. 当前接收正常的原理： 浏览器到App的通信是通过uni-app默认的onMessage机制实现的，这个通道在NEXT上工作正常。但反向通信需要更明确的跨域授权。

  2. 华为特有适配： 检查是否需要在manifest.json中添加HarmonyOS的WebView权限声明：

"harmonyos": {
  "webView": {
    "crossOrigin": true
  }
}
回到顶部