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

HarmonyOS

cbaby

2024-03-17 17:47:13

浏览

回答 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 }) 
    } 
  } 
}

2024-03-18 21:24:40

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

发布

51CTO

51CTO博客

51CTO学堂

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

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