UE5 学习记录 -内嵌浏览器（WebUI插件使用）

插件下载

https://download.csdn.net/download/qq_31578301/90089415

(老规矩-实在没积分的就找我要吧~)

插件安装

1.在项目工程新建Plugins文件

2.把下载下来的WebUI5.3的三个相关文件丢进来 如下图

3.打开项目就会提示你有新插件可用，但这个时候项目打包会有问题，要么打包不成功，要么打包成功了无法运行，这个时候把UE5 自带的这几个插件也勾上，（我是初学者，没啥依据，纯属一直报错我试出来的...呜呜呜，后面弄明白为什么再来补充吧。希望对你们也有用）如下图

然后重启UE5 ，再打包，就可以正常打包并运行了，如下图

插件使用

1：插件加载

1.1：新建一个画布

1.2：拖入我们刚才安装好的插件组件

1.3：调整一下大小

1.4：可以把网页组件改个名字(我这里叫WebUI)并勾选“是变量”选项（方便我们使用）

如下图

1.5 切换到图表模式

1.6 拖入（获取）刚才设置好的变量‘WebUI’

1.7 连线输入LoadUrl/LoadFile，输入你想加载的页面地址/本地文件

1.8’事件构造‘连接LoadUrl/LoadFile（一定要连，不然不运行的）

1.9编译保存

 运行就可以出来我们要加载的画面了

补充：如果是加载本地文件，一定要记得在打包设置里面 ，添加额外非资产目录文件（就是把你的页面文件加进来，告诉引擎这些文件你也需要打包，不然打包出来会因为找不到资产而无法加载页面）如下图

2：插件交互

2.1  UE接收前端发的消息

2.1.1 选中我们刚才在步骤1中加载的组件（webUI）,看细节面板-事件，点击On Interface Event 后面那个＋号，如下图

2.1.2  就会出现这个事件了，name-方法名，Data-传过来的参数，Callback-事件回调

2.1.3 然后我们这里可以区分一下方法名(切换名称)，在这里添加你跟前端定义好的方法名，比如我这里加了两个方法名timeChange和gcChange(这个以与前端定义好的为准哦)，如下图

2.1.4 然后我们就可以直接打印一下接收到的数据了，如下图

2.1.5 打印也没问题，到这接收前端的信息就完成了，其他的看你自己发挥

2.2  UE发送消息给前端

2.2.1 右键新建一个自定义事件，我这里命名为showEquipmentInfo

2.2.2 选中这个事件，还是看细节面板，添加一个Data,类型是JSON Value,（也可以是string/int 其他类型的，我们这里规范一点，用键值的方式）如图

2.2.3 然后拖线出来，调用Call方法，连线都连上，目标-我们操作的界面，Function-跟前端定义的方法名，Data-就是我们传过去的数据

2.2.4  方法写好了，那就需要在我们需要的地方去调用就好，我这个就是写在弹窗蓝图里的，你们依据项目需求去调整就好了，调用如下图

2.2.5 到这里发送消息给前端也结束了，回调方法也是一样的

好了完结撒花，有新的我再来补充，有不懂的可以留言或者私我

晚点更新