WebInUE前端技术文档
<p>[TOC]</p>
<h2>Web与UE的交互</h2>
<h3>首先在web端代码的index.html文件中加入下列代码</h3>
<pre><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot; /&gt;
&lt;link rel=&quot;icon&quot; href=&quot;./favicon.ico&quot; /&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
&lt;title&gt;Vite App&lt;/title&gt;
&lt;script&gt;
// create the global ue4(...) helper function
&quot;object&quot; != typeof ue &amp;&amp; (ue = {}),
(uuidv4 = function () {
return &quot;10000000-1000-4000-8000-100000000000&quot;.replace(
/[018]/g,
function (t) {
return (
t ^
(crypto.getRandomValues(new Uint8Array(1))[0] &amp; (15 &gt;&gt; (t / 4)))
).toString(16);
}
);
}),
(ue4 = (function (r) {
return &quot;object&quot; != typeof ue.interface ||
&quot;function&quot; != typeof ue.interface.broadcast
? ((ue.interface = {}),
function (t, e, n, o) {
var u, i;
&quot;string&quot; == typeof t &amp;&amp;
(&quot;function&quot; == typeof e &amp;&amp; ((o = n), (n = e), (e = null)),
(u = [t, &quot;&quot;, r(n, o)]),
void 0 !== e &amp;&amp; (u[1] = e),
(i = encodeURIComponent(JSON.stringify(u))),
&quot;object&quot; == typeof history &amp;&amp;
&quot;function&quot; == typeof history.pushState
//这里与ue通行应该是使用路径路由传参，注意切换history模式会导致刷新白屏。待解决。
? (history.pushState({}, &quot;#&quot; + i),
history.pushState({}, &quot;#&quot; + encodeURIComponent(&quot;[]&quot;)))
: ((document.location.hash = i),
(document.location.hash = encodeURIComponent(&quot;[]&quot;))));
})
: ((i = ue.interface),
(ue.interface = {}),
function (t, e, n, o) {
var u;
&quot;string&quot; == typeof t &amp;&amp;
(&quot;function&quot; == typeof e &amp;&amp; ((o = n), (n = e), (e = null)),
(u = r(n, o)),
void 0 !== e
? i.broadcast(t, JSON.stringify(e), u)
: i.broadcast(t, &quot;&quot;, u));
});
var i;
})(function (t, e) {
if (&quot;function&quot; != typeof t) return &quot;&quot;;
var n = uuidv4();
return (
(ue.interface[n] = t),
setTimeout(function () {
delete ue.interface[n];
}, 1e3 * Math.max(1, parseInt(e) || 0)),
n
);
}));
&lt;/script&gt;
&lt;style&gt;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
&lt;script type=&quot;module&quot; src=&quot;./src/main.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h3>web端发送事件给ue4</h3>
<pre><code>function SendUE(Message)
{
ue4(&quot;SendUE&quot;, Message);
}</code></pre>
<h3>web端接收ue4事件</h3>
<pre><code>ue.interface.SendWeb = function(Message)
{
JSON.stringify(message);
};</code></pre>
<h2>通信案例</h2>
<h3>创建POI</h3>
<ul>
<li>Web端调用</li>
</ul>
<pre><code>// 向UE发送‘Hello World’
let msg = &quot;Hello World&quot;;
SendUE(msg);
// 向UE发送创建POI字段
let msg = {
Command: &quot;CreateCustomPOI&quot;,
Args: {
ID: &quot;CustomPOI&quot;,
Tag: &quot;Video&quot;,
Lat: &quot;30&quot;,
Lng: &quot;120&quot;,
},
};
SendUE(msg);
</code></pre>
<h3>点击POI回调</h3>
<ul>
<li>ue发送</li>
</ul>
<pre><code>{
&quot;Command&quot;: &quot;OnClickCustomPOI&quot;,
&quot;Args&quot;: {
&quot;ID&quot;: &quot;CustomPOI&quot;,
&quot;Tag&quot;:&quot;Video&quot;,
&quot;ClickEvent&quot;:&quot;ClickPOI&quot;
}
}</code></pre>
<ul>
<li>Web端接收</li>
</ul>
<pre><code> ue.interface.SendWeb = function (message) {
if (JSON.stringify(message).indexOf('OnClickCustomPOI') === 16) {
alert(message);
}
};</code></pre>