h5和小程序通信

Hero_rong2023-12-10 23:35

相信大部分人可能都会遇到要在微信小程序里面嵌入h5，这个时候h5和小程序之间的通信就成了不可避免的一环，不用紧张，其实很简单。

首先我们按照文档上的指示，在需要向小程序传递参数的页面引入 jweixin-1.3.2.js

html 复制代码

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

接下来在需要传参的js里面直接使用

javascript 复制代码

if (res.data === 200) {
    wx.miniProgram.postMessage({ data: { message: '200Hello from H5' } });
} else{
    wx.miniProgram.postMessage({ data: { message: 'Hello from H5' } });
}

最后在小程序的 handleGetMessage 方法里面接收就好啦

javascript 复制代码

  // 接收从h5传递过来的数据
  handleGetMessage: function(e) {
    console.log('查看h5传递过来的数据：',e.target.data)
  },

看，成功接收到啦