web-view是什么
- web-view 是一個 web 瀏覽器組件，可以用來承載網(wǎng)頁的容器，會自動鋪滿整個頁面（nvue 使用需要手動指定寬高）。
- 點擊這里直達官網(wǎng)文檔
- 點擊這里下載我的代碼demo
- 本文最下面還有一些常見或者奇怪問題解決方案哦~
為什么使用這種方式搞頁面？有什么好處呢？
- 之前開發(fā)好的H5頁面，不想重新開發(fā)，想要直接放進項目用
- 頁面熱更新，不需要重新打包
- 復(fù)雜需求使用H5比較方便，比如復(fù)雜的echarts等不想要使用uniapp搞
- 其他好處等你 O(∩_∩)O 發(fā)掘哦~
如何使用web-view，并互相傳遞數(shù)據(jù)？
【uniapp 向 webview 發(fā)消息】
在uni-app vue頁面使用web-view發(fā)送消息給H5(注意觀察下面postMessage函數(shù))
<template>
<web-view
:src="url"
ref="webview"
@onPostMessage="handleWebviewMessage"
@message="handleWebviewMessage"
></web-view>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { onLoad, onBackPress } from "@dcloudio/uni-app";
import { systemInfo } from "../../utils/system";
const { uniPlatform, platform } = systemInfo();
const url = ref("https://www.baidu.com/");
// 先接受到h5頁面發(fā)來的data,再給H5發(fā)送數(shù)據(jù)的邏輯
const pages = getCurrentPages();
const vw = ref(null);
const postMessage = () => {
vw.value = pages[pages.length - 1].$getAppWebview().children()[0];
const userData = { TOKEN: "AAAAAA" };
// uniapp 向 webview 發(fā)消息
vw.value.evalJS(`receiveData(${JSON.stringify(userData)})`);
};
let postNumber = 0;
const handleWebviewMessage = (data) => {
console.log("接收到消息：" + JSON.stringify(data));
if (postNumber === 0) {
postMessage();
postNumber++;
}
};
// 下面的代碼選擇性使用
// 作為組件傳參使用
// onLoad((options) => {
// console.log("web-view::", options);
// url.value = decodeURIComponent(options.url);
// });
// 解決返回按鈕功能不兼容問題
// onBackPress(() => {
// if (uniPlatform === "app" && platform === "android") return false;
// uni.redirectTo({
// url: "/pages/home/index",
// });
// return true;
// });
</script>
utils/system.ts
const systemInfo = function () {
let systemInfomations = uni.getSystemInfoSync(); // 設(shè)備系統(tǒng)信息
let scaleFactor = 750 / systemInfomations.windowWidth; // 機型適配比例系數(shù)
let windowHeight = systemInfomations.windowHeight * scaleFactor; // 當(dāng)前機型-屏幕高度
let windowWidth = systemInfomations.windowWidth * scaleFactor; // 當(dāng)前機型-屏幕寬度
let statusBarHeight = systemInfomations.statusBarHeight * scaleFactor; // 狀態(tài)欄高度
let platform = systemInfomations.platform; // 運行平臺
const uniPlatform = systemInfomations.uniPlatform; // 運行環(huán)境
return {
scaleFactor,
windowHeight,
windowWidth,
statusBarHeight,
platform,
uniPlatform
};
};
export { systemInfo };
nvue獲取webview窗口的方式是與普通vue獲取webview的方式不一樣，下面自己選擇性寫哦
【webview 給 uniapp發(fā)消息】 H5端怎么發(fā)送數(shù)據(jù)給uniapp呢？
- 方案1：通過evalJS（這個有個注意事項，比如要如何保證一定能傳遞過去，避免出現(xiàn)沒有成功的情況，可以參考下面問題6的答案）
- 方案2：通過 url 傳參
【webview 給 uniapp發(fā)消息】 H5頁面代碼：index.html
先去下載這個uni.webview.js文件放入你H5項目里面：
最新版地址：https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
<h2 onclick="jumpTo()">我是\(^o^)/~模擬的登錄頁，現(xiàn)在沒有登陸成功哦</h2>
<h2>如果我收到信息，下面會出現(xiàn)粉色的字哦~</h2>
<h2 id="receiveData" style="color: pink;"></h2>
</body>
<script type="text/javascript" src="./uni.webview.1.5.4.js"></script>
<script type="text/javascript">
function receiveData(msg) {
document.getElementById('receiveData').innerText='下面是我收到的信息內(nèi)容：'+JSON.stringify(msg)
// localStorage.setItem() // 在這里可以拿到傳遞過來的數(shù)據(jù)，寫入localStorage，然后其他邏輯
}
document.addEventListener("UniAppJSBridgeReady", function () {
// webview 給 uniapp發(fā)消息
uni.postMessage({
data: {
action: "autoLogin",
},
});
uni.getEnv(function (res) { console.log("當(dāng)前環(huán)境：" + JSON.stringify(res)); });})
</script>
</html>
常見問題點
- web-view 加載 uni-app H5，內(nèi)部跳轉(zhuǎn)沖突如何解決？
使用 uni.webView.navigateTo - web-view 的頁面怎么和應(yīng)用內(nèi)的頁面交互？
調(diào)用 uni 相關(guān)的 API，就可以實現(xiàn)頁面切換及發(fā)送消息。參考：在 web-view 加載的 HTML 中調(diào)用 uni 的 API - web-view 加載的 HTML 中，是否可以調(diào)用原生？
加載的 HTML 中是有 5+ 環(huán)境的，在 plusready 后調(diào)用即可。參考：一個簡單實用的 plusready 方法添加鏈接描述 - uniapp嵌套webview頁面，返回按鈕跳轉(zhuǎn)問題，以及解決uniapp 使用安卓手機在webview點擊返回按鈕后可以正常返回,但是ios手機需要點擊按鈕2次，返回兩次的問題（假如你跳轉(zhuǎn)到H5的webview后因某些原因需要定制化左上角的返回按鈕，可以參考下面的做法）
// webview頁面代碼
import { onBackPress } from '@dcloudio/uni-app';
import { systemInfo } from '@/utils/system'; // 下面放這個代碼
const { uniPlatform, platform } = systemInfo();
onBackPress(() => {
if (uniPlatform === 'app' && platform === 'android') return false; // 如果你沒有遇到返回的兼容問題，就可以去掉這一行代碼
uni.redirectTo({
url: '/pages/home/index'
});
return true;
});
-
uniapp嵌套webview頁面，接收數(shù)據(jù)onPostMessage寫了不管用怎么辦？或者@message寫了不管用怎么辦？原因：nvue獲取webview窗口的方式是與普通vue獲取webview的方式不一樣，你可以這兩個選擇性寫
-
uniapp通過webview的evalJS傳遞數(shù)據(jù)給H5,有的時候傳遞不成功的情況如何解決？
可以先讓H5加載完畢后，告訴uniapp,然后我們再調(diào)用函數(shù)傳遞給H5，可以參考我上面的代碼，也可以直接下載本文最上面的我倉庫的代碼進行測試，如果路過的小伙伴有其他更好的辦法，歡迎留言哦~~ -
待補充其他問題，歡迎小伙伴提出其他問題，我會不斷更新本文檔哦
注意事項
- 小程序僅支持加載網(wǎng)絡(luò)網(wǎng)頁，不支持本地html
- 補充說明：app-vue下web-view組件不支持自定義樣式，而v-show的本質(zhì)是改變組件的樣式。即組件支持v-if而不是支持v-show。
- 小程序端 web-view 組件一定有原生導(dǎo)航欄，下面一定是全屏的 web-view 組件，navigationStyle: custom 對 web-view 組件無效。
- App 端使用 uni.web-view.js 的最低版為 uni.webview.1.5.4.js
- App 平臺同時支持網(wǎng)絡(luò)網(wǎng)頁和本地網(wǎng)頁，但本地網(wǎng)頁及相關(guān)資源（js、css等文件）必須放在 uni-app 項目根目錄->hybrid->html 文件夾下或者 static 目錄下，如下為一個加載本地網(wǎng)頁的uni-app項目文件目錄示例：
- nvue web-view 必須指定樣式寬高
- App 網(wǎng)頁向應(yīng)用 postMessage 為實時消息
- app-nvue web-view 默認沒有大小，可以通過樣式設(shè)置大小，如果想充滿整個窗口，設(shè)置 flex: 1 即可，標(biāo)題欄不會自動顯示 web-view 頁面中的 title。如果想充滿整個窗口且想要顯示標(biāo)題推薦使用 vue 頁面的 web-view(默認充滿屏幕不可控制大小), 想自定義 web-view 大小使用 nvue web-view
今天就寫到這里啦~
- 小伙伴們，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我們明天再見啦~~
- 大家要天天開心哦
歡迎大家指出文章需要改正之處~
學(xué)無止境，合作共贏文章來源：http://www.zghlxwxcb.cn/news/detail-702233.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-702233.html
歡迎路過的小哥哥小姐姐們提出更好的意見哇~~
到了這里，關(guān)于uniapp系列-超詳細教你在uni-app+vue3里通過web-view組件傳遞信息打開H5頁面寫入localstorage并解決兼容性的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
