亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

uniapp?web-view組件數(shù)據(jù)傳遞及使用注意點示例詳解

 更新時間:2025年06月03日 10:30:55   作者:web前端-rx  
uni-app中的web-view是一個?web?瀏覽器組件,可以用來承載網(wǎng)頁的容器,這篇文章主要介紹了uniapp?web-view組件數(shù)據(jù)傳遞及使用注意點的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

1.vue頁面

本篇文章除特別指出,H5均指原生html文檔,非uniapp編譯的h5

vue頁面向html頁面?zhèn)鲄?shù):①直接在src后面拼接參數(shù)(除App端之外,其他端除該方法外無其它辦法)②使用evalJs執(zhí)行h5里某個函數(shù)(僅App支持)

<web-view :src="src"></web-view>
let src = ref('')
src.value = `/hybrid/html/xx.html?a1=${a1}&a2=${a2}`

H5接收:

//通用(建議原生Html使用):    

function getQueryVariable(variable) {
        var query = decodeURIComponent(window.location.search.substring(1));
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) { return pair[1]; }
        }
        return '';
    }

    const a1 = getQueryVariable('a1');



//如果是uniapp編譯的h5可以推薦onLoad:

onLoad(e=>{
    console.log(e)
})

/*********************************************************************************************************/

H5向vue傳遞數(shù)據(jù),實測注意H5中調(diào)用uni.navigateTo跳轉(zhuǎn)uniapp頁面時,不支持events參數(shù)!

// h5向打開該h5的頁面?zhèn)鬟f參數(shù):

        let obj = {};

        let envObj = {};
        uni.getEnv(function (res) {
            envObj = res
        });
        if (envObj.h5) {
            window.parent.postMessage(obj, "*");
        } else {
            uni.postMessage({
                data: obj
            });
        }

        uni.navigateBack()


// h5跳轉(zhuǎn)其他頁面?zhèn)鬟f參數(shù):還是通過url傳遞

        uni.navigateTo({
            url: `/pages/p1/p1?param=${param}`
        })

        uni.redirectTo({
            url: `/pages/p1/p1?param=${param}`
        })

//其他uni跳轉(zhuǎn)等等.....

vue接收h5傳的參數(shù)

//在打開h5的頁面接收參數(shù)

let data = {};

	// #ifdef H5
	function receiveMessage(event) {
        console.log(event) //按打印的實際數(shù)據(jù),有些data是在event.data.data.arg里...
		if (event.data.type !== 'WEB_INVOKE_APPSERVICE') {
			data = event.data
		}
	}
	window.addEventListener("message", receiveMessage, false);
	// #endif

    // #ifndef H5
	const getMessage = (event) => {
        console.log(event) 
		if (Array.isArray(event.detail.data)) {
			data = event.detail.data[0];
		} else {
			data = event.detail.data;
		}
	}
    // #endif


//h5跳轉(zhuǎn)的其他頁面接收參數(shù)
import {onLoad} from '@dcloudio/uni-app'
onLoad(e=>{
    console.log(e)
}
	

vue向上一級vue頁面?zhèn)鬟f數(shù)據(jù):

//上一級vue頁面:
        let url = 'xxxxxxx';
		uni.navigateTo({
			url: url,
			events: {
				// 為指定事件添加一個監(jiān)聽器,獲取被打開頁面?zhèn)魉偷疆斍绊撁娴臄?shù)據(jù)
				xxData: function(data) {
                    console.log(data);
                    console.log(data.xxDataObj)
                    //.........
				}
			}
		});

//打開h5的vue頁面:
	import {
		getCurrentInstance,
	} from 'vue';

	import {
		onUnload
	} from '@dcloudio/uni-app'

    let data = '測試';
	const instance = getCurrentInstance().proxy
	const eventChannel = instance.getOpenerEventChannel()
	onUnload(() => {
		eventChannel.emit('xxData', {
			xxDataObj: data
		})
	})

2.nvue頁面

//nvue頁面需要設置style="flex: 1;"才能鋪滿全屏	

<web-view ref="myWebview" @onPostMessage="handlePostMessage" :src="src"
		style="flex: 1;"></web-view>

nvue向h5頁面?zhèn)鲾?shù)據(jù)仍可通過參數(shù)傳遞,也可以通過evalJs執(zhí)行js語句:

const myWebview = ref('');  //注意不要初始聲明為null,會報錯

//并且可以操作h5里的全局變量
//evalJs應延遲執(zhí)行或在handlePostMessage里執(zhí)行
myWebview.value.evalJs("console.log('執(zhí)行了')");

//或者
myWebview.value.evalJs("uniMsg(JSON.stringfiy(obj))");

h5向nvue傳遞數(shù)據(jù)非常簡單,與vue一致,但不用返回或跳轉(zhuǎn),可實時傳遞:

            uni.postMessage({
                data: {
                    "xxx":"xxx"
                }
            })


//nvue頁面接收:
	const handlePostMessage = e => {
        console.log(e)
		console.log(e.detail.data[0])
    }

