h5和小程序通信

相信大部分人可能都会遇到要在微信小程序里面嵌入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)
  },

看,成功接收到啦

相关推荐
IT观测12 小时前
# 2026年SaaS小程序制作平台对比:乔拓云、有赞、微盟
小程序
宁夏雨科网15 小时前
印刷包装公司开发小程序的优势与内容
小程序·展示小程序·印刷包装·印刷公司小程序
lichenyang4531 天前
从零到一:用 Taro + React 搭建数据采集小程序
react.js·小程序·taro
黄华SJ520it1 天前
139小程序商城模式开发
小程序·软件需求·系统开发
Greg_Zhong1 天前
详细说下小程序中使用canvas的体验
小程序·canvas绘制·canvas绘制内容溢出·绘制内容模拟器不正常·绘制内容真机正常
小羊Yveesss2 天前
2026 多门店小程序如何提升效率?连锁门店降本增效实操指南,数字化转型必看
大数据·小程序
2501_941982052 天前
提高私域转化率:如何通过 API 自动发送小程序卡片?
小程序·机器人·自动化·企业微信·rpa
码视野2 天前
完全开源-支持二开-可做毕业论文-家政服务预约小程序
小程序
码视野2 天前
全开源-健身运动预约小程序 — 从需求到原型的全栈实践
小程序
游戏开发爱好者82 天前
深入理解iOSTime Profiler:提升iOS应用性能的关键工具
android·ios·小程序·https·uni-app·iphone·webview