OpenHarmony——JS API 之下载原创精华

深开鸿

发布于 2022-4-21 10:45

浏览

4收藏

1.前言

本文主要是对于开发文档 JS API 中下载部分的粗略见解和项目实践，方便更快的切入开发工作，构建应用，对应文档链接：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-request-0000001123753962#section22193548205

2.API 简介:

2.1使用前准备工作

引入依赖：import request from ‘@ohos.request’;

配置权限：在config.json文件中配置如下权限：

OpenHarmony——JS API 之下载-鸿蒙开发者社区

注意：默认支持https，如果要支持http，需要在config.json里增加network标签，属性标识 “cleartextTraffic”: true。即：

"deviceConfig": {
    "default": {
        "network": {
            "cleartextTraffic": true
        }
    }
},

2.2入参配置和下载任务信息列表

（1）入参配置 DownloadConfig 如下表：

名称	类型	必填	说明
url	string	是	资源地址。
header	object	否	添加要包含在下载请求中的HTTP或HTTPS标志头。
enableMetered	boolean	否	允许在按流量计费的连接下下载。
enableRoaming	boolean	否	允许在漫游网络中下载。
description	string	否	设置下载会话的描述。
filePath (BETA)7+	string	否	设置下载路径（默认在internal://cache/路径下）。filePath:‘workspace/test.txt’：默认路径下创建workspace路径，并将文件存储在workspace路径下。filePath:‘test.txt’：将文件存储在默认路径下。filePath:‘workspace/’：默认路径下创建workspace路径，并将文件存储在workspace路径下。
networkType	number	否	设置允许下载的网络类型。
title	string	否	设置下载会话标题。

（2）下载任务信息列表 DownloadInfo 如下图：

名称	类型	必填	说明
downloadId	number	是	下载的文件ID。
failedReason	number	否	下载失败原因，可以是任何ERROR_*常量。
fileName	string	是	下载的文件名。
filePath	string	是	存储文件的URI。
pausedReason	number	否	会话暂停的原因，可以是任何PAUSED_*常量。
status	number	是	下载状态代码，可以是任何SESSION_*常量。
targetURI	string	是	下载文件的URI。
downloadTitle	string	是	下载的文件的标题。
downloadTotalBytes	number	是	下载的文件的总大小（int bytes）。
description	string	是	待下载文件的描述信息。
downloadedBytes	number	是	实时下载大小（int bytes）。

2.3 下载API 中方法

下载API 中的方法和事件监听如下图：由于条件所限，本次只谈API 6 及以下方法。

OpenHarmony——JS API 之下载-鸿蒙开发者社区

2.3.1 request.download

作为下载的核心 request.download 有两种使用方式，分别为

（1）使用promise形式返回结果，如下：

request.download({ url: 'https://xxxx/xxxx.hap' }).then((data) => {
    downloadTask = data;
}).catch((err) => {
    console.error('Failed to request the download. Cause: ' + JSON.stringify(err));
})

（2) 使用callback形式返回结果,如下：

request.download({ url: 'https://xxxx/xxxxx.hap', 
                  filePath: 'xxx/xxxxx.hap'}, (err, data) => {
    if (err) {
        console.error('Failed to request the download. Cause: ' + JSON.stringify(err));
        return;
    }
    downloadTask = data;
});

以上两种均为异步方法。

2.3.2 on(‘progress’)

开启下载任务监听，异步方法，使用callback形式返回结果。此方法可以用来配合界面直观形象的展示下载进度。

参数：

参数名	参数类型	必填	说明
type	string	是	取消订阅的事件类型，取值为’progress’（下载的进度信息）。
callback	function	否	下载任务的回调函数。

回调函数的参数：

参数名	类型	必填	说明
receivedSize	number	是	当前下载的进度。
totalSize	number	是	下载文件的总大小。

示例：

request.download({ url: 'https://xxxx/xxxx.hap' }, (err, data)=> {  
    if (err) {               
    	console.error('Fail to request download. Cause:' + err);       
    	return;    
    }    
    downloadTask = data;        
    downloadTask .off('progress', download_callback);
});

download_callback(receivedSize, totalSize) {   
	console.info("download receivedSize:" + receivedSize + " totalSize:" + totalSize);
}

2.3.3 off(‘progress’)

关闭下载任务监听，异步方法，使用callback形式返回结果。

参数：

参数名	参数类型	必填	说明
type	string	是	取消订阅的事件类型，取值为’progress’（下载的进度信息）。
callback	function	否	下载任务的回调函数。

回调函数的参数：

参数名	类型	必填	说明
receivedSize	number	是	当前下载的进度。
totalSize	number	是	下载文件的总大小。

示例：

request.download({ url: 'https://xxxx/xxxx.hap' }, (err, data)=> {     
    if (err) {               
    	console.error('Fail to request download. Cause:' + err);       
    	return;   
    }    
    downloadTask = data;       
    downloadTask .off('progress', download_callback);
});

download_callback(receivedSize, totalSize) {   
	console.info("download receivedSize:" + receivedSize + " totalSize:" + totalSize);
}

2.3.4 remove

移除下载的任务，同样为异步方法，根据返回结果的形式不同，同样分为两种

（1）使用promise形式返回结果

downloadTask.remove().then((result) => {
    if (result) {
        console.info('Download task removed.');
    } else {
        console.error('Failed to remove the download task.');
    }
}).catch ((err) => {
    console.error('Failed to remove the download task.');
});

（2）使用callback形式返回结果

