#夏日挑战赛#OpenHarmony实现简单的web浏览器应用 原创 精华

深开鸿
发布于 2022-6-30 16:55
浏览
1收藏

本文正在参加星光计划3.0–夏日挑战赛

作者:陈日朗

前言

随着OpenHarmony的快速发展,我们需要越来越多的应用来实现用户的需求,在移动设备的操作系统中,浏览器则是必不可少的应用之一,接下来让我们一起来实现一个简单的浏览器

实现原理

通过框架层提供的Web组件来实现对网页的展示,通过webcontroller来控制网页的简单行为。

实现过程

1.网页主页

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

接口:Web(options: { src: string, controller?: WebController })

首先,我们需要在代码中使用Web接口创建一个网页框架,这个接口接受两个参数,第一个参数为路径(在线网址路径或者需要加载的本地文件的路径),第二个参数为一个webcontroller控制对象。代码如下:

@Entry
@Component
struct Index {
  build() {
    Column() {
      Web({ src: 'www.baidu.com', controller: new WebController() })
        .width('100%')
        .height('100%')
    }
  }
}

在有网络的情况下,上述代码将会打开一个百度首页,并展示到我们应用的整个界面,一个简单的浏览器雏形已经出现。

2.网页切换

接下来我们需要实现网页之前的切换,我们需要在我们上面代码的基础上添加一个input框来作为网页地址的输入,并且监听onChange和onSubmit事件来更新Web组件的src。代码如下:

TextInput({
	placeholder: '请在这里输入网址',
	text: this.inputValue
})
.width('100%')
.height('56vp')
.onChange((value: string) => {
	this.inputValue = value
})
.onSubmit(() => {
	this.url = this.inputValue
	this.wController.loadUrl({ url: this.url })
})

上述代码我们在onChange事件中监听到input的文本变化并更新当前的inputValue,在点击回车的时候将inputValue的值传给web组件,并调用controller的loadUrl方法刷新web页面。

3.网页前进/后退

接口:webController: WebController = new WebController()

最后我们通过两个简单的按钮来实现网页的前进后退功能,我们需要用到上面提到了一个接口webController,通过这个接口我们可以对网页做一些简单的操作,包括但不限于前进,后退,刷新,激活,清除历史记录等等,代码如下:

private wController: WebController  = new WebController()
...
Row() {
  Button('前进').onClick(() => this.wController.forward())
  Button('后退').onClick(() => this.wController.backward())
}

上述代码我们调用的webController的forward和backward,分别可以对已经浏览过的网页进行前进和后退的切换。

总结

​ 通过上面的三个步骤,我们已经实现了简单的浏览器功能,并且可以进行网页切换和前进后退。其实浏览器的主要功能都包含在Web组件中,我们只需要调用webController的一些方法来实现浏览器的基本功能。Web组件在OpenHarmony的开源api中算是使用比较简单的,有兴趣的小伙伴可以尝试一下这个功能。

​ 大家有什么建议或者想法也可以在评论说出来一起探讨,最后我贴上本次案例的完整代码,感谢大家观看~

@Entry
@Component
struct Index {
  @State inputValue: string = ''
  @State url: string = 'www.baidu.com'
  private wController: WebController  = new WebController()

  build() {
    Column() {
      TextInput({
        placeholder: '请在这里输入网址',
        text: this.inputValue
      })
      .width('100%')
      .height('56vp')
      .onChange((value: string) => {
        this.inputValue = value
      })
      .onSubmit(() => {
        this.url = this.inputValue
        this.wController.loadUrl({ url: this.url })
      })

      Row() {
        Button('前进').onClick(() => this.wController.forward())
        Button('后退').onClick(() => this.wController.backward())
      }

      Web({ src: this.url, controller: this.wController })
        .width('100%')
        .height('100%')
    }
  }
}

更多原创内容请关注:深开鸿技术团队

入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建OpenHarmony生态。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2023-1-12 11:08:09修改
2
收藏 1
回复
举报
回复
    相关推荐