Vue框架中页面和UE4交互的方法

文章目录一、UE4是什么？二、Vue框架和UE4交互的方法1.在首页入口文件index.html中引入2.页面向UE4传参3.页面接收UE4传的数据提示：以下是本篇文章正文内容，下面案例可供参考一、UE4是什么？UE4 的全名是 Unreal Engine 4，中文译为“虚幻引擎4”。UE4 是一款由 Epic Games 公司开发的开源、商业收费、学习免费的游戏引擎。UE4 采用了目前最新的即时

文章共1,245字 · 阅读需要大约5分钟

一键AI生成摘要，助你高效阅读

问答

辣条小哥哥

7391人浏览 · 2022-03-17 15:18:50

辣条小哥哥 · 2022-03-17 15:18:50 发布

提示：以下是本篇文章正文内容，下面案例可供参考

一、UE4是什么？

在这里插入图片描述
UE4 的全名是 Unreal Engine 4，中文译为“虚幻引擎4”。UE4 是一款由 Epic Games 公司开发的开源、商业收费、学习免费的游戏引擎。UE4 采用了目前最新的即时光迹追踪、HDR 光照、虚拟位移等新技术，而且能够每秒钟实时运算两亿个多边形运算，效能是目前“Unreal Engine”的 100 倍.

二、Vue框架和UE4交互的方法

1.在首页入口文件index.html中引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <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);
      window.ue = ue
    </script>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.页面向UE4传参

  ue4("type1", this.dataList);
  说明：type1是和UE4约定好的接口，this.dataList是页面要向UE4传的数据。

3.页面接收UE4传的数据

  <script>
  import store from '@/store'
  
  ue.interface.openAJDMenu = (val) => {
	  let obj = JSON.parse(val)
	  let params = {
	    name: obj.security_checkpoint,
	    code: obj.stadium_code,
	  }
	  store.dispatch('securityCheckShow', params)
}
  </script>
  说明：在Vue框架开发的项目中接收UE4发送过来的数据，
  必须写在 <script> 内，B端和C端交互的时候涉及到this指向的问题，
  所以通过Vuex来解决this的指向问题，同时注意UE4传过来的数据需要转义一下。