HarmonyOS/OpenHarmony应用开发-Web组件开发体验

鸿蒙时代
发布于 2022-12-12 14:34
浏览
0收藏

提供具有网页显示能力的Web组件。

该组件从API Version 8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

权限列表
访问在线网页时需添加网络权限:ohos.permission.INTERNET

接口
Web(options: { src: ResourceStr, controller: WebController })
HarmonyOS/OpenHarmony应用开发-Web组件开发体验-鸿蒙开发者社区
开发体验:
HarmonyOS/OpenHarmony应用开发-Web组件开发体验-鸿蒙开发者社区
HarmonyOS/OpenHarmony应用开发-Web组件开发体验-鸿蒙开发者社区

示例代码:
Index.ets:

Index.ets:
	import router from '@ohos.router';
@Entry
@Component
struct Index {
  @State btn: string = "百度一下";
  @State btnHtml: string = "打开html文件";
  controller: WebController = new WebController()

  build() {
    Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center,direction:FlexDirection.Column }) {
//      加载在线网页
      Button(this.btn)
        .onClick(()=>{
          router.push({ url:'pages/webPage' })
        })
//      加载本地网页
      Button(this.btnHtml)
        .margin({top:20})
        .onClick(()=>{
          router.push({ url:'pages/test' })
        })
    }.width("100%").height('100%')
  }
}


test.ets:

@Entry
@Component
struct Test {
  controller: WebController = new WebController()

  build() {
      Column() {
        Web({ src: $rawfile('test.html'), controller: this.controller })
      }
  }
}

webPage.ets:

@Entry
@Component
struct WebPage{
  controller: WebController = new WebController()
  build() {
    Column(){
        Web({ src: 'https://www.baidu.com/', controller: this.controller })
    }
  }
}

示例效果:
HarmonyOS/OpenHarmony应用开发-Web组件开发体验-鸿蒙开发者社区

参考文档:
https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-web-0000001380600866-V3

标签
HarmonyOSOpenHarmony应用开发-Web组件开发.docx 232.51K 17次下载
1
收藏
回复
举报
回复
    相关推荐