欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp?webview和H5通信的3種方式代碼示例

 更新時間：2024年04月03日 10:16:52   作者：愛誰誰12138  
最近在研究uni-app跨端開發(fā)APP和H5的通訊和交互,比如H5調(diào)用APP的方法,APP往H5里面?zhèn)鲄?H5往app外面?zhèn)鲄?這篇文章主要給大家介紹了關(guān)于uniapp?webview和H5通信的3種方式,需要的朋友可以參考下

前言

uniapp可以打包成多個端，再和H5通信的方式中，涉及到uniapp和H5通信，APP和H5通信，小程序和H5通信。其中的h5端分為非uniapp打包的h5和uniapp打包的h5,這兩者的區(qū)別其實就是uniapp的h5里面已經(jīng)有了uni這個定義，所以不能再uniapp里面直接用官方提供的那個js需要重新定義js里面的定義

app和h5的通信

uniapp打包成的APP，h5向webview發(fā)送消息，按照官方的文檔就可以webview,需要注意的就是如果H5是uniapp的，需要更換一下官方那個js里面的uni變量.

  • 引入這個js，需要配置一個html模板頁面，新建一個文件，然后再配置里面加上這個文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="facebook-domain-verification"
      content="ubjskcwra0ommj0ts7gldbkenw4bei"
    />
    <link rel="stylesheet" href="<%= BASE_URL %>static/index.css" rel="external nofollow"  />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <script>
      var coverSupport =
        "CSS" in window &&
        typeof CSS.supports === "function" &&
        (CSS.supports("top: env(a)") || CSS.supports("top: constant(a)"));
      document.write(
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
          (coverSupport ? ", viewport-fit=cover" : "") +
          '" />'
      );
    </script>

    <title></title>
  </head>

  <body>
    <div id="app">
      <!--app-html-->
    </div>
    <!-- <script type="module" src="/main.js"></script> -->
  </body>
  <script
    type="text/javascript"
    src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"
  ></script>
	
  <script
    type="text/javascript"
    src="<%= BASE_URL %>static/js/uni.webview.js"
  ></script>

  <script>
    wx.miniProgram.getEnv(function (res) {
      console.log("當(dāng)前環(huán)境：" + JSON.stringify(res));
    });
    document.addEventListener("UniAppJSBridgeReady", function () {
      webUni.webView.getEnv(function (res) {
        console.log("當(dāng)前環(huán)境：" + JSON.stringify(res));
      });

      // uni.webView.navigateTo(...)
    });
  </script>
</html>
  • 在需要的地方發(fā)送消息就可以了
      webUni.postMessage({
          data: {
            action: "fabuyuzhan",
            params: {},
          },
        });

小程序和h5的通信

小程序和H5通信有限制，沒有message那種實時的接收消息，小程序只有頁面銷毀的時候才會發(fā)送消息，這個感覺就沒什么用處了，而且還需要引入微信的那個js,才能使用，我建議的處理方式是跳轉(zhuǎn)頁面吧

         webUni.navigateTo({
            url: "/mySubPages/pages/preview/previewIndexList",
            success: (res) => {
              console.log(res); // 頁面跳轉(zhuǎn)成功的回調(diào)函數(shù)
            },
            fail: (err) => {
              console.log(err); // 頁面跳轉(zhuǎn)失敗的回調(diào)函數(shù)
            },
          });

uniapp開發(fā)的APP，沒用webview而是用的iframe嵌入。

客戶端使用APP開發(fā)的，但是有一個h5是小游戲，使用webview的時候有個問題，就是無法很好的控制導(dǎo)航欄和狀態(tài)欄，有時候在小游戲里面點擊，進(jìn)入全屏，但是退出的時候無法退出當(dāng)前頁面，而要先退出全屏然后再退出頁面，經(jīng)過測試，發(fā)現(xiàn)直接用iframe比較好控制，但是iframe通信沒有webview通信方便，需要用的renderjs

<template>
	<view>
		<iframe id="iframe" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }" :src="typeUrl"
			ref="iframe">
		</iframe>
		<!-- 		<web-view id="iframe" :style="{ width: frameWidth + 'px', height: frameHeight + 'px' }" :src="typeUrl"
			ref="iframe">
		</web-view> -->
	</view>
</template>
<script>
	export default {
	method:{
				receiveMessage(arg) {
				console.log("接收到renderjs回傳的消息", arg);
				// const action = data.data.data.arg.action;
				// console.log('收到消息 arg', data.data.data.arg);
				const action = arg.action;
				console.log(" 收到消息action", action);
			},
	}
}
</script>
<script module="test" lang="renderjs">
	export default {
		mounted() {
			//注冊消息方法
			window.addEventListener("message", this.receiveMsg, false);
		},
		methods: {
			receiveMsg(data) {
				console.log('收到renderjs消息', data);
				const arg = data.data.data.arg;
				console.log('收到消息 arg', data.data.data.arg);
				if (arg) {
					//通知方法，然后去做處理
					this.$ownerInstance.callMethod('receiveMessage', data.data.data.arg)
				}
			},
		}
	}
