HarmonyOS 鸿蒙Next Web组件如何加载wasm文件

发布于 1周前 作者 phonegap100 来自 鸿蒙OS

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)

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

回到顶部