已經很久沒有更新我的博客了，差點要遺忘自己還有博客了，哈哈哈哈。
最近有接觸過關於web-view的東西，大家也知道我一直在做uni-app的項目，也研究了很久，收獲頗豐吧，今天就跟大家分享一下
什么是web-view
web-view是一個web瀏覽器組件，可以用來承擔網頁的容器，會自動鋪滿整個屏幕
各小程序平台，web-view 加載的 url 需要在后台配置域名白名單，包括內部再次 iframe 內嵌的其他 url 。
具體的使用我就不一一介紹了，在官網上都有介紹--->uni-app web-View<---我說點需要注意的地方我以場景來介紹怎樣
APP --- vue頁面與h5頁面通訊
- src 指的是web-view需要引入的h5頁面，vue頁面模式下，嵌入的頁面會自動鋪滿屏幕，不需要單獨去設置頁面寬高
- 嵌入的h5項目或者頁面不是uni-app項目搭建的話，需要在index.html頁面或這是當前的HTML頁面引入uni-app項目的API ,這樣才能使用,才能相互通訊--->API
- app端
// 引入需要嵌入的h5 鏈接 <template> <view> <web-view @message="message" src="https://uniapp.dcloud.io/static/web-view.html"></web-view> </view> </template> //在methods中接收h5發送的消息 /** * @information message中 接收到的是由h5項目通過uni.postMessage中傳遞出來的數據，以數組的形式接收每次的消息 */ message(event){ console.log('接收到消息'，event.detail.data) } - h5 項目
//引入uni-app的api之后 ，只需綁定事件，向APP傳遞消息 <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> <script> document.addEventListener('UniAppJSBridgeReady', function() { uni.postMessage({ data: { action: '這是我傳送的消息' } });//傳遞的消息信息，必須寫在 data 對象中。 }); </script>
這個就是vue與h5 的整個通訊流程，BUT！！！，關鍵來了，注意點來了，就是他不能實時通訊。他只有在頁面 后退，組件銷毀，分享的時候會觸發message事件並接收到消息，說白了就是他並不能實時通訊
解決辦法
- 將uni-app項目的編譯模式更改為V3編譯模式，V3編譯模式下，網頁向應用postMessage為實時消息
- 將uni-app項目中的使用web-view的vue頁面更改稱為nuve頁面，此時，消息傳遞也為實時通訊，詳細介紹一下nvue與h5頁面通訊
APP --- nvue頁面與h5頁面通訊
nuve頁面對於web-view來說與vue有點點的不同
-
樣式來說，nuve中的web-view必須指定寬高，它不像vue一樣會自動鋪滿，需要自己自己規定，但是這個寬高不能‘寫死’，咱們做的是APP端，屏幕不能是‘死’的，所以先獲取手機屏幕信息之后再規定屏幕寬高吧
-
調試來說，nvue他現在不支持h5 哈，所以通訊這一塊吧，你不能在瀏覽器上面調試，必須真機運行噠
-
方法來說，為了實時通訊，頁面更換為nvue，相對應的方法也要從@message換成@onPostMessage
<template> <view> <web-view @onPostMessage="message" :style="{width:'200px', height:'200px'}" src="https://uniapp.dcloud.io/static/web-view.html"></web-view> </view> </template>
APP 跳轉頁面
在h5頁面中引入web-view的方法的基礎上，不但可以像上面一樣進行通訊，還可以在跳轉頁面，達到從嵌入h5跳回到本地應用的頁面上的效果，跳轉頁面的方式與uni-app一致，在h5頁面寫入方法就好
- uni.navigateTo // 跳轉到指定頁面
- uni.redirectTo // 關閉當前頁面跳轉到指定頁面
- uni.reLaunch // 關閉所有頁面跳轉到指定頁面
- uni.switchTab // 跳轉tab頁面--只能跳轉tab頁
- uni.navigateBack // 返回頁面層級
注意
這里有一個沖突點，當web-view嵌入的h5 是uni-app生成的h5資源的話，這樣跳轉要怎么跳轉呢
使用uni.webView.navigateTo //其中的webView指的是你嵌入的h5的跳轉想要跳轉回應用
小程序 --- vue頁面與h5頁面通訊
- 小程序的與app一致，引入的h5頁面會自動鋪滿小程序頁面。個人類型與海外類型的小程序暫不支持
- 小程序的src不變
- 通訊方法由@message更改為@bindmessage 出發時機依舊為小程序后退，組件銷毀或者分享觸發並接收到消息
- 引入uni-appAPI之后，再引入微信平台的js文件 --->wx
- 發送消息方法更改為 wx.miniProgram.postMessage({ data: 'hhh' })
- 小程序
<web-view src="http://a.html?id=123"></web-view> - h5
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> // javascript wx.miniProgram.postMessage({ data: 'hhh' }) //此時接收不到，因為沒有觸發時機，所以可以進行人為操作 <script type="text/javascript"> wx.miniProgram.navigateBack({ delta: 1 }) wx.miniProgram.postMessage({ data: 'foo' }) </script>
APP端web-view擴展
App端的webview是非常強大的，可以更靈活的控制和擁有更豐富的API。
每個vue頁面，其實都是一個webview，而vue頁面里的web-view組件，其實是webview里的一個子webview。這個子webview被append到父webview上。
通過以下方法，可以獲得這個web-view組件對應的js對象，然后參考https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject，可以進一步重設這個web-view組件的樣式，比如調整大小
<template> <view> <web-view src="https://www.baidu.com"></web-view> </view> </template> <script> var wv;//計划創建的webview export default { onReady() { // #ifdef APP-PLUS var currentWebview = this.$scope.$getAppWebview() //此對象相當於html5plus里的plus.webview.currentWebview()。在uni-app里vue頁面直接使用plus.webview.currentWebview()無效，非v3編譯模式使用this.$mp.page.$getAppWebview() setTimeout(function() { wv = currentWebview.children()[0] wv.setStyle({top:150,height:300}) }, 1000); //如果是頁面初始化調用時，需要延時一下 // #endif } }; </script>
獲取當前環境
- HTML 在不同的環境下，可能需要執行不同的操作或傳遞不同的消息。可以通過 uni.getEnv() 方法，來獲取當前的環境信息。
document.addEventListener('UniAppJSBridgeReady', function() { uni.getEnv(function(res) { if (res.plus) { console.log('當前環境為【5+App】'); } else if (res.miniprogram) { console.log('當前環境為【微信小程序】'); } }); });