?

?

Unity 工具之 UniWebView 內嵌網頁/瀏覽器到應用中，并且根據UGUI大小放置（簡單適配UGUI）

?

目錄

Unity 工具之 UniWebView 內嵌網頁/瀏覽器到應用中，并且根據UGUI大小放置（簡單適配UGUI）

一、簡單介紹

二、UniWebView 組件上的幾個參數屬性選項介紹

三、一些關鍵接口介紹

四、Transition

五、Memory Management（內存管理）

六、Messaging System

七、注意實現

八、效果預覽

九、實現 通過UGUI控制 WebView 大小的使用的具體步驟

十、關鍵代碼

十一、參考工程

---

?

一、簡單介紹

Unity 工具類，自己整理的一些游戲開發可能用到的模塊，單獨獨立使用，方便游戲開發。

本節介紹，使用 UniWebView 內嵌網頁/瀏覽器到應用中，并通過 UGUI 控制 Web View 大小顯示的方法。方法不唯一，這里僅供參考。

?

UniWebView 包含一組 C# 的高層級 API，它對 iOS 和 Android 平臺的本機 API 進行了抽象封裝。使用 UniWebView，您可以在無需了解本機開發的任何內容的情況下，就將瀏覽器行為添加到游戲中。當您需要顯示活動公告及通知，或為玩家排名添加排行板，或是向用戶顯示任何網頁內容時，UniWebView 都可以幫助您輕松解決問題。

UniWebView 支持 在iOS 9.0 或更高版本，以及 Android 5.0 (API Level 21) 或更高版本。它還包含在 macOS 上的 Unity Editor 的完整功能支持。

功能：

• ??? 網絡瀏覽

• ??? 載入本地 HTML 文件

• ??? JavaScript 完整支持

• ??? 基于 url scheme 的消息系統

• ??? 通過絕對值或引用 Unity UI 元素的相對值來設置位置和大小

• ??? 播放 YouTube，Vimeo 或本地視頻

• ??? 獲取照片和上傳

?

注意：UniWebView 使用版本為?UniWebView 3.7.0

?

二、UniWebView 組件上的幾個參數屬性選項介紹

1、Url On Start

在UniWebView的Start() 方法里會加載url

2、Show On Start

勾選的話會在Start()方法里主動顯示。

未勾選的話需要主動調用Show()方法

3、Full Screan

全屏展示，勾選上的話會忽略Frame 和 Reference Rect Transform的設置

4、使用固定大小展示的話 設置 Frame的值，并且取消勾選Full Scream，以及

Reference Rect Transform 設置為None

5、Reference Rect Transform

引用一個Rect Transform并更改web view的大小以遵循該轉換。如果您正在使用具有多個分辨率支持的Unity UI，那么它是非常有用的。

6、Use Toolbar

勾選后只在ios已經mac上有用。包括關閉，前進，返回等。可以設置Toolbar Position 為Top，則在頂端顯示，Bottom 則在底端顯示。android的導航欄就有這些功能，所以不需要這個。

7、一旦UniWebView被Done按鈕或Back按鈕關閉，它將在默認情況下銷毀組件本身，以便盡快釋放資源。您將無法重用相同的UniWebView。如果想要顯示另一個頁面，則需要創建一個新的UniWebView。

?

三、一些關鍵接口介紹

1、OnPageFinished 當url加載完畢后調用

也可以使用方法作為委托偵聽器(delegate Listener)

參考： https://msdn.microsoft.com/en-us/library/018hxwa8.aspx

2、OnShouldClose

OnShouldClose是在web視圖即將關閉時發送給您的事件。用戶可以使用iOS上的“完成”按鈕或Android上的“后退”按鈕。一旦web view關閉，UniWebView組件也將被銷毀，以保持干凈。如果您在引用中保存web視圖(例如，我們在這里通過webView字段保存web視圖)，那么很有可能將其設置為null。否則，如果你想要加入的話，你以后可能會遇到麻煩。

tips：

在Android上，“后退”按鈕將引導用戶返回到上一個頁面。如果沒有返回的頁面，它將發送OnShouldClose事件，如果返回true，則嘗試關閉web view。

3、EvaluateJavaScript? 調用 JavaScript 方法

第一個參數：JavaScript 的方法

第二個參數：第二個參數是帶有UniWebViewNativeResultPayload的操作。payLoad也用于其他web view的方法回調，其中包含來自本機端的基本信息。這里我們只需要檢查下狀態碼，“0”表示一切正常。

4、OnMessageReceived

html里需要有

?

四、Transition

1、顯示/隱藏過渡

通過修改Show 和 Hide的參數

fade 淡入淡出效果