特別注意:

1.App-安卓,如果項目配置了“自定義404等錯誤頁面”,斷網(wǎng)訪問web-view組件vue頁面,無法使用系統(tǒng)返回鍵返回,原生導航欄上返回也不行,只能殺死app重新進,控制臺僅報紅色“error”字母;官方也沒有回復解決辦法~,如果蘋果也有類似問題歡迎討論~(最新版HbuiderX4.57似乎已基本解決該問題,即多次按返回可以返回)

2.“UniAppJSBridgeReady”事件有時候會監(jiān)聽失敗,原因未知,這個事件監(jiān)聽放在引入uni_webview.js的后面實測OK:

<script type="text/javascript" src="js/uni_webview.js"></script>
<script>
    document.addEventListener('UniAppJSBridgeReady', xxFn)
</script>

3.nvue頁面中的h5頁面實測無法支持暗黑模式即

@media (prefers-color-scheme: dark) {
    
}

即使nvue頁面配置了plus.nativeUI.setUIStyle('auto');

4.nvue無法通過ref獲取webview實例,不能動態(tài)設置webview或獲取webview的一些參數(shù);

通過plus創(chuàng)建的webview雖然可以獲得實例,但需要自己設置寬高,無法做到向flex:1一樣鋪滿屏幕;通過計算得到的高度可能會有適配問題。

通過AI了解到nvue比vue頁面加載webview并不會有性能優(yōu)化。

所以個人推薦除非有無法解決的實時通信需求可以用nvue(比如App加載的webview里有下載按鈕,希望下載時停留在h5頁面而不是回退或跳轉(zhuǎn)),其他情況都用vue頁面

5.$getAppWebview() 不是官方公開 API,它是 HBuilderX 內(nèi)部方法,僅在 App 平臺有效。

其他平臺(如 H5、小程序)不支持該方法,調(diào)用會報錯。

總結(jié)

到此這篇關于uniapp web-view組件數(shù)據(jù)傳遞及使用注意點的文章就介紹到這了,更多相關uniapp web-view組件數(shù)據(jù)傳遞內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • Bootstrap基本組件學習筆記之進度條(15)

    Bootstrap基本組件學習筆記之進度條(15)

    這篇文章主要為大家詳細介紹了Bootstrap基本組件學習筆記之進度條,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • JavaScript展開運算符和剩余運算符的區(qū)別詳解

    JavaScript展開運算符和剩余運算符的區(qū)別詳解

    本文主要介紹了JavaScript展開運算符和剩余運算符的區(qū)別詳解,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • date.parse在IE和FF中的區(qū)別

    date.parse在IE和FF中的區(qū)別

    這個方法是很常用的,比如在驗證輸入日期是否存在時,可以使用它,如果是一個不存在的日期,則其返回值將是NaN,另外如果要比較兩個日期的先后,或是計算兩個日期相差的天數(shù) ,都可以用到。
    2010-07-07
  • 一文帶你深入了解JavaScript中的閉包

    一文帶你深入了解JavaScript中的閉包

    閉包(closure)是一個函數(shù)以及其捆綁的周邊環(huán)境狀態(tài)的引用的組合,就是讓開發(fā)者可以從內(nèi)部函數(shù)訪問外部函數(shù)的作用域,下面下面小編就來和大家深入聊聊它的使用吧
    2023-07-07
  • uniapp使用Vant-weapp的最新方法教程

    uniapp使用Vant-weapp的最新方法教程

    Vant?Weapp是有贊前端團隊開源的一套小程序UI組件庫,助力開發(fā)者快速搭建小程序應用,下面這篇文章主要給大家介紹了關于uniapp使用Vant-weapp的最新方法教程,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2023-04-04
  • js 3種歸并操作的實例代碼

    js 3種歸并操作的實例代碼

    這篇文章介紹了js 3種歸并操作的實例代碼,有需要的朋友可以參考一下
    2013-10-10
  • javascript 數(shù)組排序函數(shù)

    javascript 數(shù)組排序函數(shù)

    javascript的數(shù)組排序函數(shù) sort方法,默認是按照ASCII 字符順序進行升序排列。
    2009-08-08
  • JavaScript快速排序

    JavaScript快速排序

    JavaScript快速排序...
    2007-01-01
  • JavaScript數(shù)據(jù)可視化:ECharts制作地圖

    JavaScript數(shù)據(jù)可視化:ECharts制作地圖

    這篇文章主要介紹了Echarts實現(xiàn)可視化地圖,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2021-08-08
  • 如何用js實現(xiàn)判斷是否是小數(shù)

    如何用js實現(xiàn)判斷是否是小數(shù)

    這篇文章主要給大家介紹了關于如何用js實現(xiàn)判斷是否是小數(shù)的相關資料,文中介紹了如何通過使用isNaN()函數(shù)和使用正則表達式來解決,具有一定參考借鑒價值,需要的朋友可以參考下
    2024-04-04

最新評論