Vue3与UE5的交互

Vue3与UE5的交互

1. Vue3向UE5传信 —— 三步

步骤归纳如下：

1. Vue3项目index.html的script中定义UE5函数

//定义UE5()函数
    "object" != typeof ue && (ue = {}),
        (uuidv4 = function() {
            return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, function(t) {
                return (t ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (t / 4)))).toString(16);
            });
        }),
        (ue5 = (function(r) 
        {
            return "object" != typeof ue.interface || "function" != typeof ue.interface.broadcast ?
                ((ue.interface = {}),
                    function(t, e, n, o) {
                        var u, i;
                        "string" == typeof t &&
                            ("function" == typeof e && ((o = n), (n = e), (e = null)),
                                (u = [t, "", r(n, o)]),
                                void 0 !== e && (u[1] = e),
                                (i = encodeURIComponent(JSON.stringify(u))),
                                "object" == typeof history && "function" == typeof history.pushState ?
                                (history.pushState({}, "", "#" + i), history.pushState({}, "", "#" + encodeURIComponent("[]"))) :
                                ((document.location.hash = i), (document.location.hash = encodeURIComponent("[]"))));
                    }) :
                ((i = ue.interface),
                    (ue.interface = {}),
                    function(t, e, n, o) {
                        var u;
                        "string" == typeof t &&
                            ("function" == typeof e && ((o = n), (n = e), (e = null)),
                                (u = r(n, o)),
                                void 0 !== e ? i.broadcast(t, JSON.stringify(e), u) : i.broadcast(t, "", u));
                    });
            var i;
        })(function(t, e) {
            if ("function" != typeof t) return "";
            var n = uuidv4();
            return (
                (ue.interface[n] = t),
                setTimeout(function() {
                    delete ue.interface[n];
                }, 1e3 * Math.max(1, parseInt(e) || 0)),
                n
            );
        }));

2. UE5函数在整个Vue项目中都能使用，在index.html中加

window.ue5 = ue5

3. 在需要通信的vue页面中

//pageFunctionName是页面定义的函数名称，function_name是与UE5中商议好的函数名称，function_params是Vue3传递到UE5中的函数
const pageFunctionName= () => ue5("function_name", function_params);

2. UE5向Vue3传递事件 —— 两步

1. UE5中定义好回调函数
2. 在vue页面中

//注意用的是ue，不是自定义的ue5，showSidebar是回调函数中写的函数名称，注意区分大小写
ue.interface.showSidebar = () => {
//函数内部执行操作
  console.log('~~~~')
};