Web组件对原生H5、常用框架VUE、React的页面支持情况,包括本地和网络端的页面

Web组件对原生H5、常用框架VUE、React的页面支持情况,包括本地和网络端的页面

HarmonyOS
2024-03-17 17:47:13
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
netos

Web组件支持原生H5页面及常用框架VUE和React。

Web组件支持加载网络页面、本地页面及HTML格式的文本数据,详细说明及代码实现可参考使用Web组件加载页面

加载VUE及React项目时,先使用“npm run build”命令将项目打包,后通过加载本地页面方式进行加载;若上传至服务器,可通过加载网络页面方式进行加载。

具体可参考如下示例代码:

1. 加载网络页面:

// xxx.ets 
import { webview } from '@kit.ArkWeb'; 
 
@Entry 
@Component 
struct WebComponent { 
  webviewController: webview.WebviewController = new webview.WebviewController(); 
 
  build() { 
    Column() { 
      Button('loadUrl') 
        .onClick(() => { 
          try { 
            // 点击按钮时,通过loadUrl,跳转到www.example1.com 
            this.webviewController.loadUrl('www.example1.com'); 
          } catch (error) { 
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`); 
          } 
        }) 
      // 组件创建时,加载www.example.com 
      Web({ src: 'www.example.com', controller: this.webviewController}) 
    } 
  } 
}

2.加载本地页面:

// xxx.ets 
import { webview } from '@kit.ArkWeb'; 
 
@Entry 
@Component 
struct WebComponent { 
  webviewController: webview.WebviewController = new webview.WebviewController(); 
 
  build() { 
    Column() { 
      Button('loadUrl') 
        .onClick(() => { 
          try { 
            // 点击按钮时,通过loadUrl,跳转到local1.html 
            this.webviewController.loadUrl($rawfile("local1.html")); 
          } catch (error) { 
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`); 
          } 
        }) 
      // 组件创建时,通过$rawfile加载本地文件local.html 
      Web({ src: $rawfile("local.html"), controller: this.webviewController }) 
    } 
  } 
}

在“src\main\resources\rawfile”文件夹下创建local.html:

<!-- local.html --> 
<!DOCTYPE html> 
<html> 
<body> 
<p>Hello World</p> 
</body> 
</html>

3.加载HTML格式的文本数据:

// xxx.ets 
import { webview } from '@kit.ArkWeb'; 
 
@Entry 
@Component 
struct WebComponent { 
  controller: webview.WebviewController = new webview.WebviewController(); 
 
  build() { 
    Column() { 
      Button('loadData') 
        .onClick(() => { 
          try { 
            // 点击按钮时,通过loadData,加载HTML格式的文本数据 
            this.controller.loadData( 
              "<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>", 
              "text/html", 
              "UTF-8" 
            ); 
          } catch (error) { 
            console.error(`ErrorCode: ${error.code},  Message: ${error.message}`); 
          } 
        }) 
      // 组件创建时,加载www.example.com 
      Web({ src: 'www.example.com', controller: this.controller }) 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-03-18 21:24:40
相关问题
webview加载Vue h5失败
15543浏览 • 5回复 待解决
H5页面如何与ArkTS交互
546浏览 • 1回复 待解决
Web能直接加载h5代码吗?
1165浏览 • 2回复 待解决
如何实现H5自定义事件
328浏览 • 1回复 待解决
如何加载字符串形式H5数据
217浏览 • 1回复 待解决
FA里内嵌H5是怎么保持登录状态?
5133浏览 • 1回复 待解决
鸿蒙应用网络请求框架支持吗?
2174浏览 • 1回复 待解决