uniapp 小程序端与H5(非uniapp写的)之间的通信

最新推荐文章于 2025-04-27 13:47:00 发布

F&&Q

最新推荐文章于 2025-04-27 13:47:00 发布

阅读量303

点赞数 1

分类专栏： uniapp 小程序 h5 文章标签： uni-app 小程序

本文链接：https://blog.youkuaiyun.com/qq_42238378/article/details/145388654

版权

小程序同时被 3 个专栏收录

7 篇文章

订阅专栏

uniapp

4 篇文章

订阅专栏

1 篇文章

订阅专栏

1. 参考文档

web-view | uni-app官网
uniapp 下，Web-view App 和 h5 (uniapp) 相互通信_Rock笔记个人资源整理站

2. 主要代码：

h5端的：

需要的资源已经上传绑定了；

<template>
  <div @click="handleSend" id="wq">发送信息</div>
</template>

import '../../utils/uni.webview.js';


// 点击发送方法 理论上也是可以使用uniapp的页面跳转api方法
const handleSend = () => {
  console.log('传递数据', window);
  uni.postMessage(
    {
      data: {
        name: 'wq',
      },
    },
    '*',
  );
};

(uniapp) app端

<template>
  <!-- 仅仅是测试 -->
  <web-view :src="linkUrl" @message="onMessage"></web-view>
</template>
<script setup>
import { ref } from 'vue';

defineOptions({
  name: 'testWeb',
});

const linkUrl = ref(
  `https://testmicroh5.xihuxia.com?timestamp=${new Date().getTime()}/#/bSideMeeting`,
);

const onMessage = (event) => {
  console.log('接收的信息', event);
};
</script>
<style scoped lang="scss"></style>