插件下载

该插件在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了依旧没有改。。。

使用本地html网页

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

在这里插入图片描述
将需要使用的html放入其中即可
在这里插入图片描述
回到unity中,将刚才在输入的百度url改为,localGame://mychart.html
在这里插入图片描述
点击运行后可以发现我们自定义的html文件就显示了出来。

unity和html的交互

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

html调用unity方法

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ECharts</title>
		<!-- 引入 echarts.js -->
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}

			.title {
				margin: 0;
				text-align: center;
				color: aqua;
				background-color: #162256;
				padding: 10px 0;
				height: 60px;
			}

			.main {
				display: flex;
				/* height: 600px; */
				height: calc(100vh - 60px);
			}

			.main>div {
				/* background-color: ; */
				/* opacity: .3; */
			}

			.left,
			.right {
				width: 15%;
				background-color: #00f798;
			}

			.middle {
				width: 60%;
				margin: 0 auto;
				/* background-color: antiquewhite; */
			}
		</style>
	</head>
	<body>
		<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
		<div id="index">
			<h1 class="title">数字孪生世界</h1>
			<div class="main">
				<div class="left">
					<button type="button" onclick="test()">15栋教学楼</button>
				</div>
				<div class="middle">
					<div id="main" style="width: 400px;height:300px;"></div>
				</div>
				<div class="right"></div>
			</div>
		</div>
		<script src="echarts.min.js"></script>
		<script type="text/javascript">
			function test() {
				var a = 21
				// test1("15");
				testAgain("传过来的参数")
				return a
			}
			function testAgain() {
				
			}
			function checkUi(item) {
				console.log("js接受到参数",item);
			}
		</script>
	</body>
</html>

在我们的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<Browser>();
        }

        // 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.
在这里插入图片描述

unity向js传参

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

使用vue开发

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