影视网站设计,兼职做放单主持那个网站好,对网站建设有什么样意见,wordpress模板导航1. web组件文件下载能力简介
在本系列的第22篇文章#xff0c;介绍了web组件的文件上传能力#xff0c;同样的#xff0c;web组件也具备文件下载能力#xff0c;鸿蒙API提供了处理web组件下载事件的委托类型WebDownloadDelegate#xff0c;该类型包括四个下载事件的回调接…1. web组件文件下载能力简介
在本系列的第22篇文章介绍了web组件的文件上传能力同样的web组件也具备文件下载能力鸿蒙API提供了处理web组件下载事件的委托类型WebDownloadDelegate该类型包括四个下载事件的回调接口
class WebDownloadDelegate {
//下载开始前通知用户用户需要在此接口中调用WebDownloadItem.start提供下载路径
onBeforeDownload(callback: CallbackWebDownloadItem): void//下载过程中的回调
onDownloadUpdated(callback: CallbackWebDownloadItem): void//下载完成后的回调
onDownloadFinish(callback: CallbackWebDownloadItem): void//下载失败时的回调
onDownloadFailed(callback: CallbackWebDownloadItem): void
}web组件的控制器类WebviewController提供了设置web组件下载事件委托的方法setDownloadDelegate
setDownloadDelegate(delegate: WebDownloadDelegate): voidweb组件在下载状态变化时会自动调用委托中的对应回调函数。
本文将通过一个示例演示web组件的下载能力通过进度条展示下载进度的变化。
2. web组件文件下载演示
本示例运行后的界面如图所示 输入要浏览的网页地址然后单击“加载”按钮加载网页加载成功后单击要下载文件的超链接即可开始下载如图所示 这里我们下载的是哔哩哔哩网站的安卓版客户端在应用的下载展示了下载的位置和当前的进度以及下载速度。下载完毕的界面如图所示 这样就完成了web组件的下载功能演示。
3. web组件文件下载示例编写
下面详细介绍创建该示例的步骤。
步骤1创建Empty Ability项目。
步骤2在module.json5配置文件加上对权限的声明
requestPermissions: [{name: ohos.permission.INTERNET}]这里添加了访问互联网的权限。
步骤3在Index.ets文件里添加如下的代码
import webview from ohos.web.webview;
import web_webview from ohos.web.webviewEntry
Component
struct Index {State title: string Web组件文件下载示例//下载状态State downloadState: string //当前下载速度State downloadSpeed: string //下载文件保存位置State downloadPath: string //下载进度State downloadProgress: number 0//要加载的网址State webUrl: string https://app.bilibili.com/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(网址).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%)}//创建web组件下载状态回调的委托buildDownloadDelegate() {let downloadDelegate: webview.WebDownloadDelegate new webview.WebDownloadDelegate();//下载前的回调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按照本节第2部分“web组件文件下载演示”操作即可。
4. 代码分析
本示例关键点在于构造web组件的下载委托通过委托的onBeforeDownload回调设置下载文件的保存位置并通过webDownloadItem的start方法开始下载。 downloadDelegate.onBeforeDownload((webDownloadItem: webview.WebDownloadItem) {//下载文件保存位置let localFilePath getContext(this).cacheDir / webDownloadItem.getSuggestedFileName()webDownloadItem.start(localFilePath);this.downloadState 开始下载this.downloadPath 保存位置${localFilePath}})本文作者原创除非明确授权禁止转载
本文源码地址 https://gitee.com/zl3624/harmonyos_network_samples/tree/master/code/web/DownloadInWeb
本系列源码地址 https://gitee.com/zl3624/harmonyos_network_samples