</script>

附：uni-app向web-view發(fā)送消息

（1）通過url帶參數(shù)傳遞

uni-app頁面：

<web-view @message="getMessage" :src="webViewUrl"></web-view>

computed: {
    webViewUrl() {
      return `${config.indexUrl}?accessToken=${this.accessToken}`
    }
}

web-view網(wǎng)頁對url查詢字符串進(jìn)行解析即可得到數(shù)據(jù)：

/**
 * 解析url傳遞的參數(shù)
 */
getQuery(name) {
  // 正則：[找尋'&' + 'url參數(shù)名字' = '值' + '&']（'&'可以不存在）
  const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)")
  const value = window.location.hash.substr(3).match(reg)
  // 內(nèi)網(wǎng)服務(wù)
  // const value = window.location.search.substr(1).match(reg)
  if (value != null) {
    // 對參數(shù)值進(jìn)行解碼
    return decodeURIComponent(value[2])
  }
  return null
}

const accessToken = this.getQuery('accessToken')

（2）evalJS方法

uni-app頁面：

<web-view @message="message" :src="webViewUrl"></web-view>

methods: {
     message(arg) {
         console.log(JSON.stringify(arg))
         const  _funName = 'msgFromUniapp',
          _data = {
              msg: 'click'
          }
         const currentWebview = this.$scope.$getAppWebview().children()[0]
         currentWebview.evalJS(`${_funName}(${JSON.stringify(_data)})`)
     }
 }

web-view頁面：

window.msgFromUniapp = function(arg) {
   console.log(JSON.stringify(arg))
}

總結(jié) 

到此這篇關(guān)于uniapp webview和H5通信的3種方式的文章就介紹到這了,更多相關(guān)uniapp webview和H5通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • Vue全局事件總線和訂閱與發(fā)布使用案例分析講解

    Vue全局事件總線和訂閱與發(fā)布使用案例分析講解

    在?vue?里我們可以通過全局事件總線來實現(xiàn)任意組件之間通信，它的原理是給?Vue?的原型對象上面添加一個屬性。這樣的話我所有組件的都可以訪問到這個屬性，然后可以通過這個屬性來訪問其他組件給這個屬性上面綁定的一些方法，從而去傳遞數(shù)據(jù)
    2022-08-08
  • vue中解決el-date-picker更改樣式不生效問題

    vue中解決el-date-picker更改樣式不生效問題

    在使用Vue.js進(jìn)行前端開發(fā)的過程中,Element?UI?是一個非常流行的UI庫,它提供了一套完整的組件來快速搭建美觀的用戶界面,但是我們經(jīng)常遇到一個問題使用Element?UI提供的el-date-picker組件時,嘗試自定義其樣式卻無法生效,所以本文給大家介紹如何解決這個問題
    2024-10-10
  • Vue3+Vite實現(xiàn)項目搭建步驟

    Vue3+Vite實現(xiàn)項目搭建步驟

    這篇文章主要介紹了Vue3+Vite實現(xiàn)項目搭建步驟,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2024-07-07
  • vue車牌搜索組件使用方法詳解

    vue車牌搜索組件使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了vue車牌搜索組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue2.0 從零開始_環(huán)境搭建操作步驟

    Vue2.0 從零開始_環(huán)境搭建操作步驟

    下面小編就為大家?guī)硪黄猇ue2.0 從零開始_環(huán)境搭建操作步驟。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • vue.js實現(xiàn)的綁定class操作示例

    vue.js實現(xiàn)的綁定class操作示例

    這篇文章主要介紹了vue.js實現(xiàn)的綁定class操作,結(jié)合實例形式分析了vue.js綁定class常見的3種操作技巧,需要的朋友可以參考下
    2018-07-07
  • ant design vue嵌套表格及表格內(nèi)部編輯的用法說明

    ant design vue嵌套表格及表格內(nèi)部編輯的用法說明

    這篇文章主要介紹了ant design vue嵌套表格及表格內(nèi)部編輯的用法說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-10-10
  • Vue最新防抖方案(必看篇)

    Vue最新防抖方案(必看篇)

    今天小編就為大家分享一篇Vue最新防抖方案(必看篇)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)

    Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)

    這篇文章主要為大家介紹了Vben Admin 多標(biāo)簽頁狀態(tài)管理源碼學(xué)習(xí)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-09-09
  • 開發(fā)Vue樹形組件的示例代碼

    開發(fā)Vue樹形組件的示例代碼

    本篇文章主要介紹了開發(fā)Vue樹形組件的示例代碼，它展現(xiàn)了組件的遞歸使用。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12

最新評論