[文章]HarmonyOS/OpenHarmony应用开发-Web组件开发体验

阅读量0
1
1

提供具有网页显示能力的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 })
    }
  }
}

*附件:HarmonyOSOpenHarmony应用开发-Web组件开发体验.docx

示例效果:
HarmonyOS/OpenHarmony应用开发-Web组件开发体验-开源基础软件社区

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

回帖

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容图片侵权或者其他问题,请联系本站作侵删。 侵权投诉
链接复制成功,分享给好友