问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
HarmonyOS助手
    1574788

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

    HarmonyOSharmonyosharmonyos-next
    阅读 264
    1 个回答
    得票最新
    头像
    HarmonyOS助手
      1574788

      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 }) 
    } 
  } 
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题