小程序webView中嵌套H5页面,难免会遇到小程序与h5页面进行数据通信或交互的场景。比如H5需要获取小程序的登录token、或者H5提交表单之后,操控小程序的路由让其返回某个页面。

1.uniapp向H5发送数据

在 web-view 中只需要通过 URL 就可以向 H5 进行传参,H5页面根据对链接进行截取获得参数。
uniapp:

<template>
		<web-view src="https://XXX.com?name=lisa"></web-view>
	</view>
</template>
  created() {
    let query = 
a. 通过API,但是小程序要后退 wx.miniProgram.postMessage({data: data.zfRes}); wx.miniProgram.navigateBack(); b.webview页面携带参数跳转小程序页面 ` wx.miniProgram.navigateTo... uniapp打包成的小程序、app,在某些场景下需要访问第三方或其他上线的h5页面,并要实现交互通信,一般就是h5页面点击某个按钮,需要通知应用做出下一步的操作。 注意:根据官方文档提供的例子,APP、微信小程序、H5都没问题,但是百度小程序必须添加业务域名通信功能才能生效。 下面的代码还实现了应用向h5页面即时通讯,关键词:‘#’。 uniapp页面 <template> <web-view src="h web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。 需求:需要把H5网页嵌套入uniapp开发的微信小程序。 用vuex当做仓库保存web-view路径,跳转到pages/webview/index navigateToMineDay(url, type) { if (type == 'webView') { let myurl_ = appUrl + `/h5/