Unity pc端内嵌网页插件Embedded Browser基本使用流程（转载）

作者：Gausst松鼠会 | 2024-02-15 09:46:16

踩

embedded browser

基本操作

导入

下载后会得到一个后缀为.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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

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

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

获取到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的属性，比如这样。
在这里插入图片描述
其他的流程和上面并没有什么区别，更细节的东西我没有用到就没有研究过，大家可以自行学习。

注意事项

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

写在最后

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

原文链接：https://blog.csdn.net/sc909090/article/details/117561395

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/83330