本文簡(jiǎn)介
點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了
在 uni-app 或者 微信小程序 中，都有 web-view 組件。
該組件是一個(gè)瀏覽器組件，可以承載網(wǎng)頁(yè)的內(nèi)容。而且該組件是全屏的，會(huì)覆蓋該組件之外的其他內(nèi)容。
本文要講解在 uni-app 中使用 web-view 怎么實(shí)現(xiàn)大量數(shù)據(jù)通信。
我所使用的是 Vue 3 語(yǔ)法。
web-view 數(shù)據(jù)通信方法
web-view 其實(shí)有點(diǎn)像 iframe ，但在 uni-app 又提供了幾種基礎(chǔ)的通信方式。
基礎(chǔ)用法可以看文檔，本文主要講解如何在 主應(yīng)用 向 web-view 傳輸數(shù)據(jù)。
本案例目錄結(jié)構(gòu)
省略部分目錄
- hybrid
|- html
|- js
|- uni.webview.1.5.3.js
|-index.html
- pages
|- index
|- index.vue
父?jìng)髯?/h2>
我們暫定，主應(yīng)用 為 父，web-view 的頁(yè)面為 子 。
“父?jìng)髯印?的方式有2種：
- 通過(guò)
url傳值 - 使用
uni.webview.js
1、通過(guò) url 傳值
數(shù)據(jù)量少的話，可以通過(guò) url 的方式傳給子應(yīng)用。
index.vue
<template>
<view class="content">
<web-view
src="/hybrid/html/index.html?msg=hello"
></web-view>
</view>
</template>
這種方法的優(yōu)點(diǎn)是簡(jiǎn)單，缺點(diǎn)是傳輸?shù)臄?shù)據(jù)量有限，而且基本傳輸?shù)亩际亲址?/p>
2、使用 uni.webview.js 傳值
本文使用的是 uni.webview.1.5.3.js ，在閱讀本文時(shí)可能官方已經(jīng)更新了新版。
你可以在 web-view 文檔 里，滑到“注意事項(xiàng)”里面找到最新版的下載地址
主應(yīng)用 /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)
// 獲取子應(yīng)用
function getVw() {
// 找到路由棧里的最后一位
vw.value = pages[pages.length - 1].$getAppWebview().children()[0]
// 使用 evalJS 方法，調(diào)用子應(yīng)用里的事件
// receiveData 是在子應(yīng)用里定義的事件
// 最后需要注意，evalJS 傳入的是一個(gè)字符串。
vw.value.evalJS("receiveData({msg: '雷猴啊'})")
}
onLoad(() => {
// 如果是頁(yè)面初始化調(diào)用時(shí)，需要延時(shí)一下
setTimeout(() => {
getVw()
}, 1000)
})
</script>
子應(yīng)用 /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>
// 接收外層傳進(jìn)來(lái)的數(shù)據(jù)
function receiveData(data) {
console.log(JSON.stringify(data))
}
</script>
</body>
</html>
這么簡(jiǎn)單就實(shí)現(xiàn)了大量數(shù)據(jù)的傳輸，而且還可以傳對(duì)象等數(shù)據(jù)。
最后需要注意的是，子應(yīng)用定義接收數(shù)據(jù)的方法名，要跟主應(yīng)用調(diào)用時(shí)一致。
比如本例定義的方法名為 receiveData 。
子傳父
子應(yīng)用要向主應(yīng)用傳值，uni-app 官方就提供了方法 @message 。
主應(yīng)用 /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 傳遞過(guò)來(lái)的數(shù)據(jù)
function handleMessage(msg) {
console.log(msg)
}
</script>
子應(yīng)用 /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()">向上傳遞數(shù)據(jù)</button>
</div>
<script src="./js/uni.webview.1.5.3.js"></script>
<script>
// 向外傳遞數(shù)據(jù)，數(shù)據(jù)要放在data里
function handleClick () {
uni.postMessage({
data: {
msg: '雷猴'
}
})
}
</script>
</body>
</html>
此時(shí)在頁(yè)面上點(diǎn)擊按鈕，主應(yīng)用就會(huì)接收到子應(yīng)用傳過(guò)來(lái)的數(shù)據(jù)。
除了 @message 外，uni-app 還提供了很多方法和屬性可以調(diào)用。
方法
| 方法名 | 說(shuō)明 | 平臺(tái)差異說(shuō)明 |
|---|---|---|
| uni.navigateTo | navigateTo | |
| uni.redirectTo | redirectTo | |
| uni.reLaunch | reLaunch | |
| uni.switchTab | switchTab | |
| uni.navigateBack | navigateBack | |
| uni.postMessage | 向應(yīng)用發(fā)送消息 | 字節(jié)跳動(dòng)小程序不支持、H5 暫不支持（可以直接使用 window.postMessage (opens new window)） |
| uni.getEnv | 獲取當(dāng)前環(huán)境 | 字節(jié)跳動(dòng)小程序與飛書(shū)小程序不支持 |
屬性
| 屬性名 | 類(lèi)型 | 說(shuō)明 | 平臺(tái)差異說(shuō)明 |
|---|---|---|---|
| src | String | webview 指向網(wǎng)頁(yè)的鏈接 | |
| allow | String | 用于為 iframe (opens new window)指定其特征策略(opens new window) | H5 |
| sandbox | String | 該屬性對(duì)呈現(xiàn)在 iframe (opens new window)框架中的內(nèi)容啟用一些額外的限制條件。 | H5 |
| webview-styles | Object | webview 的樣式 | App-vue |
| update-title | Boolean | 是否自動(dòng)更新當(dāng)前頁(yè)面標(biāo)題。默認(rèn)值：true
|
App-vue (HBuilder X 3.3.8+) |
| @message | EventHandler | 網(wǎng)頁(yè)向應(yīng)用 postMessage 時(shí)，會(huì)在特定時(shí)機(jī)（后退、組件銷(xiāo)毀、分享）觸發(fā)并收到消息。 |
H5 暫不支持（可以直接使用 window.postMessage (opens new window)） |
| @onPostMessage | EventHandler | 網(wǎng)頁(yè)向應(yīng)用實(shí)時(shí) postMessage
|
App-nvue |
以上官方提供的方法和屬性建議你都嘗試一遍，都是非常簡(jiǎn)單的。
推薦閱讀
??《『uni-app、小程序』藍(lán)牙連接、讀寫(xiě)數(shù)據(jù)全過(guò)程》
??《Vue3 過(guò)10種組件通訊方式》
點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了
