UE与JS通信

---

一、JS调用UE

1.前端代码

  <script>
  //第一步：定义帮助函数 可直接复制
   "object"!=typeof ue||"object"!=typeof ue.interface?("object"!=typeof ue&&(ue={}),ue.interface={},ue.interface.broadcast=function(e,t){if("string"==typeof e){var o=[e,""];void 0!==t&&(o[1]=t);var n=encodeURIComponent(JSON.stringify(o));"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+n),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=n,document.location.hash=encodeURIComponent("[]"))}}):function(e){ue.interface={},ue.interface.broadcast=function(t,o){"string"==typeof t&&(void 0!==o?e.broadcast(t,JSON.stringify(o)):e.broadcast(t,""))}}(ue.interface),(ue4=ue.interface.broadcast);

    // js调用ue4， 参数1：函数名 参数2：json数据对象
    // 该调用可根据具体需求写在对应位置，此处为测试 
    ue4('JScallUE4', { name: 'xiaoli' });

  </script>

2.UE实现

新建控件蓝图，在变量处新建变量，类型为webinterferce

UE蓝图如图

二、UE调用JS

1.前端代码

代码如下（示例）：

<script>
  //第一步：定义帮助函数 可直接复制
   "object"!=typeof ue||"object"!=typeof ue.interface?("object"!=typeof ue&&(ue={}),ue.interface={},ue.interface.broadcast=function(e,t){if("string"==typeof e){var o=[e,""];void 0!==t&&(o[1]=t);var n=encodeURIComponent(JSON.stringify(o));"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+n),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=n,document.location.hash=encodeURIComponent("[]"))}}):function(e){ue.interface={},ue.interface.broadcast=function(t,o){"string"==typeof t&&(void 0!==o?e.broadcast(t,JSON.stringify(o)):e.broadcast(t,""))}}(ue.interface),(ue4=ue.interface.broadcast);

    // 定义UE可调用的函数UE4CallJS
    // 该调用可根据具体需求写在对应位置，此处为测试 
    ue.interface.UE4CallJS = function (Json) {
		document.getElementById('visual').style.display = "";
	};
	ue.interface.Invisible = function (Json) {
		document.getElementById('visual').style.display = "none";
	};

  </script>

2.UE实现

• 新建控件蓝图，名字为web，在画布面板添加WebInterface
  

• 新建HUD类，父类为InterfaceHUD

• 在HUD类新建变量，变量类型为web
  代码如下（示例）：