共计 3341 个字符，预计需要花费 9 分钟才能阅读完成。
本文简介
点赞 + 关注 + 珍藏 = 学会了
在 uni-app 或者 微信小程序 中，都有 web-view 组件。
该组件是一个浏览器组件，能够承载网页的内容。而且该组件是全屏的，会笼罩该组件之外的其余内容。
本文要解说在 uni-app 中应用 web-view 怎么实现大量数据通信。
我所应用的是 Vue 3 语法。
web-view 数据通信办法
web-view 文档
web-view 其实有点像 iframe，但在 uni-app 又提供了几种根底的通信形式。
根底用法能够看文档，本文次要解说如何在 主利用 向 web-view 传输数据。
本案例目录构造
省略局部目录
- hybrid
|- html
|- js
|- uni.webview.1.5.3.js
|-index.html
- pages
|- index
|- index.vue父传子
咱们暂定，主利用 为 父，web-view 的页面为 子。
“父传子”的形式有 2 种：
- 通过
url传值 - 应用
uni.webview.js
1、通过 url 传值
数据量少的话，能够通过 url 的形式传给子利用。
index.vue
<template>
<view class="content">
<web-view
src="/hybrid/html/index.html?msg=hello"
></web-view>
</view>
</template>这种办法的长处是简略，毛病是传输的数据量无限，而且根本传输的都是字符串。
2、应用 uni.webview.js 传值
本文应用的是 uni.webview.1.5.3.js，在浏览本文时可能官网曾经更新了新版。
你能够在 web-view 文档 里，滑到“注意事项”外面找到最新版的下载地址
主利用 /pages/index/index.vue
<template>
<view class="content">
<web-view
ref="webview"
src="/hybrid/html/index.html"
@message="handleMessage"
></web-view>
</view>
</template>
<script setup>
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
const webview = ref(null)
const pages = getCurrentPages()
const vw = ref(null)
// 获取子利用
function getVw() {
// 找到路由栈里的最初一位
vw.value = pages[pages.length - 1].$getAppWebview().children()[0]
// 应用 evalJS 办法，调用子利用里的事件
// receiveData 是在子利用里定义的事件
// 最初须要留神，evalJS 传入的是一个字符串。vw.value.evalJS("receiveData({msg:' 雷猴啊 '})")
}
onLoad(() => {
// 如果是页面初始化调用时，须要延时一下
setTimeout(() => {getVw()
}, 1000)
})
</script>
子利用 /hybrid/html/index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>web-view</title>
</head>
<body>
<!-- 引入 uni.webview.js -->
<script src="./js/uni.webview.1.5.3.js"></script>
<script>
// 接管外层传进来的数据
function receiveData(data) {console.log(JSON.stringify(data))
}
</script>
</body>
</html>这么简略就实现了大量数据的传输，而且还能够传对象等数据。
最初须要留神的是，子利用定义接收数据的办法名，要跟主利用调用时统一。
比方本例定义的办法名为 receiveData。
子传父
子利用要向主利用传值，uni-app 官网就提供了办法 @message。
主利用 /pages/index/index.vue
<template>
<view class="content">
<web-view
src="/hybrid/html/index.html"
@message="handleMessage"
></web-view>
</view>
</template>
<script setup>
import {ref} from 'vue'
// 承受 webview 传递过去的数据
function handleMessage(msg) {console.log(msg)
}
</script>
子利用 /hybrid/html/index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>web-view</title>
</head>
<body>
<div>
<button onclick="handleClick()"> 向上传递数据 </button>
</div>
<script src="./js/uni.webview.1.5.3.js"></script>
<script>
// 向外传递数据，数据要放在 data 里
function handleClick () {
uni.postMessage({
data: {msg: '雷猴'}
})
}
</script>
</body>
</html>此时在页面上点击按钮，主利用就会接管到子利用传过来的数据。
除了 @message 外，uni-app 还提供了很多办法和属性能够调用。
办法
| 办法名 | 阐明 | 平台差别阐明 |
|---|---|---|
| uni.navigateTo | navigateTo | |
| uni.redirectTo | redirectTo | |
| uni.reLaunch | reLaunch | |
| uni.switchTab | switchTab | |
| uni.navigateBack | navigateBack | |
| uni.postMessage | 向利用发送音讯 | 字节跳动小程序不反对、H5 暂不反对（能够间接应用 window.postMessage (opens new window)） |
| uni.getEnv | 获取以后环境 | 字节跳动小程序与飞书小程序不反对 |
属性
| 属性名 | 类型 | 阐明 | 平台差别阐明 |
|---|---|---|---|
| src | String | webview 指向网页的链接 | |
| allow | String | 用于为 iframe (opens new window)指定其特色策略(opens new window) | H5 |
| sandbox | String | 该属性对出现在 iframe (opens new window)框架中的内容启用一些额定的限度条件。 | H5 |
| webview-styles | Object | webview 的款式 | App-vue |
| update-title | Boolean | 是否自动更新以后页面题目。默认值：true |
App-vue (HBuilder X 3.3.8+) |
| @message | EventHandler | 网页向利用 postMessage 时，会在特定机会（后退、组件销毁、分享）触发并收到音讯。 |
H5 暂不反对（能够间接应用 window.postMessage (opens new window)） |
| @onPostMessage | EventHandler | 网页向利用实时 postMessage |
App-nvue |
以上官网提供的办法和属性倡议你都尝试一遍，都是非常简单的。
举荐浏览
👍《『uni-app、小程序』蓝牙连贯、读写数据全过程》
👍《uni-app App 端半屏间断扫码》
👍《Vue3 过 10 种组件通信形式》
点赞 + 关注 + 珍藏 = 学会了