背景
最近刚换了工作，新公司不是做手游的，一开始有点抵触，总觉得不是做游戏自己就是跨行了，认为自己不对口，但是慢慢发现在这可以学的东西面很广，所以感觉又到了打怪升级的时候了，老子就在这进阶了。
一进公司他们使用H5开发，做一款地形信息系统的软件，基于Unity开发，但是所有页面都是Js写的，所以我第一件事要做的是实现Unity嵌入网页，并实现交互。
在这里，领导说之前做过类似的即用的Embedded Browser2.1.0这个插件，让我研究下做个简单Demo。
实现方案
使用插件Embedded Browser2.1.0实现unity与网页交互
具体步骤
1.Unity中导入插件
2.新建Canvas，在Canvas下创建一GameObject，平铺在Canvas上
3.将网页映射到GameObject上
这一步需要给创建的BrowserGUI挂载插件脚本
首先是Brower脚本，此脚本是设置嵌入网页的URL以及一些幕布大小等参数，在这里说下，有两种嵌入方式
，1.可以直接嵌入浏览器网页2.可以将html文件放入与Assets文件夹同级的BrowserAssets（必须一致，必须是这个文件夹，因为若放Assets下面，会自动默认为代码为UnityScript而不是JavaScript），加载嵌入，这种方式相对快一些。
再一个就是挂载GUI Brower UI脚本，这脚本是构建UI的一个作用，请求的网页会显示出来是因为这个脚本，并且会自动添加上Raw Image组件
Unity通过插件与网页的交互
1.Unity接收网页操作做出响应
C#监听代码：
js代码：
Tips：Unity接收网页推送事件RegisterFunction(“MethodName”,CallBack);
即：网页进行一系列操作，unity中监听到并响应执行事件
2.Unity做出相应操作通知网页并更新网页显示
案例：此为unity方5秒倒计时，每轮计时结束时间重置，目标数+=3；通知网页端并显示的Demo
c# 代码：
Js代码：
Tips：网页监听Unity操作：browser.CallFunction("MethodName",params).Down();
即：unity进行一系列操作，unity通知网页自身变化并调用网页更新函数
完整代码
场景1：网页点击按钮，Unity接收参数：
c#：
1 using System.Collections; 2 using System.Collections.Generic; 3 using UnityEngine; 4 using UnityEngine.UI; 5 using ZenFulcrum.EmbeddedBrowser; 6 using UnityEngine.SceneManagement; 7 /// <summary> 8 /// Unity使用插件控制脚本 9 /// </summary> 10 public class DemoTexMgr : MonoBehaviour 11 { 12 /// <summary> 13 /// 插件组件 14 /// </summary> 15 Browser browser; 16 /// <summary> 17 /// 监听H5操作作出响应物体 18 /// </summary> 19 public Transform targetScle; 20 21 /// <summary> 22 /// 嵌入网页地址 23 /// </summary> 24 string URL = "file:///C:/Users/lenovo/Desktop/工作/自测需要/测试Js脚本/TextTool.html"; 25 /// <summary> 26 /// 目标位置（显示同步到H5） 27 /// </summary> 28 private Vector3 targetPos; 29 public Vector3 TargetPos { get; set; } 30 31 32 private void Awake() 33 { 34 //获取插件Browser组件（Unity方使用插件基础一步） 35 browser = transform.Find("BrowserGUI").GetComponent<Browser>(); 36 } 37 void Start() 38 { 39 InitData(); 40 } 41 public void Update() 42 { 43 44 } 45 /// <summary> 46 /// 初始化函数（初始化嵌入页面） 47 /// </summary> 48 public void InitData() 49 { 50 //设置嵌入页面网址 51 browser.Url = URL; 52 //插件前往函数 53 browser.GoForward(); 54 //browser.gameObject.GetComponent<RawImage>().raycastTarget = false; 55 56 //改变背景深度（透明度） 57 browser.gameObject.GetComponent<RawImage>().color = new Color(browser.gameObject.GetComponent<RawImage>().color.r, browser.gameObject.GetComponent<RawImage>().color.b, browser.gameObject.GetComponent<RawImage>().color.g, 20); 58 59 //插件中监听函数，监听H5操作（点击缩小按钮，Unity做出缩小响应） 60 browser.RegisterFunction("displayDate", (JSONNode jk) => 61 { 62 Debug.Log("yuanjun Unity Get H5 参数" + jk[0].AsJSON + " 参数 " + jk[1].AsJSON + " " + jk[0].Value); 63 targetScle.transform.localScale = new Vector3(0.8f, 0.8f, 0.8f); 64 }); 65 browser.RegisterFunction("GetUniMethodty", (JSONNode jk) => 66 { 67 targetScle.transform.localScale = new Vector3(float.Parse(jk[0].AsJSON), 0.8f, 0.8f); 68 Debug.Log("yuanjun Unity Get H5 GetUniMethodty 参数1" + jk[0].AsJSON); 69 }); 70 71 } 96 //退出按钮 97 public void OnClickQuitBtn() 98 { 99 Application.Quit(); 100 } 101 public void ChangeBtn() 102 { 103 SceneManager.LoadScene(1); 104 } 105 }
js脚本：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>类似于Jquery的JS下拉菜单</title>
6 <style type="text/css">
7 * { margin: 0; padding: 0; font-style: normal; font-family: 宋体; }
8 body { text-align: center; font-size: 12px; background:url(1.jpg) center center; }
9 #content { margin: 0 auto; width: 600px; }
10 #content #nav { height: 32px; margin-top: 60px; background-color: #464749;FILTER: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; }
11 #content #nav ul { list-style: none; }
12 #content #nav ul li { float: left; width: 100px; line-height: 32px; position: relative; }
13 #nav div { width: 100px;FILTER: alpha(opacity=80); opacity: 0.8; -moz-opacity: 0.8; position:absolute; left:0px; top:32px; z-index:1; padding-bottom: 0px; float: left; height: 0; overflow: hidden; background-color: #fff;color:#000; }
14 #content #nav li .a { text-decoration: none; color: #FFFFFF; line-height: 32px; display: block; border-right-width: 1px; border-right-style: solid; border-right-color: #393A3C; }
15 #nav div a { text-decoration: none; color: #000; line-height: 26px; display: block; z-index:100; }
16 #nav div a:hover { background-color: #ccc; }
17 </style>
18 </head>
19 <body>
20 <div >
21 <div >
22 <ul >
23 <li><a href="#" class="a">物体变大</a>
24 <div>
25 <button onclick="GetUniMethodty(5)">变大</button>
26 </div>
27 </li>
28 <li><a href="#" class="a">物体旋转</a>
29 <div>
30 <a href="#">物体旋转</a>
31 </div>
32 </li>
33 <li><a href="#" class="a">物体缩小</a>
34 <div>
35 <button onclick="displayDate(1,2)">缩小</button>
36 </div>
37 </li>
38 <li><a href="#" class="a">导航菜单</a>
39 <div>
40 <a href="#">导航菜单</a>
41 </div>
42 </li>
43 <li><a href="#" class="a">导航菜单</a>
44 <div>
45 <a href="#">导航菜单</a>
46 </div>
47 </li>
48 <li><a href="#" class="a">导航菜单</a>
49 <div>
50 <a href="#">导航菜单</a>
51 </div>
52 </li>
53 </ul>
54 </div>
55 </div>
56 <script type="text/javascript">
57 var supnav = document.getElementById("supnav");
58 var nav = document.getElementById("nav");
59 var btns = document.getElementsByTagName("li");
60 var subnavs = nav.getElementsByTagName("div");
61 var paddingbottom = 20;
62 var defaultHeight = 0;
63 function drop(obj, ivalue) {
64 var a = obj.offsetHeight;
65 var speed = (ivalue - obj.offsetHeight) / 8;
66 a += Math.floor(speed);
67 obj.style.height = a + "px";
68 }
69 window.onload = function() {
70 for (var i = 0; i < btns.length; i++) {
71 btns[i].index = i;
72 btns[i].onmouseover = function() {
73 var osubnav = subnavs[this.index];
74 var sublinks = osubnav.getElementsByTagName("a");
75 if (osubnav.firstChild.tagName == undefined) {
76 var itarheight = parseInt(osubnav.childNodes[1].offsetHeight) * sublinks.length + paddingbottom;
77 } else {
78 var itarheight = parseInt(osubnav.firstChild.offsetHeight) * sublinks.length + paddingbottom;
79 }
80 clearInterval(this.itimer);
81 this.itimer = setInterval(function() {
82 drop(osubnav, itarheight);
83 },
84 30);
85 }
86 btns[i].onmouseout = function() {
87 var osubnav = subnavs[this.index];
88 clearInterval(this.itimer);
89 this.itimer = setInterval(function() {
90 drop(osubnav, defaultHeight);
91 },
92 30);
93 }
94 }
95 }
96 </script>
97
98
99 <script>
100 function displayDate(a,b){
101 alert("DisPlayData " +a );
102 return a+b;
103 }
104 </script>
105
106 <script>
107 function GetUniMethodty(s){
108 alert("Data Come " +s);
109 return s;
110 }
111 </script>
112
113
114 <script>
115 function myFunction(){
116 alert("Welcome " + "Harry Potter ");
117 }
118 </script>
119
120 </body>
121 </html>