小程序webView中嵌套H5页面,难免会遇到小程序与h5页面进行数据通信或交互的场景。比如H5需要获取小程序的登录token、或者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/