HarmonyOS 鸿蒙Next 本地H5加载

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

HarmonyOS 鸿蒙Next 本地H5加载

app内的机器操控部分，是动态分发的，当用户需要使用某台机器时，从远程下载对应的H5 zip，解压到本地后，加载对应的html，并在地址后拼接？一些用户参数。  请问，鸿蒙是否支持加载本地Html（非rawfile下的文件），并且携带url参数。会不会有跨域问题？

Harmonyos Next教程
2 回复

可以通过resource协议加载本地资源文件，链接后可以用？拼接参数，src地址可以修改成如下所示： this.scr = “resource://rawfile/indexlocal.html?microId=11” 具体参考链接为：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-web-0000001860247877#ZH-CN_TOPIC_0000001860247877__接口

customizeSchemes 是自定义scheme，不包含 ‘http’、‘https’这种自定义协议一般为：meituan：、dahua:// 这种，标准协议不支持； 鸿蒙webview的使用过程中存在跨域的问题，目前鸿蒙解决跨域问题的解决方案，主要是通过拦截并自定义请求头的形式，可参考如下代码；

// xxx.ets
import web_webview from '@ohos.web.webview'

@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController()
responseweb: WebResourceResponse = new WebResourceResponse()
heads:Header[] = new Array()
@State webdata: string = “<!DOCTYPE html>\n” +
“<html>\n”+
“<head>\n”+
“<title>intercept test</title>\n”+
“</head>\n”+
“<body>\n”+
“<h1>intercept test</h1>\n”+
“</body>\n”+
“</html>”
build() {
Column() {
Web({ src: ‘www.example.com’, controller: this.controller })
.onInterceptRequest((event) => {
if (event) {
console.log(‘url:’ + event.request.getRequestUrl())
}
let head1:Header = {
headerKey:“Access-Control-Allow-Origin”,
headerValue:"*"
}
let head2:Header = {
headerKey:“Cache-Control”,
headerValue:“no-cache”
}
let length = this.heads.push(head1)
length = this.heads.push(head2)
this.responseweb.setResponseHeader(this.heads)
this.responseweb.setResponseData(this.webdata)
this.responseweb.setResponseEncoding(‘utf-8’)
this.responseweb.setResponseMimeType(‘text/html’)
this.responseweb.setResponseCode(200)
this.responseweb.setReasonMessage(‘OK’)
return this.responseweb
})
}
}
}

其中的webdata 就是你返回的页面数据。如果觉得用string的形式返回webdata的形式维护麻烦，可以在拦截的过程中使用http请求，把请求的返回数据复制给webdata 同样能达到效果。 异步请求数据需要设置资源响应数据是否已经就绪setResponseIsReady(true)，demo如下：

import web_webview from ‘@ohos.web.webview’;
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
@State webdata: string = “<!DOCTYPE html>\n” +
“<html>\n”+
“<head>\n”+
“<title>intercept test</title>\n”+
“</head>\n”+
“<body>\n”+
“<h1>intercept test</h1>\n”+
“</body>\n”+
“</html>”
async download1(){
try{
await console.log(’[TAG]: await download1 finished’);
} catch (error) {
console.error(’[Demo] axios error’);
}
return true;
}
async download2(){
try{
await console.log(’[TAG]: await download2 finished’);
} catch (error) {
console.error(’[Demo] axios error’);
}
}


async getFile(url:string) {
const flag = await this.download1();
if (!flag) {
await this.download2();
}
return this.webdata;
}


build() {
Column() {
// 组件创建时，加载www.example.com
Web({ src: ‘www.baidu.com’, controller: this.controller })
.onInterceptRequest((event) => {
if(event) {
const url = event.request.getRequestUrl();
try {
const responseweb = new WebResourceResponse();
this.getFile(url).then(webData => {
responseweb.setResponseData(webData);
responseweb.setResponseMimeType(‘text/html’)
responseweb.setResponseEncoding(‘utf-8’)
responseweb.setResponseCode(200);
responseweb.setReasonMessage(‘OK’);
responseweb.setResponseIsReady(true);
});
responseweb.setResponseMimeType(’*’);
responseweb.setResponseIsReady(false);
return responseweb;
} catch (error) {
console.error([Demo]Code: ${error.code},Message: ${error.message});
return null;
}
}
return null;
})


}

}
}

在HarmonyOS鸿蒙Next平台上加载本地H5内容，通常涉及将H5资源（如HTML、CSS、JS文件）集成到应用项目中，并通过应用内嵌的WebView组件进行加载展示。以下是一些关键步骤和专业说明：

  1. 资源准备：确保所有H5资源文件（HTML、CSS、JS、图片等）已正确放置在项目的指定目录下，例如assets或raw文件夹中。

  2. 配置权限：在config.json或相应的配置文件中，确保已配置对本地文件访问的权限。

  3. WebView加载：在Java或Kotlin代码中，使用WebView组件加载本地H5资源。通常通过webView.loadUrl("file:///android_asset/yourfile.html")或webView.loadUrl("file:///android_res/raw/yourfile.html")的方式指定文件路径。

  4. 处理WebView设置：配置WebView的WebSettings，如启用JavaScript、设置缓存模式等，以适应H5页面的需求。

  5. 错误处理：添加错误监听，以便在加载失败时能够捕获异常并进行相应处理。

确保以上步骤正确无误，通常可以解决本地H5加载的问题。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html 。

回到顶部