国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

uniapp系列-超詳細教你在uni-app+vue3里通過web-view組件傳遞信息打開H5頁面寫入localstorage并解決兼容性

這篇具有很好參考價值的文章主要介紹了uniapp系列-超詳細教你在uni-app+vue3里通過web-view組件傳遞信息打開H5頁面寫入localstorage并解決兼容性。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

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的方式不一樣,下面自己選擇性寫哦

uniapp系列-超詳細教你在uni-app+vue3里通過web-view組件傳遞信息打開H5頁面寫入localstorage并解決兼容性,移動端開發(fā),前端,uni-app,vue.js

【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>

常見問題點

  1. web-view 加載 uni-app H5,內(nèi)部跳轉(zhuǎn)沖突如何解決?
    使用 uni.webView.navigateTo
  2. web-view 的頁面怎么和應(yīng)用內(nèi)的頁面交互?
    調(diào)用 uni 相關(guān)的 API,就可以實現(xiàn)頁面切換及發(fā)送消息。參考:在 web-view 加載的 HTML 中調(diào)用 uni 的 API
  3. web-view 加載的 HTML 中,是否可以調(diào)用原生?
    加載的 HTML 中是有 5+ 環(huán)境的,在 plusready 后調(diào)用即可。參考:一個簡單實用的 plusready 方法添加鏈接描述
  4. 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;
});
  1. uniapp嵌套webview頁面,接收數(shù)據(jù)onPostMessage寫了不管用怎么辦?或者@message寫了不管用怎么辦?原因:nvue獲取webview窗口的方式是與普通vue獲取webview的方式不一樣,你可以這兩個選擇性寫
    uniapp系列-超詳細教你在uni-app+vue3里通過web-view組件傳遞信息打開H5頁面寫入localstorage并解決兼容性,移動端開發(fā),前端,uni-app,vue.js

  2. uniapp通過webview的evalJS傳遞數(shù)據(jù)給H5,有的時候傳遞不成功的情況如何解決?
    可以先讓H5加載完畢后,告訴uniapp,然后我們再調(diào)用函數(shù)傳遞給H5,可以參考我上面的代碼,也可以直接下載本文最上面的我倉庫的代碼進行測試,如果路過的小伙伴有其他更好的辦法,歡迎留言哦~~

  3. 待補充其他問題,歡迎小伙伴提出其他問題,我會不斷更新本文檔哦

注意事項

  • 小程序僅支持加載網(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é)無止境,合作共贏

