Unity在WebGL与js交互

一、Unity调用js方法

1、新建txt文件，编辑后，修改后缀为. jslib，并放在Assets/Plugins目录下，文件名随便取

mergeInto(LibraryManager.library, {
  //这个方法名必须和c#中的相同
  OpenNewWindow:function(str) 
  {
      OpenNewWindow(Pointer_stringify(str)); 
  },
  
  //关闭新窗口
  CloseNewWindow:function()
  {
      CloseNewWindow();
  },
});

image.png

2、在Unity中绘制2个按钮，用于调用js方法，并添加一个脚本

image.png

3、在该脚本中，添加Unity调用js方法

using System.Runtime.InteropServices;
using UnityEngine;
using UnityEngine.UI;

public class UnityToJsFunc : MonoBehaviour
{
    public Text text;

    [DllImport("__Internal")] //internal前是两个下划线  这一步的作用是动态调用dll
    private static extern void OpenNewWindow(string str); //方法的名字要和上一步的jslib中的方法名一致，用起来和普通方法完全一致

    [DllImport("__Internal")]
    private static extern void CloseNewWindow();

    //js调用c#方法
    public void Open()
    {
        //有参数
        OpenNewWindow("OpenNewWindow");
    }

    //js调用c#方法
    public void Close()
    {
        //无参数
        CloseNewWindow();
    }

    //js调用c#方法
    public void JsToUnity(string str) {
        text.text = str;
    }
}

4、打包webgl
打包后如有打开有报错，可查看
Unity Mac上打开WebGL本地文件
5、修改打包后的index.html文件
先添加一个div标签

image.png
在添加2个方法 image.png
相关代码如下：

 <div id="mywindow" style="display:none;width:100px;height:200px;top: 50%;right:30%;transform: translate(-50%,-50%);position:absolute;border: 0; margin: 0; padding: 0">    
      <iframe id="iframe" src="" style="width: 100%;height: 100%;"></iframe>   
      </div>

      function OpenNewWindow(str) {
        console.log(str);
        var otherDiv = document.getElementById('mywindow');
        otherDiv.style.display = "block";
        document.getElementById("iframe").src =str;
      }    

      function CloseNewWindow() {
        console.log(CloseNewWindow);
        var otherDiv = document.getElementById('mywindow');
        otherDiv.style.display = "none";
        document.getElementById("iframe").src =""
      }   

具体效果如下： 222.gif

二、js调用Unity方法

1、在Unity中添加一个button，js将调用方法，为button赋值

image.png
2、在导出的index.html文件中添加发送消息代码，特别需要注意三个参数：
第一个参数是场景中的对象名称；第二个参数是当前附加到该对象的脚本中的方法名称；第三个参数 可以是字符串、数字，也可为空。
例如：

unityInstance.SendMessage('MyGameObject', 'MyFunction');
unityInstance.SendMessage('MyGameObject', 'MyFunction', 5);

unityInstance.SendMessage('MyGameObject', 'MyFunction', 'MyString');

image.png

本demo中调用如下

unityInstance.SendMessage('Canvas','JsToUnity','str');

3、在Unity脚本中添加执行方法

image.png

也可查看官网文档