APP首次登陆下载远程图片进行缓存

平台：Hbuilder 、 mui

问题描述：APP首页加载过慢

原因：因为首页是需要在后台配置的，因此首页的数据是从远程获取的，因此所有图片(几十张)全部为远程地址，加起来有几兆甚至十几兆大小。

解决办法：首次打开APP将首页图片下载到本地，之后则直接从本地获取对应图片即可

我的思路：进入首页前先缓存图片，缓存完之后，确认图片全部已经下载完成之后，再进入首页。（如果不确认下载完成的话进入首页可能出现个别图片不显示的问题）

// 参数为远程地址，返回本地存储的路径(含文件名)
function get_pic_url(net_url){
    // 1. 转换网络图片地址为本地缓存图片路径，判断该图片是否存在本地缓存
    var image_url           = encodeURI(net_url);// 解决中文名文件无法下载问题
    var image_md5           = hex_md5(image_url);// url加密后作为文件名，md5加密的js自行搜索下载
    var local_image_url     = '_downloads/tlcache_image/'+image_md5+'.jpg';// 缓存本地图片url  tlcache_image/(md5).jpg
    var absolute_image_path = plus.io.convertLocalFileSystemURL(local_image_url);// 本地绝对路径
    if (plus.os.name == 'iOS') {
            absolute_image_path = 'file://' + absolute_image_path;//ios平台必须加上这个参数，否则会报错:编码错误
    }

    // 判断本地是否存在该文件，存在就就直接使用，否则就下载
    plus.io.resolveLocalFileSystemURL( absolute_image_path, function( entry ) {
        if(!entry){
            download_img();
        }
    }, function ( e ) {
        console.log("Resolve file URL failed: ");
        download_img();
    } );
    function download_img(){
        // filename:下载任务在本地保存的文件路径
        var download_task = plus.downloader.createDownload(image_url, {
            filename: local_image_url
        }, function(download, status) {
            // 下载失败,删除本地临时文件
            if(status != 200){
                console.log('下载失败,status'+status);
                if(local_image_url != null){
                    plus.io.resolveLocalFileSystemURL(absolute_image_path, function(entry) {
                        entry.remove(function(entry) {
                            console.log("临时文件删除成功" + local_image_url);
                            download_img();// 重新下载图片
                        }, function(e) {
                            console.log("临时文件删除失败" + local_image_url);
                        });
                    });
                }
            }else{
                console.log("下载成功" + local_image_url);
            }
        });
        download_task.start();
    }
    return absolute_image_path;
}

注意:

        1.文件存储路径有限制，查看 DownloadOptions 如果一般路径安卓应该没问题，但是下载的话ios只能下载到指定的目录下的。

        2.远程文件地址有中文的话需要通过 encodeURI() 转码

        3.ios系统判断文件是否存在的话需要在路径前加上"file://"，否则会报错

        4.本文参考:  Vue+mui实现图片的本地缓存 、 Hbuilder官方文档 

相关方法：
　　plus.nativeUI.showWaiting("正在加载...");//显示等待框
　　plus.nativeUI.closeWaiting();//关闭所有等待框

　　plus.downloader.clear();//清除全部下载状态

　　plus.downloader.enumerate( function ( tasks ) { //查询当前所有下载任务状态，查看文档
　　　　if(tasks.length>0){
　　　　　　console.log('部分下载任务尚未下载完成');
　　　　}else{
　　　　　　console.log('所有下载任务均已完成');
　　　　}
　　});

　　plus.io.resolveLocalFileSystemURL( path, function( entry ) {// 判断 path(目录或文件) 是否存在
　　　　console.log('存在');
　　}, function ( e ) {
　　　　console.log('目录或文件不存在');
　　} );

　　JavaScript是单线程执行的(相当于一个队列)，因此setTimeout(function(){}, 1000); 并不是异步执行，只是在指定的时间后将内部方法加入到队列中。所以如果前面还有很多排队的方法的话是不会立即执行的。 点击查看详细说明

 

 

其它问题：

　　上面只是解决远程图片缓存的问题，另外针对页面还有预加载方法

　　预加载：进入父页面时就开始提前加载子页面内容，使之后进入时不用等待加载
　　　　mui.init({
　　　　　　preloadPages:[{
　　　　　　　　url:'cover.html',//需要预加载的页面
　　　　　　　　id:'cover.html',
　　　　　　　　styles: {
　　　　　　　　　　top: '0px', //新页面顶部位置
　　　　　　　　　　bottom: '0px', //新页面底部位置
　　　　　　　　　　width: '100%', //新页面宽度，默认为100%
　　　　　　　　　　height: '100%' //新页面高度，默认为100%
　　　　　　　　},
　　　　　　　　subpages:[{//预加载页面的子页面（可选）
　　　　　　　　　　url:'home.html',
　　　　　　　　　　id:'home.html',
　　　　　　　　　　styles: { },
　　　　　　　　}]
　　　　　　}]
　　　　});