如何使用uniapp內(nèi)置組件webview消息傳遞詳解
前言
web-view是uni-app的一個(gè)內(nèi)置組件，可以在應(yīng)用里打開(kāi)指定的網(wǎng)頁(yè)，應(yīng)用和網(wǎng)頁(yè)之間可以收發(fā)消息。
官方文檔地址：官網(wǎng)>文檔>組件>內(nèi)置組件>web-view
1.調(diào)用uni.postMessage被告知方法不存在（uni.postMessage is not a function）
官方文檔web-view有幾個(gè)相關(guān)方法，**uni.postMessage(OBJECT)**的描述是：網(wǎng)頁(yè)向應(yīng)用發(fā)送消息:
web-view是uniapp內(nèi)置組件，并有自帶的方法可以支持消息傳遞，考慮到uniapp本身可以發(fā)布成H5網(wǎng)頁(yè)，所以就直接創(chuàng)建了一個(gè)新的uniapp項(xiàng)目，用來(lái)做跳轉(zhuǎn)目標(biāo)網(wǎng)頁(yè)。
直接在新項(xiàng)目index頁(yè)面測(cè)試：
<template>
<button type="button" @click="sendMess">發(fā)送</button>
</template>
<script setup>
const sendMess = (e) => {
uni.postMessage({
data: {
action: 'message'
}
});
}
</script>
<style lang="scss" scoped>
</style>
然后在應(yīng)用里添加web-view，指向目標(biāo)網(wǎng)頁(yè)：
<web-view src="目標(biāo)網(wǎng)頁(yè)" @message="消息接收方法"></web-view>
在手機(jī)上測(cè)試可以正常打開(kāi)網(wǎng)頁(yè)，但是點(diǎn)擊按鈕，調(diào)用uni.postMessage方法時(shí)報(bào)錯(cuò)：
TypeError: uni.postMessage is not a function
這里先試用了uniapp其他幾個(gè)常用的內(nèi)置API，比如uni.showToast(OBJECT)，來(lái)證明內(nèi)置的方法有正常加載，點(diǎn)擊按鈕，結(jié)果正常運(yùn)行：
uni.showToast({
title: '標(biāo)題',
duration: 2000
});
重新閱讀文檔，發(fā)現(xiàn)在web-view加載HTML網(wǎng)頁(yè)的示例中，引入了一個(gè)uni.webview.js文件，因?yàn)檫@個(gè)示例是個(gè)傳統(tǒng)的HTML頁(yè)面，之前以為用的是內(nèi)置方法就忽略了：
把文件下載下來(lái)，下載地址文檔上有提供，當(dāng)前最新是1.5.6：
https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js在網(wǎng)頁(yè)項(xiàng)目的main.js文件中對(duì)文件進(jìn)行引用：
import '/static/js/uni.webview.1.5.6.js'
重新點(diǎn)擊按鈕，問(wèn)題仍然存在，但是把uni對(duì)象打印出來(lái)，前后對(duì)比發(fā)現(xiàn)多了一個(gè)webView，展開(kāi)就看到了相關(guān)方法：
所以發(fā)送方法改成：
<script setup>
const sendMess = (e) => {
uni.webView.postMessage({
data: {
action: 'message'
}
});
}
</script>
消息正常發(fā)送并接收。
2.H5無(wú)法接收消息
上邊用手機(jī)測(cè)試通過(guò)，但在瀏覽器中進(jìn)行訪問(wèn)，就接收不到消息：
官方文檔中有標(biāo)示：
根據(jù)文檔需要用window.postMessage，這個(gè)方法之前使用，是在web網(wǎng)頁(yè)中嵌套iframe，父子頁(yè)面通信的時(shí)候，文檔上可以看到組件會(huì)被轉(zhuǎn)成iframe：
注意：這里只要修改應(yīng)用這邊（變成瀏覽器訪問(wèn)之后就是父級(jí)頁(yè)面這里），需要以window.addEventListener監(jiān)聽(tīng)消息，網(wǎng)頁(yè)端也就是子級(jí)不需要修改。
<template>
<view>
<web-view src="目標(biāo)網(wǎng)頁(yè)" @message="listenMess"></web-view>
</view>
</template>
<script setup>
import {
onBeforeUnmount
} from "vue";
import {
onLoad
} from "@dcloudio/uni-app";
const listenMess = (e) => {
console.info(e);
}
onLoad(() => {
// #ifdef H5
window.addEventListener('message', listenMess, false);
// #endif
});
onBeforeUnmount(() => {
// #ifdef H5
window.removeEventListener("message", listenMess);
// #endif
});
</script>
<style lang="scss" scoped>
</style>
使用方法window.addEventListener監(jiān)聽(tīng)消息，添加window.removeEventListener防止監(jiān)聽(tīng)重復(fù)執(zhí)行，需要注明只在H5情況下執(zhí)行，否則手機(jī)應(yīng)用會(huì)報(bào)錯(cuò)：
TypeError: Cannot read property 'addEventListener' of undefined
3.根據(jù)官方文檔中的示例編寫(xiě)HTML頁(yè)面
官方文檔示例是一個(gè)傳統(tǒng)的HTML頁(yè)面，寫(xiě)個(gè)簡(jiǎn)單的頁(yè)面用nginx發(fā)布出來(lái)（web-view僅支持加載網(wǎng)絡(luò)網(wǎng)頁(yè)，不支持本地html），作為目標(biāo)網(wǎng)頁(yè)試一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>測(cè)試</title>
</head>
<body>
<button id="sendMess">發(fā)送</button>
<script type="text/javascript" src="/uni.webview.1.5.6.js"></script>
<script type="text/javascript">
document.getElementById('sendMess').addEventListener('click', function() {
uni.postMessage({
data: {
action: 'message'
}
});
});
</script>
</body>
</html>
注意：這里是uni.postMessage，和uniapp項(xiàng)目中調(diào)用不同。
經(jīng)測(cè)試消息可以成功傳遞。
然后文檔上還寫(xiě)到uniapp項(xiàng)目里也能加載html網(wǎng)頁(yè)，只要把文件放在/hybrid/html中：
寫(xiě)個(gè)html放進(jìn)去，uni.webview.1.5.6.js放到j(luò)s路徑里：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>測(cè)試</title>
</head>
<body>
<button onclick="sendMess()">發(fā)送</button>
<script src="/hybrid/html/js/uni.webview.1.5.6.js"></script>
<script type="text/javascript">
function sendMess() {
uni.postMessage({
data: {
action: 'message'
}
});
}
</script>
</body>
</html>
經(jīng)測(cè)試消息可以成功傳遞。
4.VUE項(xiàng)目作為網(wǎng)頁(yè)端調(diào)用uni.postMessage方法
因?yàn)橹坝袀€(gè)vue2的項(xiàng)目里有相應(yīng)功能網(wǎng)頁(yè)，就拿來(lái)用做目標(biāo)，然后在依賴(lài)庫(kù)里搜到了@dcloudio/uni-webview-js，就沒(méi)用上邊的js，直接安裝引入之后，實(shí)測(cè)可以正常使用：
<template>
<el-button type="primary" @click="sendMess">發(fā)送</el-button>
</template>
<script>
import uniWebview from '@dcloudio/uni-webview-js'
export default {
components: {
uniWebview
},
methods: {
sendMess() {
uniWebview.postMessage({
data: { action: 'message' }
});
}
}
}
</script>
<style></style>總結(jié)
到此這篇關(guān)于如何使用uniapp內(nèi)置組件webview消息傳遞的文章就介紹到這了,更多相關(guān)uniapp內(nèi)置組件webview消息傳遞內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問(wèn)題解決方法
這篇文章主要介紹了詳解vue中在循環(huán)中使用@mouseenter 和 @mouseleave事件閃爍問(wèn)題解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例
這篇文章主要介紹了vue實(shí)現(xiàn)局部刷新的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
基于Vue3和element-plus實(shí)現(xiàn)登錄功能(最終完整版)
這篇文章主要介紹了基于Vue3和element-plus實(shí)現(xiàn)一個(gè)完整的登錄功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue部署到域名二級(jí)目錄刷新404的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue+elementUI實(shí)現(xiàn)簡(jiǎn)單日歷功能
這篇文章主要為大家詳細(xì)介紹了vue+elementUI實(shí)現(xiàn)簡(jiǎn)單日歷功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要為大家詳細(xì)介紹了在vue項(xiàng)目中如何加載markdown,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
這篇文章主要介紹了Vue+Element自定義縱向表格表頭教程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
vue2中seo時(shí)使用vue-meta-info的方法
這篇文章主要介紹了vue2中seo時(shí)使用vue-meta-info,本文通過(guò)實(shí)例代碼給大家詳細(xì)講解，文末給大家補(bǔ)充介紹了vue seo管理 vue-meta-info 動(dòng)態(tài)設(shè)置meta和title的相關(guān)知識(shí)，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vuex中store的action和mutations用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04