浏览器

介绍

本示例使用[@ohos.systemparameter]接口和[Web组件]展示了一个浏览器的基本功能,展示网页，根据页面历史栈前进回退等。

效果预览

首页	打开网址

使用说明:

1. 连接Wifi，启动应用，展示默认页面内容;
2. 点击默认页面的图标跳转到对应网页，或者在输入框输入网址，点击右侧跳转按钮跳转到对应网页;
3. 点击输入框左侧向右向左按钮进行页面的前进后退;
4. 点击主页图标回到主页，点击加号按钮新建一个页面。

工程目录

entry/src/main/ets/
|---Application
|   |---AbilityStage.ets                        // 入口
|---pages
|   |---Index.ets                               // 首页
|---common
|   |---PhoneLayout.ets                         // 窗口管理工具
|   |---TitleBar.ets                            // 导航栏
|---model
|   |---Logger.ts                               // 日志工具
|   |---Browser.ets                             // 浏览器实例

具体实现

• Web展示与历史栈操作功能在Browser中，源码参考[Browser.ets]

/** Copyright (c) 2022 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at**     http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import Logger from './Logger'import prompt from '@ohos.prompt';export class WebObject {controller: WebController;isRegistered: boolean;constructor(controller: WebController, isRegistered: boolean) {this.controller = controllerthis.isRegistered = isRegistered}}@Observedclass WebKey {key: number;timestamp: number;constructor(key: number, timestamp: number) {this.key = keythis.timestamp = timestamp}}export enum LoadingStatus {LOADING,END}const TAG: string = '[browser]'export class Browser {inputValue: string = ""tabArrayIndex: number = 0progress: number = 0hideProgress: boolean = trueloadingStatus: LoadingStatus = LoadingStatus.ENDwebArray: Array<WebKey> = [new WebKey(0, new Date().getTime())]tabsController: TabsController = new TabsController()webControllerArray: Array<WebObject> = [new WebObject(new WebController(), false)]deleteTab(index: number) {Logger.info(TAG, `delete before tab index= ${index} controller length ${this.webControllerArray.length} tabArrayIndex= ${this.tabArrayIndex}`)this.webArray.splice(index, 1)this.webControllerArray.splice(index, 1)if (this.tabArrayIndex > index || this.tabArrayIndex === this.webArray.length) {this.tabArrayIndex -= 1}for (let i = index;i < this.webArray.length; ++i) {this.webArray[i].key -= 1}for (let i = 0;i < this.webArray.length; ++i) {Logger.info(TAG, `key ${this.webArray[i].key}, time=${this.webArray[i].timestamp}`)}Logger.info(`delete after tab index=${index}, controller length=${this.webControllerArray.length}, tabArrayIndex=${this.tabArrayIndex}`)this.tabsController.changeIndex(this.tabArrayIndex)}getWebArray() {return this.webArray}addTab() {if (this.webArray.length > 10) {prompt.showToast({message: '页签数量已满'})return;}let webController: WebController = new WebController();let object = new WebObject(webController, false)this.webControllerArray.push(object)this.webArray.push(new WebKey(this.webArray.length, new Date().getTime()))this.tabArrayIndex = this.webArray.length - 1Logger.info(TAG, `add tab index= ${this.tabArrayIndex}`)setTimeout(() => {this.tabsController.changeIndex(this.tabArrayIndex)}, 50)}setTabArrayIndex(tabArrayIndex: number) {this.tabArrayIndex = tabArrayIndex}getTabArrayIndex() {return this.tabArrayIndex}setInputVal(inputValue: string) {this.inputValue = inputValue}getInputVal() {return this.inputValue}loadUrl(addr: string) {addr = "https://" + addr;this.webControllerArray[this.tabArrayIndex].controller.loadUrl({ url: addr })}Back() {if (this.webControllerArray[this.tabArrayIndex].controller.accessBackward()) {this.webControllerArray[this.tabArrayIndex].controller.backward()}}Forward() {if (this.webControllerArray[this.tabArrayIndex].controller.accessForward()) {this.webControllerArray[this.tabArrayIndex].controller.forward()}}Refresh() {this.webControllerArray[this.tabArrayIndex].controller.refresh()}}

-   加载网页及刷新：使用WebController提供的loadUrl可以加载目标网址内容，使用refresh方法刷新页面;
-   页面前进后退功能：页面在前进或者后退前使用accessForward/accessBackward查询是否有历史记录,然后调用forward/backward进行前进/后退操作。

依赖

不涉及。

约束与限制

1. 本示例仅支持标准系统上运行;
2. 本示例需外接鼠标进行验证;
3. 本示例已适配API version 9版本SDK，版本号：3.2.11.9。
4. 本示例不支持点击tab页签，切换网页并刷新页面;
5. 本示例涉及使用系统接口：[@ohos.systemparameter]，需要手动替换Full SDK才能编译通过。
6. 本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)及以上版本才可编译运行。

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo code/BasicFeature/Web/Browser/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

更多鸿蒙知识已经更新qr23.cn/AKFP8k可以前往了解