?

?

Unity 工具之 UniWebView 內(nèi)嵌網(wǎng)頁/瀏覽器到應(yīng)用中，并且根據(jù)UGUI大小放置（簡單適配UGUI）

?

目錄

Unity 工具之 UniWebView 內(nèi)嵌網(wǎng)頁/瀏覽器到應(yīng)用中，并且根據(jù)UGUI大小放置（簡單適配UGUI）

一、簡單介紹

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

三、一些關(guān)鍵接口介紹

四、Transition

五、Memory Management（內(nèi)存管理）

六、Messaging System

七、注意實現(xiàn)

八、效果預(yù)覽

九、實現(xiàn) 通過UGUI控制 WebView 大小的使用的具體步驟

十、關(guān)鍵代碼

十一、參考工程

---

?

一、簡單介紹

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

本節(jié)介紹，使用 UniWebView 內(nèi)嵌網(wǎng)頁/瀏覽器到應(yīng)用中，并通過 UGUI 控制 Web View 大小顯示的方法。方法不唯一，這里僅供參考。

?

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

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

功能：

• ??? 網(wǎng)絡(luò)瀏覽

• ??? 載入本地 HTML 文件

• ??? JavaScript 完整支持

• ??? 基于 url scheme 的消息系統(tǒng)

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

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

• ??? 獲取照片和上傳

?

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

?

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

1、Url On Start

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

2、Show On Start

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

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

3、Full Screan

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

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

Reference Rect Transform 設(shè)置為None

5、Reference Rect Transform

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

6、Use Toolbar

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

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

?

三、一些關(guān)鍵接口介紹

1、OnPageFinished 當(dāng)url加載完畢后調(diào)用

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

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

2、OnShouldClose

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

tips：

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

3、EvaluateJavaScript? 調(diào)用 JavaScript 方法

第一個參數(shù)：JavaScript 的方法

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

4、OnMessageReceived

html里需要有

?

四、Transition

1、顯示/隱藏過渡

通過修改Show 和 Hide的參數(shù)

fade 淡入淡出效果

edge 出現(xiàn)/消失的方向 eg：UniWebViewTransitionEdge.Bottom 從底部出現(xiàn)

duration 持續(xù)時間

completionHandler：完成后回調(diào)

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

2、Web View Animation

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

?

五、Memory Management（內(nèi)存管理）

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

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

3、將一個監(jiān)聽器添加到OnShouldClose事件中，在關(guān)閉用戶操作的web view時，Android和iOS將調(diào)用該事件。

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

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

5、在不使用時清理緩存

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

?

六、Messaging System

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

UniWebView消息傳遞系統(tǒng)還可以幫助您解析輸入

?

2、添加你自己的scheme

?

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

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

?

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

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

?

七、注意實現(xiàn)

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

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

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

?

八、效果預(yù)覽

?

九、實現(xiàn) 通過UGUI控制 WebView 大小的使用的具體步驟

1、打開Unity，導(dǎo)入 UniWebView 插件

?

2、在場景中搭建 UI

?

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

?

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

?

5、打包，到設(shè)備上運行，效果如下

?

十、關(guān)鍵代碼

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

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。