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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript展開運算符和剩余運算符的區(qū)別詳解
本文主要介紹了JavaScript展開運算符和剩余運算符的區(qū)別詳解,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-01-01JavaScript數(shù)據(jù)可視化:ECharts制作地圖
這篇文章主要介紹了Echarts實現(xiàn)可視化地圖,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-08-08