您的位置：首页 > 编程技术 > js  >  微信小程序与webview H5交互的方法(内嵌H5跳转原生页面)

微信小程序与webview H5交互的方法(内嵌H5跳转原生页面)

 更新时间：2022年11月24日 16:19  点击：2250 作者：mr_cmx

前言

在开发中，使用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之间通讯，但只在小程序后退、组件销毁、分享时触发，所以在一些情况可能不满足开发需求

方式二、利用页面跳转带参

接口名说明最低版本
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.id
	let 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交互的文章就介绍到这了,更多相关微信小程序与webview H5交互内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞！

原文出处：https://blog.csdn.net/weixin_44646763/article/details/127014

[!--infotagslink--]

相关文章

  • C#和JavaScript实现交互的方法

    最近做一个小项目不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现，故问题演化成asp.net中jiavascript与后台c#如何进行交互。...2020-06-25

  • H5移动端适配 Flexible方案

    这篇文章主要为大家详细介绍了H5移动端适配，Flexible方案,具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-10-25

  • C#实现窗体与子线程的交互的方法

    这篇文章主要介绍了C#实现窗体与子线程的交互的方法,对初学者有一定的学习借鉴价值,需要的朋友可以参考下...2020-06-25

  • iOS WKWebview 白屏检测实现的示例

    这篇文章主要介绍了iOS WKWebview 白屏检测实现的示例，帮助大家更好的进行ios开发，感兴趣的朋友可以了解下...2020-10-20

  • Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例

    这篇文章主要介绍了Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下...2020-11-18

  • 关于webview适配H5上传照片或者视频文件的方法

    这篇文章主要介绍了关于webview适配H5上传照片或者视频文件的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-08

  • asp.net使用H5新特性实现异步上传的示例

    下面小编就为大家分享一篇asp.net使用H5新特性实现异步上传的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-09-22

  • php和js交互一例

    php和js交互一例 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>Untitled</title> <script language="JavaScrip...2016-11-25

  • 微信小程序与webview H5交互的方法(内嵌H5跳转原生页面)

    小程序webView中嵌套H5页面,难免会遇到小程序与h5页面进行数据通信或交互的场景,下面这篇文章主要给大家介绍了关于微信小程序与webview H5交互的相关资料,内嵌H5跳转原生页面,需要的朋友可以参考下...2022-11-24

  • app内嵌H5 webview 本地缓存问题的解决

    这篇文章主要介绍了app内嵌H5 webview 本地缓存问题的解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-08

  • node.js+postman实现模拟HTTP服务器与客户端交互

    本文主要介绍了node.js+postman实现模拟HTTP服务器与客户端交互，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-07-30

  • H5图片压缩与上传实例

    这篇文章主要为大家详细介绍了H5图片压缩与上传的实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-04-27

  • 简单谈谈lua和c的交互

    要理解Lua和C++交互，首先要理解Lua堆栈。简单来说，Lua和C/C++语言通信的主要方法是一个无处不在的虚拟栈。栈的特点是先进后出。...2020-06-30

  • 浅析MVP模式中V-P交互问题及案例分享

    如果从层次关系来讲，MVP属于Presentation层的设计模式。对于一个UI模块来说，它的所有功能被分割为三个部分，分别通过Model、View和Presenter来承载。Model、View和Presenter相互协作，完成对最初数据的呈现和对用户操作的响应，它们具有各自的职责划分。...2021-09-22

  • .NET Core之微信支付之公众号、H5支付详解

    这篇文章主要介绍了.NET Core之微信支付之公众号、H5支付篇，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-09-22

  • python与mysql数据库交互的实现

    这篇文章主要介绍了python与mysql数据库交互的实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-04-30

  • 如何理解Vue前后端数据交互与显示

    这篇文章主要介绍了如何理解Vue前后端数据交互与显示，对Vue感兴趣的同学，可以参考下...2021-05-10

  • C语言和go语言之间的交互操作方法

    下面小编就为大家带来一篇C语言和go语言之间的交互操作方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2020-04-25

  • windows中允许服务与桌面交互的更改方法示例

    这篇文章主要介绍了windows中允许服务与桌面交互的更改方法,需要的朋友可以参考下...2021-09-22

  • 网页(aspx)与用户控件(ascx)交互逻辑处理实现

    为了以后好维护,把几个页面(ASPX)相同的部分抽取放在一个用户控件(ASCX)上，现在把逻辑分享下，感兴趣的各位可以参考下哈...2021-09-22