HarmonyOS 使用Web组件加载页面示例

HarmonyOS 使用Web组件加载页面示例。

HarmonyOS

superinsect

2024-09-05 10:34:06

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

1.加载网络资源

import web_webview from '@ohos.web.webview'; 
import business_error from '@ohos.base'; 
import router from '@ohos.router'; 
 
// 1.涉及网络资源获取，需要在module.json5配置ohos.permission.INTERNET网络访问权限 
 
@Entry 
@Component 
struct loadWeb { 
  webviewController:web_webview.WebviewController = new web_webview.WebviewController(); 
  build() { 
    Column(){ 
      Row(){ 
        Image($r('app.media.ic_back')) 
          .width('40vp') 
          .height('40vp') 
          .margin({right:'20vp'}) 
          .onClick(()=>{ 
            router.back() 
          }) 
        // 通过按钮点击加载网络页面 
        Button('Load Web URL') 
          .onClick(()=>{ 
            try{ 
              this.webviewController.loadUrl('https://developer.huawei.com/consumer/cn/'); 
            }catch(error){ 
              let e:business_error.BusinessError = error as business_error.BusinessError; 
              console.error(`ErrorCode:${e.code},Message:${e.message}`); 
            } 
          }) 
          .margin({top:'20vp',bottom:'20vp'}) 
          .flexGrow(2) 
      } 
      .width('100%') 
      .padding({left:'20vp',right:'20vp'}) 
      .border({style:BorderStyle.Solid}) 
 
 
      // 组件创建时，加载网络页面 
      Web({src:'www.huawei.com',controller:this.webviewController }) 
    } 
  } 
}

2.加载本地资源

import web_webview from '@ohos.web.webview'; 
import business_error from '@ohos.base'; 
import router from '@ohos.router'; 
 
@Entry 
@Component 
struct  loadLocalPage{ 
  webviewController:web_webview.WebviewController = new web_webview.WebviewController(); 
 
  build() { 
    Column() { 
      Row(){ 
        Image($r('app.media.ic_back')) 
          .width('40vp') 
          .height('40vp') 
          .margin({right:'20vp'}) 
          .onClick(()=>{ 
            router.back() 
          }) 
        Button('Load Local Page') 
          .onClick(() => { 
            try { 
              this.webviewController.loadUrl($rawfile('loadPage/loadLocalPage/local2.html')) 
            } catch (error) { 
              let e: business_error.BusinessError = error as business_error.BusinessError; 
              console.log(`ErrorCode:${e.code},message:${e.message}`); 
            } 
          }) 
          .margin({top:'20vp',bottom:'20vp'}) 
          .flexGrow(2) 
      } 
      .width('100%') 
      .padding({left:'20vp',right:'20vp'}) 
      .border({style:BorderStyle.Solid}) 
 
      Web({ src: $rawfile('loadPage/loadLocalPage/local1.html'), controller: this.webviewController }); 
    } 
  } 
}

H5页面如下：

<!doctype html> 
  <html lang="en"> 
  <head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
  <title>Document</title> 
  </head> 
  <body> 
  <div class="local"> 
  Hello, I am Loacl Page Two! 
  </div> 
  </body> 
  </html> 
 
<style> 
  .local{ 
  width:100%; 
  height:100%; 
  margin:0 auto; 
  font-size:20px; 
  font-weight:700; 
  color:blue; 
  text-align:center; 
} 
</style>

2024-09-05 16:24:41

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 使用Web组件加载页面示例

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