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

深开鸿

发布于 2022-6-30 16:55

浏览

1收藏

前言

随着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%')
    }
  }
}