IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    [原]Unity中内嵌网页插件 UniWebView 2.8使用

    u010019717发表于 2016-10-22 11:00:13
    love 0

    2016.10.22   孙广东  

    http://blog.csdn.net/u010019717

                   

                      UniWebView2:适用于Andriod、ios和Mac os,在移动端效果最好。支持WP8,不支持windows桌面系统,包括编辑器状态。  Unity4.x版本是 UniWebView

    Unity AssetStore 上的插件: https://www.assetstore.unity3d.com/en/#!/content/32461        

                 在Unity中主要用于活动,就想《阴阳师》  手游!



     


    开发有些不方便,因为不支持window下的 Editor的调试!,  只能在Mac下!

     

    使用的主要思路

         插件的 官网 ;   http://uniwebview.onevcat.com/

    下载插件然后安装导入 Unity
     

    使用 Prefab 和设置 URL .

            从 UniWebView/Prefab 文件夹下 拖拽 UniWebViewObject  预制体,在Inspector 上设置 URL(在Windows上也设置不了), Mac 上Play就可以看到效果, 但是在Window上要打包成移动包才行。

             

     

    UniWebView的工作方式

     

              在Mac 系统下可以设置 UniWebView组件上的:  Insets 能控制 web 视图的大小。Start函数中加载(Load On Start )和加载完成时自动显示(Auto Show WhenLoad Complete )。

     

     

               除了显示 web 页面的基本用法,UniWebView 有一些其他重要的功能、 与Unity场景通信, 侦听 web 页event事件和计算一些 javascript。

             请参阅详细的在线手册 http://uniwebview.onevcat.com/manual

             和脚本引用 http://uniwebview.onevcat.com/reference/class_uni_web_view.html 。

     

     

    通过脚本设置  UniWebView  加载Web 内容并显示:

           假设, 你在 UniWebView.cs  脚本的所在对象上有一个脚本,  其中定义了字段:

    private UniWebView _webView;


        你可以通过这样的方式 得到 引用:

    var _webView = gameObject.GetComponent<UniWebView>();


           // 监听事件

    _webView.OnLoadComplete += OnLoadComplete;
    _webView.OnReceivedMessage += OnReceivedMessage;
    _webView.OnEvalJavaScriptFinished +=OnEvalJavaScriptFinished;


                然后  设置 Web 页面的大小  和你 想要加载页面的Url :

     

    _webView.insets = newUniWebViewEdgeInsets(5,5,5,5);    // 距离全屏差5个像素
    _webView.url = "http://uniwebview.onevcat.com/demo/index.html";


     

                 设置完成后,收到调用加载 页面 :

    _webView.Load();


     

               页面加载成功或者失败的  完成回调函数大致如下:

    voidOnLoadComplete(UniWebView webView, bool success, string errorMessage) {
     if (success) {
        //  显示 加载完成的界面
       webView.Show();
      } else {
        //   输出 错误码
       Debug.LogError("Something wrong in webview loading: " + errorMessage);
      }
    }


     

    如果 不想监听(其实是不处理失败检测)和自己处理这个 OnLoadComplete  事件,可以 设置属性:        你好像也可以 先调用 Show()  函数,然后在调用 Load(), 函数。

             autoShowWhenLoadComplete  =  true;


    Web页面和  Unity游戏逻辑的通信

    一、UniWebView发送消息给 Unity

              这个建议使用 url  方案。UniWebView 将监听 以  uniwebview:// 开始 的 url

    如果玩家在 Web 页面点击了 Url 链接, UniWebView 将会解析为一个 UniWebViewMessage  对象  ,然后引发 OnReceivedMessage 事件。   一个 UniWebViewMessage 对象包含 一个路径字符串(其中有url 和args 参数字典)。

               例如当点击了链接 :  uniwebview://move?direction=up&distance=1

      将被解析为:

    path = "move"
    args = {
        direction ="up",
        distance ="1"
    }


     

    你在 监听了 OnReceivedMessage 事件 的回调中, 会得到 UniWebViewMessage对象,然后实现自己的逻辑:          (自己注:  在游戏中我们通常点击了活动的每个标签或者 Button,可能是页面切换,可能是Button的网络请求,  都可以以这种方式来弄!  如果是C#写逻辑,那不就没有了一些热更新的优势了???)

    voidOnReceivedMessage(UniWebView webView, UniWebViewMessage message) {
      Debug.Log(message.rawMessage);
       if (string.Equals(message.path,"move")) {
          // It is time to move!
          // In this example:
          // message.args["direction"] ="up"
          // message.args["distance"] ="1"
       }
    }


     

    关于更多的  url 方法可以看:  AddUrlScheme 这个API 函数

    http://uniwebview.onevcat.com/reference/class_uni_web_view.html#a785e560917f32efe65d91874c632f7d5

     

     

    二、Unity发送消息到 UniWebView

           你可以运行任何的 javescript 页面,  通过使用 EvaluatingJavaScript 你能调用并运行Javascript,  这个JavaScript代码可以是你游戏脚本中的字符串形式。  你能监听 OnEvalJavaScriptFinished  事件, 来处理这个结果。

     

     

    其他功能:

    http://uniwebview.onevcat.com/manual

     

    X      背景透明-在 iOS 中,默认情况下web 视图还有一个灰色的背景 。你可以使用 SetTransparentBackground 来设置为 背景透明。

     

    X      加载进度框 -  就是表示加载进度,以改善体验。您可以禁用 和 通过SetShowSpinnerWhenLoading 和SetSpinnerLabelText 自定义标签文本。

     

    X      Back 按键 和导航工具栏按钮支持-用户可以使用后退按钮在 web 页面之间导航,Android 设备上像在本机浏览器中一样。Ios 是一个带有导航按钮的默认工具栏。

     

    X      向前 和 向后 ,浏览器的两个行为,您可以在你的游戏中控制网页导航,通过 GoBack 和GoForward 方法。

     

    X         清理缓存-web 视图将保持 url 请求,默认情况下,这可能会使旧的页面显示。

    即使您更新您的 web 页。使用 CleanCache 来解决这一问题。

     

    X       在web 视图  播放 youtube 视频 -只需加载url,它就如此简单的播放。

     

    X       加载本地文件 和 html 字符串-  给定设置 本地文件的 url,或 调用 LoadHTMLString 具有 html字符串的值,您可以加载本地的内容。

     

    X        更多使用- 你不能只用它来加载 html 和web 页,而且还显示一些图像。

     

    X 不止一个 web 视图-  如果您希望在你的游戏中显示 多个 web 视图,那就是 有多个 挂有UniWebView 组件的GameObject 而已。。

     

     

     

    设置  AndroidManifest.xml   

                    因为 Unity垮平台, 肯定会使用第三方或者自己扩展的android 插件, 就需要维护同一个 AndroidManifest.xml  文件,  需要合并每个插件的需求 (解决冲突)。

            

    http://uniwebview.onevcat.com/manual.html#merge_instruction

     

     

                  在导入这个插件之前, 如果在您的项目中已经有一个AndroidManifest.xml 文件,你不应该从 UniWebView 包导入 AndroidManifest.xml 文件了(如果没有就直接全部导入就行了)。  而是您需要手动更新该文件。   其实是相当简单,只需不到2 分钟 。

     

                 你可以遵循这些步骤,使其正常工作︰

    1.    在项目中的 Assets/Plugins/Android   路径下 ,使用文本编辑器打开  AndroidManifest.xml  文件。

     

    2.       文件中 搜索  android.intent.action.MAIN(肯定有且只有一个)       然后按照下面的步骤操作:

     

    Merge(合并)

    (1)   上面步骤二的搜索结果位于<activity>与</activity> 标记对之间。  然后插入下面两行数据:

     
    <meta-dataandroid:name="android.app.lib_name" android:value="unity"/>
    <meta-dataandroid:name="unityplayer.ForwardNativeEventsToDalvik"android:value="true" />

     

    (2)  同样的在<activity...> 标记中,将 android: name 的值更改为"com.onevcat.uniwebview.AndroidPlugin"。这将使用 UniWebView 的activity 来启动你的游戏。这样做,这样我们可以避免 web 视图在 安卓系统的一些问题(类似的问题网上也是有人 提到过:

                  “在安卓平台使用最大的问题是Unity失去焦点的问题。经过使用OnApplicationFocus方法测试,调用平台WebView打开界面时默认打开另一个Activity,Unity本身为一个Activity,当打开另外一个Activity时Unity会失去焦点,此时焦点不在Unity程序身上,如果锁屏或者按Home键再打开后只会调出最后一个显示的Activity,也就是UniWebView打开的网页,而不是Unity程序。也就是在打开网页的界面按下Home键或者锁屏后程序将无法正常返回。主要的问题在于Unity程序和打开的网页属于不同的Activity,解决的方法为更改Unity工程中的安卓配置文件,使一个Activity继承于另一个,显示在同一个Activity上。”)。                    如果你的mainactivity  使用的不是 com.unity3d.player.UnityPlayerNativeActivity、 com.unity3d.player.UnityPlayerActivity或com.unity3d.player.UnityPlayerProxyActivity 其中之一的话,您必须修改UniWebView源代码 修改到你的activity名字上。  请参阅重新编译的指南 http://uniwebview.onevcat.com/manual#manual-recompile ,更多地了解它。


    (3) 同样的在 <activity...> 标记中,添加 android: hardwareAccelerated ="true"和android:windowSoftInputMode="adjustResize" 。这将使安卓系统提供 html5功能。


    最总   会变成这样的格式:

    <activityandroid:name="com.onevcat.uniwebview.AndroidPlugin"
      android:label="@string/app_name"
       android:hardwareAccelerated="true"
       android:windowSoftInputMode="adjustResize"
       android:configChanges="fontScale|keyboard|keyboardHidden|locale|mnc|mcc|navigation|orientation|screenLayout|screenSize|smallestScreenSize|uiMode|touchscreen">
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER"/>
       </intent-filter>
       <meta-data android:name="android.app.lib_name"android:value="unity" />
       <meta-dataandroid:name="unityplayer.ForwardNativeEventsToDalvik"android:value="true" />
    </activity>


     

    (4) 最后,添加访问互联网的权限, 如果有了就不用添加了。 在</manifest> 标记  之前 添加:

     

    <uses-permissionandroid:name="android.permission.INTERNET" />


     http://blog.csdn.net/u010019717

     

    插件Demo的一些 在安卓手机上的截图:



     





沪ICP备19023445号-2号
友情链接