UnityWebGl与Vue交互

前言

vue页面中使用iframe嵌套Unity页面实现消息互通，中间也遇到了一些问题，下面详细的总结一下

---

遇到的问题：

1. unity为了解决无法输入中文问题，使用了网上的解决方案，因为vue-unity-webgl会将unity的东西完全融入到vue，所以unity的操作也会导致vue页面出现异常，例如我的el-input无法正常输入
2. unity引入hls，为了解决视频播放问题，因为vue-unity-webgl不支持引入其他js，导致unity无法正常播放视频（我还傻呵呵的改了三方源码，打了补丁，现在血亏）
    

从根本上解决此问题，也为了避免不再背锅，想出了以下解决方案，这个方案比较简单非常有效

思路：

1. 在vue中依然使用iframe引入unity文件，原因：iframe是另外一个window，即使unity程序出现了使用了全局的方法来进行操作，也不行影响到vue程序
2. unity编辑后的index.html被iframe引入，然后再index.html中追加几行代码，进行unity的方法接受和vue传递，下面贴图说明

好处：

1. unity存在于iframe的独立window中，可以避开好多非常规操作引起的问题，并且此方法可以适用于任何前端和unity的交互场景，不要求一定是vue
2. 不用担心iframe层级无限高导致布局困难的问题，新版unity即使在iframe中引入，也是可以被定位元素覆盖住的

详细介绍

1. unity文件写法：
   1. 定义一个后缀名为 .jslib 文件，名字随意起，但是一定要放在Plugins文件夹，代码示例如下

      mergeInto(LibraryManager.library, {
      	SayHello: function (id) {
      		var strs = Pointer_stringify(id)
      		getFileInfo(strs)
      	},
      
      	ReportReady: function () {
      		window.ReportReady()
      	},
      })

      这里定义了一个sayHello和一个ReportReady，简单解释下：
      sayHello是unity自己测试用的方法；

      ReoprtReady是unity加载完成后，触发window对象下的ReportReaddy事件，这个事件明显不存在，是对于window对象的自定义方法；【RepoetReady这个方法需要在打包后的unity的文件夹下面有个index.html文件中添加，不然执行的时候会报错】ReoprtReady为undefined

2. 新建一个测试文件，创建一个物体名为JsTalker                    此文件的写法相信unity小伙伴都知道意思，不过多赘述，简要描述下就是，此物体引用过来第一步写的2个方法（SayHello、RepoetReady），暴露出去一个方法（SetToken），这个暴露出来的方法就是前端需要调用的

3.  修改unity打包后的index.html文件

4. vue页面代码如下unity打包后的文件放在vue项目中的public文件夹下面。iframe引入的路径要注意：

 双向交互完成。

总结：
window.ReportReady 是自定义事件，是由unity挂载到window的

发送事件的话就是通过send，通过contentWindow来调用iframe中（unity打包后的index.html）的方法

---