downloadTask.remove((err, result)=>{
    if(err) {
        console.error('Failed to remove the download task.');
        return;
    } 
    if (result) {
        console.info('Download task removed.');
    } else {
        console.error('Failed to remove the download task.');
    } 
});

3.项目实践

3.1需求

OpenHarmony——JS API 之下载-鸿蒙开发者社区

如上图所示，本次需求有安装，更新（两者均需单次下载）以及一键升级（为批量下载），安装下载又分为几个阶段：分别为等待安装，正在验证，正在安装和进度显示，如下图：

OpenHarmony——JS API 之下载-鸿蒙开发者社区

3.2实现方式

3.2.1 hml 界面采用按钮和 div 定位的方式布局。如下图

<div class="btn-box">
    <button class="btn"
            @click="clickBtn(item,index)">{{ item.btnText }}
    </button>

    <div class="btn-bg"
         style="width :{{item.process}}%;"
         if="{{ item.state == 'download' || item.state == 'upgradeable' }}"
            >
    </div>
</div>

将div 覆盖到按钮上，让当前下载进度和 div的宽度绑定，下载过程中就会展现具体的下载进度，从而慢慢填满按钮。

3.2.2 js 实现逻辑

(1) 一键升级

遍历当前页面应用列表，查找 state == “upgradeable” 的应用，将其下标 push进待安装数据，将其状态改为待安装，按钮文本改为待安装

如果当前没有正在下载安装的应用，将hasInstalling赋值为true，执行按顺序下载方法。如下示例

upgrade() {
    this.pageStoreArr.forEach((item, i) => {
        if (item.state == "upgradeable") {
            this.waitingInstsllData.push(i);
            this.pageStoreArr[i].btnText = this.$t("strings.WaitingForInstall");
            this.pageStoreArr[i].state = "waitingInstsll";
        }
    })
    if(!this.hasInstalling && this.pageStoreArr.length>0){//没有正在执行的安装任务
        this.hasInstalling =true;
        this.orderInstallApp();
    }
 },

（2）按顺序下载

将当前待安装数据的第一个赋值给正在下载下标，获取当前需要下载的应用下载地址，如果待安装数据length为0，将hasInstalling赋值为false

//按点击顺序下载
orderInstallApp() {
    this.installIndex=this.waitingInstsllData[0];
    this.getAppDownloadUrl(this.pageStoreArr[this.installIndex].appID);
    if(this.waitingInstsllData.length==0){
        this.hasInstalling=false;
    }
},

（3）下载

调用下载 api，进行下载进度监听，再监听回调中，处理当前正在操作的按钮状态以及安装应用

//下载
downloadApp(url) {
   request.download({ url: url }, (err, data)=> {
       if (err) {
           console.error('Fail to request download. Cause:' + err);
           return;
       }
       let downloadTask = data;
       downloadTask.on('progress', this.download_callback);
   });
},

（4）下载进度监听回调

在回调函数中有两个入参，当前下载大小，和应用总大小，用两者比值在界面显示下载进度，将当前按钮 state = “install”，下载完毕后，将状态改为正在验证，随后开始安装应用，安装完毕后，继续执行遍历下载方法，如下示例：

download_callback(receivedSize, totalSize) {
    console.info("下载那个："+this.installIndex)
        let percent=(receivedSize / totalSize).toFixed(2) * 100;
        console.info("下载 download receivedSize:" + receivedSize + " totalSize:" + totalSize +"percent:" +percent);
        this.pageStoreArr[this.installIndex].process= percent;
        this.pageStoreArr[this.installIndex].btnText = percent + "%";
        this.pageStoreArr[this.installIndex].state = "install";
    if (percent == 100) {
        setTimeout(() => {
            console.info('Download task completed.');
            this.pageStoreArr[this.installIndex].btnText = this.$t("strings.validating");
        }, 1000)
        setTimeout(() => {//模拟安装
            let filePaths = "internal://cache/app/d875d3fc-85d5-42df-b12a-fcfc8f964107.hap";
            //this.installApp(filePaths)//安装app
            this.pageStoreArr[this.installIndex].btnText = this.$t("strings.installing")
        }, 5000)

        setTimeout(() => {//模拟安装结束
            this.pageStoreArr[this.installIndex].state = "openable";
            this.pageStoreArr[this.installIndex].btnText=this.$t("strings.open")
            this.waitingInstsllData.shift();
            if(this.pageStoreArr.length>0){
                this.orderInstallApp();
            }
        }, 15000)
    }
},

(5)单次安装

如果当前应用为未安装或者待更新状态，点击按钮，将其下标push进待安装数据数组，将其状态改为待安装，如果当前没有下载安装任务，且待安装数据不为空，执行按顺序下载方法，否则，将其按钮文字改为等待安装，应用等待下载安装。代码如下：

clickBtn(data, index) {
    if (data.state == 'download' || data.state == 'upgradeable') {//待安装，待更新
        this.waitingInstsllData.push(index);
        this.pageStoreArr[index].state = "waitingInstsll";
        if (!this.hasInstalling && this.pageStoreArr.length>0) {
            this.hasInstalling =true;
            this.orderInstallApp();
        } else {
            this.pageStoreArr[index].btnText = this.$t("strings.WaitingForInstall");
        }
    } else if (data.state == 'openable') {//已经安装，且最新
    }
},

因为条件所限，安装只能在真机上进行，这边暂时采用模拟安装来执行按顺续下载。

以上即为本次分享的全部内容，如果不足之后，欢迎一起研究探讨。