• • 插件下载
  • 基本操作
  • • 导入
    • 使用公网网址
    • 使用本地html网页
    • unity和html的交互
    • • html调用unity方法
      • unity向js传参
    • 使用vue开发
    • 注意事项
    • 写在最后

该插件在unity商店里面有，售价75$，着实有点贵，我在淘宝上面买了一份，一块钱，刚刚好，各位需要可以去淘宝直接搜索，一块钱也不是啥事，如果想白嫖，这里也给出我的百度网盘分享，是最新版3.1.0，需要的朋友自取即可。
链接：Embedded Browser3.1.0
提取码：i2mb

下载后会得到一个后缀为.unitypackage的文件，这个就是unity的包。现在我们只需要点开unity，然后右键Assets,选择import package即可打开文件，在文件中选择这个包就可以导入了。

等待稍后加载文件，点击import即可成功导入。

这个时候我们就可以开始初步使用了，这里以导入百度搜索为基础，介绍使用流程。
在新建的场景中的canvas里面建立一个raw image控件。

在该控件中点击Add Component添加插件，输入browser,可以看到，系统已经自动找到了我们导入的插件。

选择GUI Beowser UI后，系统会自动添加两个compoent

其中Browser里面的URl就是我们放网页地址的地方，填入百度搜索的地址。运行unity，可以看到百度已经加载出来了，输入搜索也是可以的。

这里如果不能点击的同学，可以再添加一个compoents

GUI Browser是即将被淘汰的组件，建议使用pointer UI GUI，但是实际上这个插件再2.0版本就这么说，到3.1了依旧没有改。。。

如果是要使用网页替代unity UI 那么插入本地网页必不可少，请看详细操作方法：
在unity跟目录下建立BrowserAssets文件夹。注意，名字必须完全一致，如果不一致会导致插件找不到文件

将需要使用的html放入其中即可

回到unity中，将刚才在输入的百度url改为，localGame://mychart.html

点击运行后可以发现我们自定义的html文件就显示了出来。

在这个插件里面提供了html和unity互相调用传参的方法。基本操作如下：

html调用unity的方法，只需要js调用一个方法，然后在c#里面监听同名函数即可。具体代码如下
html

	
		
		
		
		
	
	
		
		

			
数字孪生世界
			

				

					15栋教学楼
				
				

					

				
				

			
		
		
		
	

在我们的raw Image组件上挂载一个脚本用来监听js发过来的函数操作。代码如下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using ZenFulcrum.EmbeddedBrowser;

namespace Mannager
{

    public class test : MonoBehaviour
    {
        Browser browser;
        public UiMannager uiMannager;

        void Start()
        {
            this.InitData();
            //uiMannager = UiMannager.GetInstance();

        }
        private void Awake()
        {
            //获取插件Browser组件（Unity方使用插件基础一步）
            browser = gameObject.GetComponent();
        }

        // Update is called once per frame
        void Update()
        {
            if (Input.GetKey(KeyCode.H))
            {
                browser.CallFunction("checkUi", "lampPanel").Done();
                //uiMannager.CallFunction("lampPanel");
            }
        }
        public void InitData()
        {

            browser.RegisterFunction("testAgain", (JSONNode jk) =>
            {
                Debug.Log(jk[0].Value);
            });
        }
    }

}

获取到browser组件后，调用其api RegisterFunction监听 testAgain函数，注册回调，jk[0].value对应的是第一个参数，点击后unity打印出了该参数，成功完成html调用unity.

同上代码，在update生命周期里面，监听的h按键的点击，调用CallFunction方法，向html同名方法传参，按下键盘h键，可以看到js打印输出。

使用vue开发的网页打包后和正常html没有太大的区别，唯一需要注意的是，交互的时候，js需要暴露在全局的函数才会被找到（我理解的是这样，没有验证过），所以需要使用vue的话，就要在mounted生命周期里面把函数设置为window的属性，比如这样。

其他的流程和上面并没有什么区别，更细节的东西我没有用到就没有研究过，大家可以自行学习。

1. 这个插件的文档不好找，百度不出来，可以去unity商店找到这个插件，介绍里面有它的文档，需要翻墙（这个站点不太稳定，翻墙也不一定就能进去，多进几次吧）
2. 如果有需要播放视频的操作，该插件使用的开源谷歌内核，而h264需要高额的专利费，作者负担不起，所以不支持，简单的来说就是不支持mp4格式的视频，能播放.webm的文件，需要的同学可以下个格式工厂转换一下
3. 直接百度这个插件的教程，很多人写的都是很老的版本了，基本上用的都是2.0版本，2.0版本是不支持video标签的，只能用flash播放，我写这个就是最近几天到处找方案把我坑惨了，希望能帮到后来者
4. 不知道为什么，使用vue开发的单文件，在进行了组件切换后返回来，页面高度就会缩小一半，我目前还没发现是为什么。
5. 如果是使用2.0的同学打包后会发现网页加载不出来，需要进入根目录data文件下，把Plugins文件夹下的x86_64里面的所有文件移动到Plugins里面，这是2.0的bug，目前3.1已经修复，如有加载不出来的也可以看看这个文件夹（死马当活马医嘛）

以上就是我最近几天的使用总结，我也是刚使用unity开发，还有很多的问题，本文因为最近查资料发现大家都写的不完整，遇到了许多坑，总结一下也帮助一下后来者。文章如果有什么技术上的问题和纰漏，欢迎指正。我也还有许多问题没有解决，比如上面说到了切换页面后页面高度缩小的问题，或者生产环境下打开调试的操作，有知道的同学也欢迎指教，感激不尽。