后面一篇 WebUI 的文章讲述的 WebUI 插件的下载,开启,在 UE 中创立,加载网页等。
本文持续讲述通过 WebUI,UE 和网页实现双向通信的实现思路。
一点阐明
因为 WebUI 应用的浏览器内核并不是最新的浏览器内核,所以一些新的 JS 语法和新的 CSS 并不反对。比方不反对解构语法等。
所以在制作页面的时候须要留神这些问题点。
调试
如果遇到问题,须要调试,在 WebUI 加载网页之后,点击网页上任意元素,而后按下 shift+ctrl+i 能够调出网页控制台,进行谬误查看。
引入通信 JS 代码
要实现 UE 和页面的通信,首先须要在页面中引入一段 js 代码,如下所示:
"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;
该 js 代码片段为 WebUI 官网举荐。
网页向 UE 发送音讯
网页向 UE 发消息比拟如意,通过 ue4 函数,既可向 UE 发送音讯,ue4 函数反对两个参数,name 和 data,name 是 string 格局,data 是 json 格局,如下所示:
ue4("cmd",{value:123})
UE 承受音讯
UE 承受音讯,通过蓝图即可监听 webui 的音讯即可,如下图(蓝图)所示:
其中 name 和 Data 是网页传递过去的参数,Callback 此处不详述,个别用不上。
网页承受 UE 音讯
网页除了能够给 UE 发送音讯外,还能够承受来自 UE 的音讯。只须要在 ue.interface 对象下面,增加一个回调函数,即可承受音讯,如下所示:
ue.interface.add = function (data) {const { initValue} = JSON.parse(data);
// todo
};
UE 发送音讯给网页
UE 想网页发送音讯的蓝图如下所示,调用 webUI 的 Call 办法,Function 传递函数名称,Data 传递函数的参数
:
总结
本文提供了 UE 和网页的双向通信的形式的思路,具体细节须要大家本人多上手尝试。
太阳虽好,总要诸君亲自去晒,旁人却替你晒不来。
最初,关注公号“ITMan 彪叔”能够增加作者微信进行交换,及时收到更多有价值的文章。