UE4与WEB-UI通信

前端HTML代码

html 复制代码
	<!DOCTYPE html>
	<html>
	<head>
	    <meta charset="utf-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <title>test web ui</title>
	    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
	    <script type="text/javascript">
	        // WEB UI ~~ UE
	        "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),(window.ue4=ue.interface.broadcast);window.ue=ue;
	    </script>
	</head>
	<body>
	    <h1>测试WebUI与UE交互</h1>
	    <button id="btn">调用UE</button>
	
	    <script type="text/javascript">
	        // UE调用方法定义
	        ue.interface.ue2js = function(ueData){
	            alert(ueData)
	        }
	
	        $(function(){
	            $('#btn').on('click',function(){
	                // 调用UE方法
	                ue4('js2ue',{"name":"js to ue"})
	            })
	        })
	    </script>
	</body>
	</html>

UE4蓝图代码

点击页面的《调用UE》按钮后,UE的界面上会打印"js to ue",同样,在UE侧点击按钮后,页面上会弹出含有「 {"name":"jason"} 」的弹窗。

相关推荐
人工智能训练师1 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny071 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy2 小时前
css的基本知识
前端·css
昔人'2 小时前
css `lh`单位
前端·css
Nan_Shu_6144 小时前
Web前端面试题(2)
前端
知识分享小能手4 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队5 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光5 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5206 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20506 小时前
LeaferJS好用的 Canvas 引擎
前端·开源