瀏覽器

介紹

本示例使用[@ohos.systemparameter]接口和[Web組件]展示了一個(gè)瀏覽器的基本功能,展示網(wǎng)頁(yè)，根據(jù)頁(yè)面歷史棧前進(jìn)回退等。

效果預(yù)覽

使用說明:

1. 連接Wifi，啟動(dòng)應(yīng)用，展示默認(rèn)頁(yè)面內(nèi)容;
2. 點(diǎn)擊默認(rèn)頁(yè)面的圖標(biāo)跳轉(zhuǎn)到對(duì)應(yīng)網(wǎng)頁(yè)，或者在輸入框輸入網(wǎng)址，點(diǎn)擊右側(cè)跳轉(zhuǎn)按鈕跳轉(zhuǎn)到對(duì)應(yīng)網(wǎng)頁(yè);
3. 點(diǎn)擊輸入框左側(cè)向右向左按鈕進(jìn)行頁(yè)面的前進(jìn)后退;
4. 點(diǎn)擊主頁(yè)圖標(biāo)回到主頁(yè)，點(diǎn)擊加號(hào)按鈕新建一個(gè)頁(yè)面。

工程目錄

entry/src/main/ets/
|---Application
|   |---AbilityStage.ets                        // 入口
|---pages
|   |---Index.ets                               // 首頁(yè)
|---common
|   |---PhoneLayout.ets                         // 窗口管理工具
|   |---TitleBar.ets                            // 導(dǎo)航欄
|---model
|   |---Logger.ts                               // 日志工具
|   |---Browser.ets                             // 瀏覽器實(shí)例

具體實(shí)現(xiàn)

• 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 = controller

    this.isRegistered = isRegistered

  }

}



@Observed

class WebKey {

  key: number;

  timestamp: number;



  constructor(key: number, timestamp: number) {

    this.key = key

    this.timestamp = timestamp

  }

}



export enum LoadingStatus {

  LOADING,

  END

}



const TAG: string = '[browser]'



export class Browser {

  inputValue: string = ""

  tabArrayIndex: number = 0

  progress: number = 0

  hideProgress: boolean = true

  loadingStatus: LoadingStatus = LoadingStatus.END



  webArray: 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: '頁(yè)簽數(shù)量已滿'

      })

      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 - 1

    Logger.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()

  }

}

-   加載網(wǎng)頁(yè)及刷新：使用WebController提供的loadUrl可以加載目標(biāo)網(wǎng)址內(nèi)容，使用refresh方法刷新頁(yè)面;
-   頁(yè)面前進(jìn)后退功能：頁(yè)面在前進(jìn)或者后退前使用accessForward/accessBackward查詢是否有歷史記錄,然后調(diào)用forward/backward進(jìn)行前進(jìn)/后退操作。

依賴

不涉及。

約束與限制

1. 本示例僅支持標(biāo)準(zhǔn)系統(tǒng)上運(yùn)行;
2. 本示例需外接鼠標(biāo)進(jìn)行驗(yàn)證;
3. 本示例已適配API version 9版本SDK，版本號(hào)：3.2.11.9。
4. 本示例不支持點(diǎn)擊tab頁(yè)簽，切換網(wǎng)頁(yè)并刷新頁(yè)面;
5. 本示例涉及使用系統(tǒng)接口：[@ohos.systemparameter]，需要手動(dòng)替換Full SDK才能編譯通過。
6. 本示例需要使用DevEco Studio 3.1 Beta2 (Build Version: 3.1.0.400, built on April 7, 2023)及以上版本才可編譯運(yùn)行。

下載

如需單獨(dú)下載本工程，執(zhí)行如下命令：

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

審核編輯 黃宇