edge 出現/消失的方向 eg：UniWebViewTransitionEdge.Bottom 從底部出現

duration 持續時間

completionHandler：完成后回調

tip：這兩個方法有個bool返回值，每次只允許進行一個轉換，如果您試圖在上一個轉換打開時初始化另一個轉換，那么新的轉換將不會啟動，返回值將為false。

2、Web View Animation

UniWebView還支持在顯示web視圖時對其進行動畫處理。使用AnimateTo方法，就可以指定一個幀作為目標幀。通過使用此方法，您還可以設置動畫的持續時間和延遲，以便進行精細的控制。

?

五、Memory Management（內存管理）

1、在不需要時銷毀web視圖

2、如果web視圖的holder組件(本例中為MyMonoBehaviour組件)有可能被破壞，您可能還需要在MyMonoBehaviour中添加OnDestroy，并關閉web視圖以防止泄漏:

3、將一個監聽器添加到OnShouldClose事件中，在關閉用戶操作的web view時，Android和iOS將調用該事件。

tip:如果return false ， 視圖不會被關閉。OnShouldClose讓我們有機會重寫關閉方法。

4、在使用webView的MyMonoBehaviour網站的其他部分，你可以在使用webView之前檢查它是否為null:

5、在不使用時清理緩存

當用戶瀏覽Internet時，它將創建一些緩存，包括緩存的圖像和響應，或者web頁面將一些內容存儲在本地存儲中。雖然在大多數情況下它不會占用內存，但是如果您沒有在這種情況下使用緩存，您可以調用CleanCache清除它們。

?

六、Messaging System

1、UniWebView通常情況下檢查所有從"uniwebview://"啟動的鏈接。OnMessageReceived事件將會收到UniwebViewMessage object

UniWebView消息傳遞系統還可以幫助您解析輸入

?

2、添加你自己的scheme

?

3、也可以設置"http"和"https"作為一個scheme，它將阻止所有web資源的加載并將它們發送給您。這給了一個檢查所有交通的機會。

eg：它的一個用例是您不希望您的用戶離開當前頁面。因此，您可以首先加載您的頁面，然后在OnPageFinished事件中，通過向UniWebView消息系統添加“http(s)”方案來禁用所有導航:

?

4、消息系統構建在URL和Unity的消息發送器上。這意味著您不能同時發送無限大小的數據。URL的最大允許長度與設備和系統版本不同。但是一個URL的安全長度是~16KB。如果你有什么大的東西從網頁發送到Unity并且遇到一些問題，最好把它們分成小塊。
?

更多接口信息可到官網，或者查看插件的接口說明，這里不再贅述

?

七、注意實現

1、由于UniWebView 是貼屏顯示的，所以在UGUI中的的UI組件在Web顯示后會被覆蓋掉

2、由于UniWebView 是貼屏幕顯示，所以在AR/VR 3D世界中使用不是很有好

3、UniWebView 不支持 PC端，所以請打包到 Android 或者 IOS 設備上運行

?

八、效果預覽

?

九、實現 通過UGUI控制 WebView 大小的使用的具體步驟

1、打開Unity，導入 UniWebView 插件

?

2、在場景中搭建 UI

?

3、新建腳本，編寫腳本，并添加到 UI 控件上，對應賦值腳本

?

4、添加 UniWebView 腳本給 Web_Image，把Web_Image 賦值 UniWebView? 的 Reference Rect Transform，這樣 Web_Image ，并且取消 Full Screen ，這樣就可以控制 Web View 大小隨 Web_Image 了

?

5、打包，到設備上運行，效果如下

?

十、關鍵代碼

using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI;public class WebViewUI : MonoBehaviour {public UniWebView uniWebView;public Text state;public Button openUrlBtn;// Use this for initializationvoid Start(){uniWebView.OnPageFinished += (UniWebView webView, int statusCode, string url) => {uniWebView.Show();state.text = "";};uniWebView.OnPageStarted += (UniWebView webView, string url)=>{uniWebView.Hide();state.text = "Loading...";};uniWebView.OnPageErrorReceived += (UniWebView webView, int errorCode, string errorMessage)=>{state.text = "Error:" + errorCode;};openUrlBtn.onClick.AddListener(()=> {Load("http://www.baidu.com");});}public void Load(string url){gameObject.SetActive(true);uniWebView.CleanCache();uniWebView.Load(url);}public void Close(){gameObject.SetActive(false);} }

?

十一、參考工程

下載地址：https://download.csdn.net/download/u014361280/12564930

?

總結

以上是生活随笔為你收集整理的Unity 工具之 UniWebView 内嵌网页/浏览器到应用中，并且根据UGUI大小放置（简单适配UGUI）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。