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)
  },

看,成功接收到啦

相关推荐
2501_915921439 小时前
苹果iOS应用开发上架与推广完整教程
android·ios·小程序·https·uni-app·iphone·webview
2501_9151063210 小时前
HTTP和HTTPS协议工作原理及安全性全面解析
android·ios·小程序·https·uni-app·iphone·webview
禾高网络11 小时前
长护险智慧服务平台:科技赋能长期照护保障体系
大数据·人工智能·科技·小程序
杰建云16714 小时前
小程序转化率低的核心原因是什么?
小程序·小程序制作
中国胖子风清扬15 小时前
基于GPUI框架构建现代化待办事项应用:从架构设计到业务落地
java·spring boot·macos·小程序·rust·uni-app·web app
weikecms16 小时前
外卖CPS小程序哪家系统比较完善
小程序
绝世唐门三哥1 天前
uniapp系列-uniappp都有哪些生命周期?
vue.js·小程序·uniapp
人还是要有梦想的2 天前
如何开发小程序介绍
小程序·notepad++
roamingcode2 天前
支付宝小程序数据可视化避坑指南:@antv/f2 踩坑与最佳实践
信息可视化·小程序·canvas·antv
2501_915921432 天前
HTTP和HTTPS协议全面解析:技术原理与安全应用
安全·http·ios·小程序·https·uni-app·iphone