欧美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)文章

最新評論