The previous WebUI article described the downloading, opening, creating and loading of web pages in UE of the WebUI plug-in.
This article continues to describe the realization of two-way communication through WebUI, UE and web pages.
a little explanation
Since the browser kernel used by WebUI is not the latest browser kernel, some new JS syntax and new CSS are not supported. For example, destructuring syntax is not supported.
So you need to pay attention to these problems when making the page.
debugging
If you encounter problems, you need to debug. After the WebUI loads the webpage, click any element on the webpage, and then press shift+ctrl+i to call up the webpage console for error viewing.
Import communication JS code
To realize the communication between UE and the page, you first need to introduce a piece of js code into the page, as shown below:
"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;
This js code snippet is officially recommended by WebUI.
Web page sends message to UE
It is more satisfactory to send a message to the UE from the web page. The ue4 function can be used to send a message to the UE. The ue4 function supports two parameters, name and data. The name is in string format, and the data is in json format, as shown below:
ue4("cmd",{value:123})
UE accepts the message
UE accepts the message, and can monitor the webui message through the blueprint, as shown in the following figure (blueprint):
Among them, name and Data are the parameters passed by the webpage, and the Callback will not be described in detail here, and it is generally not used.
The web page accepts UE messages
In addition to sending messages to the UE, the web page can also receive messages from the UE. Just add a callback function on the ue.interface object to accept the message, as shown below:
ue.interface.add = function (data) {
const { initValue } = JSON.parse(data);
// todo
};
UE sends a message to the webpage
The blueprint for UE to send a message to a web page is as follows, call the Call method of webUI, Function transfers the function name, and Data transfers the parameters of the function
:
Summarize
This article provides an idea of the way of two-way communication between UE and webpage, and the specific details need to be tried by yourself.
Although the sun is good, you have to sun it yourself, but others can't do it for you.
Finally, follow the official account "ITMan Biaoshu" to add the author's WeChat to communicate and receive more valuable articles in time.