HarmonyOS 本地H5加载

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

HarmonyOS

aquaa

1天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

可以通过resource协议加载本地资源文件，链接后可以用？拼接参数，src地址可以修改成如下所示：

this.scr = “resource://rawfile/indexlocal.html?microId=11”

具体参考链接为：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#接口

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: 'xxx', 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() {
      // 组件创建时，加载xxx
      Web({ src: 'www.huawei.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;
        })

    }
  }
}

1天前

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 本地H5加载

订阅鸿蒙技术特刊，精选内容抢先看