uniapp系列-超詳細教你在uni-app+vue3里通過web-view組件傳遞信息打開H5頁面寫入localstorage并解決兼容性,移動端開發(fā),前端,uni-app,vue.js文章來源地址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)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • uni-app+vue3會遇到哪些問題

    已經(jīng)用 uni-app+vue3+ts 開發(fā)了一段時間,記錄一下日常遇見的問題和解決辦法 uni-app 是支持多端,如果你想讓你的代碼,只在部分平臺使用,那么就需要用的它的單端處理語法 //#ifdef 和 //#ifndef 等。 因為有異形手機屏的存在,最頂部有攝像頭,最下面有導(dǎo)航條,為了避免界面內(nèi)

    2024年02月19日
    瀏覽(21)
  • uni-app:vue3 + uni-app 在微信小程序中無法使用app.component全局注冊組件

    按上文中的代碼執(zhí)行后,會發(fā)現(xiàn)在微信小程序開發(fā)中全局注冊的組件是無法顯示的,這是uniapp的一個未解決bug, 在uniapp中出了可以通過vue實例的component方法注冊全局組件外,uniapp支持另一種全局注冊的方式,就是通過 easycom 掃描注冊,步驟如下 easycom 的掃描流程是:通過代碼

    2024年02月16日
    瀏覽(105)
  • VUE3、uni-app、SpringBoot登錄密碼加密

    aes.js import {Encrypt} from \\\'@/utils/aes.js\\\'; loginForm.value.password = Encrypt(password.value); new Aes().decrypt(loginBody.getPassword()) CryptoJS.js aes.js import {Encrypt} from \\\'@/utils/aes.js\\\' Encrypt(this.password)

    2024年02月08日
    瀏覽(20)
  • 小程序-uni-app:uni-app-base項目基礎(chǔ)配置及使用/uni-app+vue3+ts+vite+vscode

    小程序-uni-app:uni-app-base項目基礎(chǔ)配置及使用/uni-app+vue3+ts+vite+vscode

    目前(20230605)uni-app最新版本(3.8.4.20230531) 一、官網(wǎng)文檔 微信開放文檔 uni-app官網(wǎng) 二、創(chuàng)建項目 項目目標(biāo):vue3+ts+vite+vscode 創(chuàng)建以 typescript 開發(fā)的工程(如命令行創(chuàng)建失敗,請直接訪問?gitee?下載模板) npx degit dcloudio/uni-preset-vue#vite-ts uniapp-base ? 本文創(chuàng)建成功 ? 為了驗

    2024年02月15日
    瀏覽(91)
  • 小程序-uni-app:uni-app-base項目基礎(chǔ)配置及使用 / uni-app+vue3+ts+vite+vscode

    小程序-uni-app:uni-app-base項目基礎(chǔ)配置及使用 / uni-app+vue3+ts+vite+vscode

    目前(20230605)uni-app最新版本(3.8.4.20230531) 一、官網(wǎng)文檔 微信開放文檔 uni-app官網(wǎng) 二、創(chuàng)建項目 項目目標(biāo):vue3+ts+vite+vscode 創(chuàng)建以 typescript 開發(fā)的工程(如命令行創(chuàng)建失敗,請直接訪問?gitee?下載模板) npx degit dcloudio/uni-preset-vue#vite-ts uniapp-base ? 本文創(chuàng)建成功 ? 為了驗

    2024年02月05日
    瀏覽(3535)
  • uni-app+vue3+ts項目搭建完整流程

    uni-app+vue3+ts項目搭建完整流程

    項目代碼同步更新至碼云 uni-vue3-ts-template 利用 uni-app 開發(fā),有兩種方法: 通過 HBuilderX 創(chuàng)建(需安裝 HBuilderX 編輯器) 通過命令行創(chuàng)建(需安裝 NodeJS 環(huán)境),推薦使用 vscode 編輯器 這里我們使用第2種方法,這兩種方法官方都有詳細介紹 點擊查看官方文檔 安裝 Vue3 插件,點

    2024年02月03日
    瀏覽(24)
  • Uni-app + Vue3 + TS +Vite 創(chuàng)建項目

    Uni-app + Vue3 + TS +Vite 創(chuàng)建項目

    npm 都很熟,可是與 npm 如此相似的 npx 是干嘛的呢?我們?yōu)樯跻榻B npx ? 由于 uni-app 官方提供創(chuàng)建命令使用的是 npx,所以我們先來了解下 npx 是干什么的?它與 npm 的區(qū)別。 npx 是 npm 的高級版本,它從 npm v5.2 版本開始引入的,與 npm 綁定在一起,無需額外安裝,具有更大的功

    2023年04月15日
    瀏覽(22)
  • uni-app+vue3微信小程序切換主題皮膚

    思路來源: https://blog.csdn.net/qq_42611074/article/details/128236458 引用store做全局css變量替換; store.js 添加全局的監(jiān)聽函數(shù) common/themeMixin.js main.js 給要切換的頁面加上css變量 login.vue 升級版 在base.css寫好主題配色; 引用store做全局css變量替換; store.js 添加全局的監(jiān)聽函數(shù) common/themeM

    2024年02月12日
    瀏覽(100)
  • #Uniapp:uni-app中vue2生命周期--11個

    uni-app中vue2生命周期 生命周期鉤子 描述 H5 App端 小程序 說明 beforeCreate 在實例初始化之后被調(diào)用 詳情 √ √ √ created 在實例創(chuàng)建完成后被立即調(diào)用 詳情 √ √ √ beforeMount 在掛載開始之前被調(diào)用 詳情 √ √ √ mounted 掛載到實例上去之后調(diào)用 詳情 注意:此處并不能確定子組件

    2024年02月02日
    瀏覽(67)
  • 在uni-app使用vue3進行store全局數(shù)據(jù)共享

    在uni-app使用vue3進行store全局數(shù)據(jù)共享

    在uni-app中使用vue3進行store的全局數(shù)據(jù)共享,網(wǎng)上文章太雜了,記錄一下自己寫的一個最簡單易懂的例子,以供自己后面需要用到時候可以最直觀的知道到底怎么實現(xiàn) 在index.js中寫入代碼如下(示例): uni-app好像內(nèi)置vuex,不需要額外下載,如果記錯了的話就得先去下載好 代

    2024年02月09日
    瀏覽(36)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包