h5和小程序通信

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

看一下微信小程序官方文档怎么说

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

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

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

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

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

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

看,成功接收到啦

### 微信小程序H5之间的通信方法 在微信小程序中嵌入H5页面并实现两者间的通信是一个常见的需求。以下是关于如何实现这一功能的具体说明: #### 1. 使用 `web-view` 组件加载 H5 页面 为了在微信小程序中加载外部的 H5 页面,需要使用 `web-view` 组件。该组件允许开发者指定一个 URL 地址来加载网页内容[^2]。 ```json { "usingComponents": { "web-view": "/components/web-view/web-view" } } ``` 需要注意的是,在 `app.json` 文件中的 `permission` 字段也需要进行相应的配置以支持 `web-view` 功能。 #### 2. 小程序H5 发送消息 小程序可以通过调用 `wx.miniProgram.postMessage` 方法将数据发送至 H5 页面。此方法接受一个对象作为参数,其中包含要传递的数据[^4]。 ##### 示例代码: ```javascript // 在小程序端触发 postMessage 调用 wx.miniProgram.postMessage({ data: { key: 'value' } }); ``` 上述代码片段展示了如何从小程序侧主动推送信息给嵌入式的 H5 页面。 #### 3. 接收来自小程序的消息 (H5 端) 对于接收自小程序传来的消息,则需依赖于 JavaScript 中的标准事件监听机制——即绑定 window 对象上的 message 事件处理器。 ##### 示例代码: ```javascript window.addEventListener('message', function(event) { console.log(event.data); // 输出由小程序发出的信息 }); ``` 这段脚本定义了一个全局范围内的 event listener 来捕获任何来源于关联的小程序实例所广播出来的消息,并打印其携带的有效载荷到控制台日志里去。 #### 4. 反方向通讯:从 H5小程序 如果希望让 H5 页面能够通知宿主小程序某些状态变化或者请求特定操作的话,则可通过调用 `wx.miniProgram.navigateBack()` 或者其他 API 函数达成目的。 例如关闭当前页返回上一页的功能就可以这样写出来: ```javascript wx.miniProgram.navigateBack(); ``` 这行简单的命令将会使用户界面退回到之前浏览过的那个视图层级之上一层的位置上去。 --- ### 注意事项 由于安全原因,只有经过认证的服务号才被允许启用 web-view 功能;另外值得注意的一点就是当涉及到敏感权限申请时(比如地理位置获取),还需要额外处理好跨域资源共享(CORS)策略以及遵循平台的安全指引规定。 ---
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值