HarmonyOS 鸿蒙Next Web组件如何加载wasm文件
HarmonyOS 鸿蒙Next Web组件如何加载wasm文件
在项目资源目录rawfile文件夹内置rawfile/index.html、rawfile/lib/libpag.min.js和rawfile/lib/libpag.wasm文件,其中index.html引入了js文件,在js中加载了wasm文件,使用web组件加载index.html报错如何解决
报错信息:
[CONSOLE:6719] “Fetch API cannot load resource://rawfile/webpag/lib/libpag.wasm. URL scheme “resource” is not supported.”, source: resource://rawfile/webpag/lib/libpag.min.js (6719)
[CONSOLE:7091] “TypeError: Failed to fetch”, source: resource://rawfile/webpag/lib/libpag.min.js (7091)
[CONSOLE:80] “Uncaught (in promise) ReferenceError: buffer is not defined”, source: resource://rawfile/webpag/index.html (80)
报错信息:
[CONSOLE:6719] “Fetch API cannot load resource://rawfile/webpag/lib/libpag.wasm. URL scheme “resource” is not supported.”, source: resource://rawfile/webpag/lib/libpag.min.js (6719)
[CONSOLE:7091] “TypeError: Failed to fetch”, source: resource://rawfile/webpag/lib/libpag.min.js (7091)
[CONSOLE:80] “Uncaught (in promise) ReferenceError: buffer is not defined”, source: resource://rawfile/webpag/index.html (80)
2 回复
参考如下示例:
import webview from '[@ohos](/user/ohos).web.webview';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct MainPage {
[@State](/user/State) isLoading: boolean = true
[@State](/user/State) msg: string = ""
controller: webview.WebviewController = new webview.WebviewController();
aboutToAppear() {
webview.WebviewController.setWebDebuggingAccess(true);
}
build() {
Row() {
Column() {
Stack() {
Web({ src: "https://www.ahahahah/index.html", controller:this.controller })
.backgroundColor(Color.White)
.multiWindowAccess(true)
.javaScriptAccess(true)
.geolocationAccess(true)
.imageAccess(true)
.onlineImageAccess(true)
.domStorageAccess(true)
.fileAccess(true)
.mediaPlayGestureAccess(true)
.mixedMode(MixedMode.All)
.onAlert((event) => {
return false
}).onProgressChange((event) => {
if (event?.newProgress == 100) {
this.isLoading = false
}
})
.onConsole((event) => {
return false;
})
.onInterceptRequest((event) => {
if (!event) {
return;
}
let requestUrl:string = event.request.getRequestUrl();
console.log('请求为:'+event.request.getRequestUrl())
interface HtmlMimeType{
type:string,
mime:string
}
let typeArr :Array<HtmlMimeType> = [{
type:".html",
mime:"text/html"
},{
type:".js",
mime:"text/javascript"
},{
type:".css",
mime:"text/css"
},{
type:".wasm",
mime:"application/wasm"
}];let isSearch:boolean = false;
let searchTypeObj : HtmlMimeType;
for (const typeObj of typeArr) {
let index:number = requestUrl.lastIndexOf(typeObj.type);
if (index > 0) {
isSearch = true;
searchTypeObj = typeObj;
break;
}
}
if (isSearch) {
let rawfileName :string = requestUrl.replace("https://www.ahahahah/","");
let endIndex = rawfileName.indexOf("?");
if (endIndex > - 1) {//如果没去除,文件名会导致错误
rawfileName = rawfileName.substring(0,endIndex);
}
let response = new WebResourceResponse();
response.setResponseData($rawfile(rawfileName));
response.setResponseEncoding('utf-8');
response.setResponseMimeType(searchTypeObj!.mime);
response.setResponseCode(200);
response.setReasonMessage('OK');
response.setResponseIsReady(true);
return response;
}
return null;
}).width('100%')
.height('100%')
.backgroundColor("#ffeef5ee")
if (this.isLoading) {
LoadingProgress()
.width(40)
.height(40)
}
}
.alignContent(Alignment.Center)
.width('100%')
.height('100%')
}
}
}
}
HarmonyOS鸿蒙Next Web组件加载WASM(WebAssembly)文件的过程,主要涉及到在Web环境中对WASM模块的支持与加载。
首先,需要确认你的HarmonyOS应用已经配置了对网络资源的访问权限,特别是如果你打算从远程服务器加载WASM文件。这通常需要在应用的配置文件中声明ohos.permission.INTERNET
权限。
其次,由于WASM文件是二进制格式的,你需要通过适当的方式将其加载到Web组件中。这通常涉及到使用JavaScript的fetch
API来获取WASM文件的二进制内容,然后使用WebAssembly.instantiate
方法将其实例化。
实例化后的WASM模块可以通过JavaScript进行调用,实现与Web组件的交互。
需要注意的是,加载和实例化WASM文件的过程可能因应用的具体环境和配置而有所不同。如果在加载过程中遇到问题,建议检查WASM文件的格式是否正确,以及应用是否有足够的权限和资源来执行加载操作。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。