Unity 工具之 UniWebView 內嵌網頁/瀏覽器到應用中，並且根據UGUI大小放置（簡單適配UGUI）
目錄
Unity 工具之 UniWebView 內嵌網頁/瀏覽器到應用中，並且根據UGUI大小放置（簡單適配UGUI）
九、實現 通過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 initialization
void 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);
}
}
十一、參考工程
下載地址：
