如何让Unity打包的WebGL与Js进行通信

使用Unity发布WebGL项目免不了要与Js进行通信，所以整理下相关知识。

官方文档地址

一 Unity调用Js方法

1.弃用的方法
（1）在发布的WebGL项目的index.html添加Exit函数：

function Exit() { alert("UnityToWeb") }

（2）如果想在Unity中调用方法，添加代码：

Application.ExternalCall("Exit");//调用Js的Exit方法

2.新方法
(1) 新建文件夹Plugins
(2) 文件夹新建.jslib文件，这里创建__Internal.jslib文件
添加代码

mergeInto(LibraryManager.library, {

  Hello: function (obj) {
    window.alert("Hello, world!");
	Exit();//调用Js方法
  },
});

（3）c#文件

using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using UnityEngine;

public class UnityToWeb : MonoBehaviour
{
    [DllImport("__Internal")]
    private static extern void Hello();
    
    public void CallJs()
    {
        // Unity call web
        Hello();
    }

}

（5）在发布的WebGL项目的index.html添加Exit函数：

function Exit() { alert("UnityToWeb") }

二 Js调用Unity方法

1.在场景中新建一个Cube，然后在新建脚本WebToUnity，挂载到Cube身上

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class WebWithUnity : MonoBehaviour
{
    public Text text;

    // Start is called before the first frame update
    void Start()
    {
        text.text = "Cobe当前位置:\nx:" + transform.position.x + " y:"+transform.position.y + " z:"+transform.position.z;
    }


    public void JsToUnity(string str)
    {      
        transform.position = new Vector3(transform.position.x + 1,transform.position.y);
        text.text = "Cobe当前位置:\nx:" + transform.position.x + " y:" + transform.position.y + " z:" + transform.position.z;
    }

}

做一个这样的UI

给Text赋值，给按钮添加上点击事件触发CallJs()

2.这里，我们要在Js中调用JsToUnity这个函数，将项目打包后，修改index.html文件。

在index.html的script中修改如下

unityInstance.SendMessage(objectName, methodName, value);

objectName是场景中对象的名称，比如Cube

methodName:是脚本中当前附加到该对象的方法的名称

value:给方法里的参数传值，可以是字符串，数字或为空

var instance;
      script.onload = () => {
        createUnityInstance(canvas, config, (progress) => {
          progressBarFull.style.width = 100 * progress + "%";
        }).then((unityInstance) => {
          loadingBar.style.display = "none";
          fullscreenButton.onclick = () => {
            unityInstance.SetFullscreen(1);
          };
		  instance = unityInstance;
        }).catch((message) => {
          alert(message);
        });
      };
      document.body.appendChild(script);
	  
        function Exit() { alert("UnityToWeb") }//Exit方法
		function TestSend() { instance.SendMessage("Cube", "JsToUnity","string"); }