UE4.27 HTML5版本调用JS方法（UE与JS交互）

将做什么

通过UE4.27 发布HTML5 版本后，每次进入无可厚非直接显示关卡首页。但是如果HTML页面需要与其他页面交互或者根据页面的传参显示隐藏指定物体又要如何操作？

所以实现的场景具体流程为：我在UE放两个物体圆柱体和球，并默认隐藏他们。当我打包发布后，根据页面的传参数，对他们进行显示和隐藏，当我请求URL里面包含Cylinder 就显示圆柱体，当我请求URL里面包含Sphere 就显示球。

先尝结果

UE4.27 HTML5 参数交互演示

环境

• UE版本为 4.27 源码版本（可参考[UE4.27 源码版 可打包HTML5版本 （Windows）](https://blog.youkuaiyun.com/Xfuck/article/details/140259469)）

• Visual Studio Community 2019或2022（修改源码）

怎么做

修改源码

1、打开UE4.27 引擎源码（vs2019或2022）

2、打开文件“HTML5ToolChain.cs”，找到 “EXTRA_EXPORTED_RUNTIME_METHODS=\"['Pointer_stringify', 'writeAsciiToMemory', 'stackTrace']” ,这边是在466行,去掉前面的注释（双斜杠）“//”。

3、打开文件HTML5JavaScriptFx.h 添加方法，我这边添加了两个方法

• UE_GetHTML5Url - 获取浏览器URL全地址
• UE_GetHTML5UrlParams - 获取浏览器URL后面带的参数并转为json字符串

		void UE_GetHTML5Url(const char* outdata);

		void UE_GetHTML5UrlParams(const char* outdata);

4、打开文件“HTML5JavaScriptFx.js” 实现刚刚添加的两个方法。

	// ****** 自定义方法 ***********
	UE_GetHTML5Url: function(outdata) {
		var h5Url = window.location.href;
		// Decode64的转码
		h5Url = decodeURI(h5Url, "utf-8");
		// 日志都会在浏览器控制台里显示
		console.log("BT MissJ UE Log:Local Url" + h5Url);
		// 进行编码，预防乱码
		var newUrl = window.btoa(h5Url);
		console.log("BT MissJ UE Log:Local NewUrl" + newUrl);
		// writeAsciiToMemory 就是第二步HTML5ToolChain.cs 里面放开使用的
		Module.writeAsciiToMemory(newUrl, outdata);
	},
	UE_GetHTML5UrlParams: function(outdata) {
		var searchParams = new URLSearchParams(window.location.search);
		var json = {};
		for (var [key, value] of searchParams.entries()) {
			json[key] = value;
		}
		var newJsonStr = window.btoa(JSON.stringify(json));
		Module.writeAsciiToMemory(newJsonStr, outdata);
	}

5、需要在UE引擎里能够获取到了。我这边是找的工具集的源码位置加进去的。看个人需要。打开文件KismetStringLibrary.h定义方法。

Category 里面的意思对应着蓝图类，右键显示的树形结构分组名称。可自行定义。

6.定义好了方法，就需要实现。打开文件“KismetStringLibrary.cpp”.调用 JS 实现的方法（“HTML5JavaScriptFx.js”），这个添加内容较多。

• 在头部添加以下内容

#ifdef __EMSCRIPTEN__
	#include <emscripten/emscripten.h>
	#include <emscripten/html5.h>
	#include "HTML5JavaScriptFx.h"
#else
#define EMSCRIPTEN_KEEPALIVE
#endif

#include <string>
#include <cstring>

• 实现方法，并调用js方法

FString UKismetStringLibrary::GetHtml5Url()
{
	char OutData[1024];

	#ifdef __EMSCRIPTEN__ 
		UE_GetHTML5Url(OutData);
	#endif

	//把数据转到FString
	FString ueStr = FString(StringCast<TCHAR>(OutData).Get());

	//解码
	FString SaveURL;
	FBase64::Decode(ueStr, SaveURL);
	return  SaveURL;
}


FString UKismetStringLibrary::GetHtml5UrlParamJson()
{
	char h5SearchParams[2048];

	#ifdef __EMSCRIPTEN__ 
		UE_GetHTML5UrlParams(h5SearchParams);
	#endif

	//把数据转到FString
	FString paramJson = FString(StringCast<TCHAR>(h5SearchParams).Get());

	//解码
	FString resData;
	FBase64::Decode(paramJson, resData);
	return  resData;
}

至此源码修改部分已经结束。

7、生成UE4, 生成时必须关掉打开的虚拟引擎。（生成：增量编译，速度快），几分钟就好

UE使用

项目demo：交互Demo7

上面编译好后，打开虚拟引擎
直接在蓝图类中就能搜索到方法名称。逻辑部分就自行发挥了。

打包部署测试

根据之前的文档[UE4.27 源码版 可打包HTML5版本 （Windows）](https://blog.youkuaiyun.com/Xfuck/article/details/140259469) 打包部署即可。在根据不同的url.验证效果

// demo7-HTML5-Shipping 就是自己打包后项目的名称
// 默认地址 
http://localhost:8000/demo7-HTML5-Shipping.html

// 加参数1 显示圆柱体
http://localhost:8000/demo7-HTML5-Shipping.html?param=Cylinder

// 修改参数2 显示圆
http://localhost:8000/demo7-HTML5-Shipping.html?param=Sphere