webview组件demo ,有人知道吗？

webview组件demo

HarmonyOS

mzshj

2024-05-20 20:10:03

浏览

已于2024-5-21 15:41:12修改

回答 1

待解决

回答 1

按赞同

按时间

sunshine_2000

核心代码解释

主要为web组件的页面刷新，页面跳转，加载url，加载字符串等等。

import web_webview from '@ohos.web.webview'; 
import router from '@ohos.router'; 
 
let url_data = ` 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset='utf-8'> 
</head> 
<body> 
<input type="text" placeholder="请输入内容"> 
<input type="text" placeholder="请输入内容"> 
</body> 
</html> 
` 
 
@Entry 
@Component 
struct WebTest { 
  private webController: web_webview.WebviewController = new web_webview.WebviewController(); 
 
  build() { 
    Column({ space: 10 }) { 
      Row({ space: 10 }) { 
        Button("刷新") 
          .onClick(() => { 
            this.webController.refresh(); 
          }) 
        Button("跳回去") 
          .onClick(() => { 
            router.back({ url: "pages/index2" }); 
          }) 
        Button("加载本地资源loadData") 
          .onClick(() => { 
            this.webController.loadData( 
              url_data, 
              "text/html", 
              "utf-8" 
            ) 
          }) 
 
      } 
 
      Row({ space: 10 }) { 
        Button("加载本地资源loadUrl") 
          .onClick(() => { 
            this.webController.loadUrl( 
              $rawfile("index.html") 
            ) 
          }) 
      } 
 
      Row({ space: 10 }) { 
        Button("前进") 
          .onClick(() => { 
            this.webController.forward(); 
          }) 
        Button("后退") 
          .onClick(() => { 
            this.webController.backward(); 
          }) 
        Button("清除记录") 
          .onClick(() => { 
            this.webController.clearHistory(); 
          }) 
      } 
 
      Web({ 
        src: "https://www.baidu.com", // 默认加载 www.arkui.club 网址 
        controller: this.webController 
      }) 
        .width("100%") 
        .height("100%") 
    } 
    .width('100%') 
    .height("100%") 
    .padding(10) 
  } 
}

实现效果

进行加载在线或者离线网页，进行页面历史路径的刷新，前进，后退等等操作。

2024-05-21 15:34:26

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

发布

51CTO

51CTO博客

51CTO学堂

webview组件demo ,有人知道吗？

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