h5和uniapp通信

混合开发中,uniapp嵌套h5页面的情况下,想进行双方通信,怎么办呢?

uniapp中,整个项目都是写在h5中的,相当于uniapp只是一个壳子,这样开发的话,就可以热更新:

一、h5→uniapp

①h5页面,需要在index.html中引入文件,在使用页面中就可以用postMessage把信息传过去。 index.html

js 复制代码
<script type="text/javascript" src="./src/utils/uniwebview.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
  uni.webView.getEnv(function(res) {
    console.log('当前环境:' + JSON.stringify(res));
  });
});

</script>

②h5使用页面:

js 复制代码
const onPrint = async (item) => {
  const imageAddress = await projectApi.getPayQR(item.id);
  
  uni.postMessage({
    data: {
      code: '5',
      info: item.producerName,
      time: dayjs().format('YYYY-MM-DD HH:mm'),
      imageAddress: imageAddress,
    }
  });
}

③uniapp页面,在backMeaasge中获得h5传递过来的信息 h5→uniapp

js 复制代码
<template>
  <view class="content">
   <web-view   
      src="http://192.168.xx.xxx:3000"
      @message="backMessage"
    ></web-view>
  </view>
  
</template>

<script>
      backMessage(event) {
        console.log('h5传回来的----', event.detail.data[0].code);
        if(event.detail.data[0].code === 5) {
          console.log('打印了', event.detail.data[0].info)
        }
      },
</script>

二、uniapp→h5

①uniapp中,

js 复制代码
    const currentWebview = that.$scope.$getAppWebview();
    const html = currentWebview.children()[0];
    html.evalJS(`blueresult(${JSON.stringify(list[i])})`);

②h5中,uniapp中的evalJs中的名字和window.后面的名字要一致。

js 复制代码
window.blueresult = function(device) {
    deviceList.value.push(device)
    console.log("蓝牙传设备回来了:", deviceList.value);
  }
相关推荐
然我18 分钟前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子23 分钟前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹26 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器33 分钟前
指定阿里镜像原理
前端
枷锁—sha37 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha39 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜1 小时前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss