1. web組件文件下載能力簡介
在本系列的第22篇文章拘央，介紹了web組件的文件上傳能力，同樣的书在，web組件也具備文件下載能力灰伟，鴻蒙API提供了處理web組件下載事件的委托類型WebDownloadDelegate，該類型包括四個下載事件的回調(diào)接口：
class WebDownloadDelegate {
//下載開始前通知用戶儒旬，用戶需要在此接口中調(diào)用WebDownloadItem.start提供下載路徑
onBeforeDownload(callback: Callback<WebDownloadItem>): void
//下載過程中的回調(diào)
onDownloadUpdated(callback: Callback<WebDownloadItem>): void
//下載完成后的回調(diào)
onDownloadFinish(callback: Callback<WebDownloadItem>): void
//下載失敗時的回調(diào)
onDownloadFailed(callback: Callback<WebDownloadItem>): void
}
web組件的控制器類WebviewController提供了設(shè)置web組件下載事件委托的方法setDownloadDelegate：
setDownloadDelegate(delegate: WebDownloadDelegate): void
web組件在下載狀態(tài)變化時會自動調(diào)用委托中的對應(yīng)回調(diào)函數(shù)栏账。
本文將通過一個示例演示web組件的下載能力，通過進度條展示下載進度的變化栈源。
2. web組件文件下載演示
本示例運行后的界面如圖所示：
輸入要瀏覽的網(wǎng)頁地址挡爵，然后單擊“加載”按鈕加載網(wǎng)頁，加載成功后單擊要下載文件的超鏈接即可開始下載凉翻，如圖所示：
這里我們下載的是嗶哩嗶哩網(wǎng)站的安卓版客戶端了讨，在應(yīng)用的下載展示了下載的位置和當前的進度以及下載速度捻激。下載完畢的界面如圖所示：
這樣就完成了web組件的下載功能演示。
3. web組件文件下載示例編寫
下面詳細介紹創(chuàng)建該示例的步驟前计。
步驟1：創(chuàng)建Empty Ability項目胞谭。
步驟2：在module.json5配置文件加上對權(quán)限的聲明：
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
這里添加了訪問互聯(lián)網(wǎng)的權(quán)限。
步驟3：在Index.ets文件里添加如下的代碼：
import webview from '@ohos.web.webview';
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct Index {
@State title: string = "Web組件文件下載示例"
//下載狀態(tài)
@State downloadState: string = ""
//當前下載速度
@State downloadSpeed: string = ""
//下載文件保存位置
@State downloadPath: string = ""
//下載進度
@State downloadProgress: number = 0
//要加載的網(wǎng)址
@State webUrl: string = ""
scroller: Scroller = new Scroller()
controller: web_webview.WebviewController = new web_webview.WebviewController()
build() {
Row() {
Column() {
Text(this.title)
.fontSize(14)
.fontWeight(FontWeight.Bold)
.width('100%')
.textAlign(TextAlign.Center)
.padding(10)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Text("網(wǎng)址：")
.fontSize(14)
.width(50)
.flexGrow(0)
TextInput({ text: this.webUrl })
.onChange((value) => {
this.webUrl = value
})
.width(110)
.fontSize(11)
.flexGrow(1)
Button("加載")
.onClick(() => {
this.controller.loadUrl(this.webUrl);
this.controller.setDownloadDelegate(this.buildDownloadDelegate())
})
.width(60)
.fontSize(14)
.flexGrow(0)
}
.width('100%')
.padding(5)
Scroll(this.scroller) {
Web({ src: "", controller: this.controller })
.padding(10)
.width('100%')
.textZoomRatio(150)
.backgroundColor(0xeeeeee)
}
.align(Alignment.Top)
.backgroundColor(0xeeeeee)
.height(300)
.flexGrow(1)
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.On)
.scrollBarWidth(20)
Progress({ total: 100, type: ProgressType.Linear, value: this.downloadProgress })
Text(this.downloadPath)
.fontSize(11)
.width('100%')
.padding(5)
Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) {
Text(this.downloadState)
.fontSize(11)
Divider().vertical(true).height(15).width(10)
Text(this.downloadSpeed)
.fontSize(11)
}
.width('100%')
.padding(5)
}
.width('100%')
.justifyContent(FlexAlign.Start)
.height('100%')
}
.height('100%')
}
//創(chuàng)建web組件下載狀態(tài)回調(diào)的委托
buildDownloadDelegate() {
let downloadDelegate: webview.WebDownloadDelegate = new webview.WebDownloadDelegate();
//下載前的回調(diào)
downloadDelegate.onBeforeDownload((webDownloadItem: webview.WebDownloadItem) => {
//下載文件保存位置
let localFilePath = getContext(this).cacheDir + "/" + webDownloadItem.getSuggestedFileName()
webDownloadItem.start(localFilePath);
this.downloadState = "開始下載"
this.downloadPath = `保存位置：${localFilePath}`
})
//下載過程中的通知
downloadDelegate.onDownloadUpdated((webDownloadItem: webview.WebDownloadItem) => {
this.downloadState = "正在下載"
this.downloadProgress = webDownloadItem.getPercentComplete()
this.downloadSpeed = `當前下載速度:${webDownloadItem.getCurrentSpeed()}比特/秒`
})
//下載失敗的通知
downloadDelegate.onDownloadFailed(() => {
this.downloadState = `下載失敗`
})
//下載完成的通知
downloadDelegate.onDownloadFinish(() => {
this.downloadState = "下載完成"
})
return downloadDelegate
}
}
步驟4：編譯運行男杈，可以使用模擬器或者真機丈屹。
步驟5：按照本節(jié)第2部分“web組件文件下載演示”操作即可。
4. 代碼分析
本示例關(guān)鍵點在于構(gòu)造web組件的下載委托伶棒，通過委托的onBeforeDownload回調(diào)設(shè)置下載文件的保存位置旺垒，并通過webDownloadItem的start方法開始下載。
downloadDelegate.onBeforeDownload((webDownloadItem: webview.WebDownloadItem) => {
//下載文件保存位置
let localFilePath = getContext(this).cacheDir + "/" + webDownloadItem.getSuggestedFileName()
webDownloadItem.start(localFilePath);
this.downloadState = "開始下載"
this.downloadPath = `保存位置：${localFilePath}`
})
（本文作者原創(chuàng)肤无，除非明確授權(quán)禁止轉(zhuǎn)載）
本文源碼地址：
https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/web/DownloadInWeb
