#夏日挑战赛#OpenHarmony实现简单的web浏览器应用 原创 精华
作者:陈日朗
前言
随着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生态。