微信小程序与webview H5交互(内嵌H5跳转原生页面)
在开发中,使用web-view组件内嵌H5页面是非常常见的,但很多人不知道webview内嵌H5如何与原生小程序 交互。下面介绍下实现微信小程序与webview H5交互的方法。
web-view功能描述
承载网页的容器。会自动铺满整个小程序页面,个人类型的小程序暂不支持使用。
客户端 6.7.2 版本开始,navigationStyle: custom 对 web-view 组件无效
web-view 内嵌 H5 给原生小程序传参
方式一、使用postMessage
在web-view组件上有一个属性“bindmessage”,官方是这么介绍的:
网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data },data是多次 postMessage 的参数组成的数组
在 web-view 组件上绑定 “message”事件
在 H5 中 触发 message 事件即可在小程序中接收 H5传递的数据
例子:
小程序 /pages/test/test.wxml :
<web-view src="" bindmessage="receiveMessage"></web-view>
小程序 /pages/test/test.js :
receiveMessage(e){console.log(e.detail)//接收H5传过来的数据
}
H5:
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
wx.miniProgram.postMessage({ data: {foo: 'bar'} })
</script>
利用postMessage可以实现小程序与H5之间通讯,但只在小程序后退、组件销毁、分享时触发,所以在一些情况可能不满足开发需求
方式二、利用页面跳转带参
引用 jweixin JSSDK,调用微信 wx.miniProgram API 。
接口名 | 说明 | 最低版本 |
---|---|---|
wx.miniProgram.navigateTo | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.navigateBack | 参数与小程序接口一致 | 1.6.4 |
wx.miniProgram.switchTab | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.reLaunch | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.redirectTo | 参数与小程序接口一致 | 1.6.5 |
wx.miniProgram.postMessage | 向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的 message 事件 | 1.7.1 |
wx.miniProgram.getEnv | 获取当前环境 | 1.7.1 |
例如现在有一个场景: H5为一个列表页面,点击列表子项时跳转到原生小程序的详情页
H5:
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
function handleClick(e){let id = e.target.dataset.idlet url = `/pages/detail/detail?id=${id}`;wx.miniProgram.navigateTo({url,});
}
</script>
小程序 /pages/detail/detail.js:
onLoad: function (options) {console.log(options.id)//接收H5传过来的数据
}
原生小程序 给 web-view内嵌H5 传参
原生小程序 给 web-view内嵌H5 传参就很简单了,原生小程序直接通过修改 web-view 的src属性就行了
'xxx.com?arg=123'
h5页面获取url上的参数,这种方式会使页面重新加载,如果不想引起页面加载可以通过修改hash
'xxx.com#123'
H5页面监听hash值变化:
window.onhashchange=function(){alert('hash值改变')console.log(window.location.hash)//获取当前hash值
}
微信小程序与webview H5交互(内嵌H5跳转原生页面)相关推荐
- webview 个人小程序_微信小程序新增Webview它是什么东西?
原标题:微信小程序新增Webview,它是什么东西? 今天刚刚给客户做完案子,正准备去睡觉.2017 今天刚刚给客户做完案子,正准备去睡觉.2017年11月3日 11:29看到了微信公众平台推送的小程 ...
- 【微信小程序】web-view 无法打开该页面不支持打开
本文相关文献: https://developers.weixin.qq.com/community/develop/doc/00084a350b426099ab46e0e1a50004?%2Fblo ...
- 微信小程序中web-view调用微信支付
在原来的H5支付页面中加个判断 前提需要添加这个: <script type="text/javascript" src="https://res.wx.qq.co ...
- 微信小程序 非webview分享给好友及生成分享海报
微信小程序 非webview分享给好友及分享海报 UI展示 点击分享显示分享sheet: 点击生成海报,展示海报预览图片: 组件目录结构: 代码 works文件 woks.json中引入: " ...
- 微信小程序与VS webapi局域网内联调
微信小程序与VS webapi局域网内联调 微信小程序端设置 1.真机调试时,把局域网模式打开 并将调试器的不合法域名 打上勾 这个一定要打勾,不然会提示request fail url is not ...
- 微信小程序如何与数据库交互?
微信小程序如何与数据库交互? 回答 (4) 关注 (1) 查看 (6468) 请问一下微信小程序如何与数据库交互? 写回答关注邀请回答 独善其身独善其身提问于 2018-01-30 微信小程序如何与数 ...
- 微信小程序中嵌套html_微信小程序:web-view嵌套H5实现微信支付功能解决方案及填坑...
ab7117c7d4947210c39e126a01d23ede.jpg 最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了.今天不加班,开始为这段时间做的东西 ...
- Uni-app的webview,H5页面在微信小程序中webview再跳回小程序的解决方案
场景: 微信小程序:uni-app开发 H5:uni-app开发 小程序其中一个场景需要使用webview嵌入H5,待H5里的业务处理完成再跳转回小程序 遇到的问题: webview无法跳转回小程序, ...
- 微信小程序刷新webview页面问题
一.背景 我这边小程序的首页使用的是web-view组件.相当于直接引入了url,访问写好的h5页面即可.比着原生的小程序页面来说,方便了不少,但是刷新是个问题.这里记录一下刷新的方法. 二.微信小程 ...
最新文章
- 图解Hbase--大数据平台技术栈07
- java jar包的路径
- mysql的count()函数如何选择索引,千万级表的count()查询优化实例
- 开发环境 测试环境 定义_「PHP7数组详解」:第1章 环境搭建安装(一)
- mqtt linux 编译,MQTT客户端代码X64位Ubuntu环境编译+测试实践小结
- matlab光学远轴光的折射,光学课后习题
- [有奖励]GeneralUpdate开源项目招募开发者
- html文本改,编辑html格式文本可改成txt格式(可以替换或更换某文本)新手
- C/C++静态库编译报错(/usr/bin/ld:cannot find -lpthread,/usr/bin/ld:cannot find -lc)
- javaweb实现教师和教室管理系统 java jsp sqlserver
- FortiClient cannot establish caused by TLS version
- x10I pC套件 官方网站下载
- python | prophet的案例实践:趋势检验、突变点检验等
- 2021年中国纯碱行业发展现状分析,下游需求快速增长,供需关系紧张导致价格走高「图」
- 什么是Web前端工程师?为什么Web前端工资如此之高呢?
- 用计算机怎么算斜边,斜边计算公式
- fowin自动交易和量化交易和合约交易
- Apad Qzone项目总结(二)---换肤功能实现!!!
- 看透2500万人生老病死 米因大数据解开健康密码
- 简易电子邮件收信的原理以及实现
热门文章
- 国外数据下载(阿里云+七牛云)
- HTML5期末大作业:电影网站设计——电影资讯博客(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码
- 【梁小国】教你怎么签自己的名字
- 记录错误:ImportError: No module named ‘tools‘。jupyter无法import第三方文件夹的库
- 计算机驱动有必要更新,我们平时电脑的驱动需要一直更新吗?教你如何正确的维护你的驱动...
- 这 10 条河,「贡献」了全球 95% 的海洋塑料污染
- 《迫在眉梢》英文名《John Q》经典台词
- 网络游戏服务器端架构设计
- 解决python ping测试
- MOS管中的N型/P型是什么意思?沟道呢?金属氧化物膜又是什么