ionic框架的H5是否可以通过HarmonyOS的webView组件正常的加载出来?

ionic框架的H5是否可以通过HarmonyOS的webView组件正常的加载出来。

HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
superinsect

​将www包解压到entry/src/main/resources/rawfile目录下,参考加载本地页面。这种不适合js里面有type="module"的跨域场景,故使用demo方式,使用域名加载拦截的方式。​https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-page-loading-with-web-components-V5

demo示例:​

import web_webview from '@ohos.web.webview'; 
 
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World'; 
  webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
  prefix: string = 'https://www.example.com/'; 
  mimeTypeMap = new Map([ 
    [".html", 'text/html'], 
    [".js", "text/javascript"], 
    [".png", "image/png"], 
    [".svg", "image/svg+xml"], 
    [".css", "text/css"], 
  ]) 
 
  aboutToAppear() { 
    // 配置Web开启调试模式   
    web_webview.WebviewController.setWebDebuggingAccess(true); 
  } 
 
  build() { 
    Row() { 
      Column() { 
 
        Web({ src: "https://www.example.com/index.html", controller: this.webviewController }) 
          .javaScriptAccess(true) 
          .fileAccess(true) 
          .domStorageAccess(true) 
          .geolocationAccess(true) 
          .width("100%") 
          .height("100%") 
          .onInterceptRequest((event) => { 
            if (!event) { 
              return; 
            } 
 
            if (event.request.getRequestUrl().startsWith(this.prefix)) { 
              let rawfileName: string = event.request.getRequestUrl().substring(this.prefix.length)!; 
              let suffix = rawfileName.toLowerCase().match(/\.(\w+)$/); 
              if (suffix && this.mimeTypeMap.has(suffix[0])) { 
                let mimeType = this.mimeTypeMap.get(suffix[0]); 
                if (typeof mimeType === 'string') { 
                  let response = new WebResourceResponse(); 
                  // 构造响应数据,如果本地文件在rawfile下,可以通过如下方式设置   
                  response.setResponseData($rawfile(rawfileName)); 
                  response.setResponseEncoding('utf-8');
分享
微博
QQ
微信
回复
3天前
相关问题
webview加载Vue h5失败
17582浏览 • 5回复 待解决
HarmonyOS webview h5localstorage
273浏览 • 1回复 待解决
HarmonyOS web组件加载h5h5拉起摄像头
385浏览 • 1回复 待解决
HarmonyOS web通过loadData加载h5标签
38浏览 • 1回复 待解决
HarmonyOS Web组件加载在线H5页面
52浏览 • 1回复 待解决
如何在webview中使用H5alert
1164浏览 • 1回复 待解决
HarmonyOS h5页面是否可以适配Harmony OS
332浏览 • 1回复 待解决
Web中webviewH5交互
947浏览 • 1回复 待解决
HarmonyOS H5页面加载缓存机制
61浏览 • 1回复 待解决