uniapp缓存音视频（安卓&IOS）

使用场景/需求：

在App中，有时候需要缓存一些数据，比如启动页启动视频，启动图片等，这些数据在每次启动App时加载比较耗时，体验不好，如果缓存起来，下次启动App时可以直接读取缓存数据，提高启动速度。

解决方案：

Html5+提供了plus中的Io模块，可以用来实现缓存，可以将数据存储在本地，在下次进入App时，可以直接读取缓存数据。

注意事项：

• 缓存数据在App卸载、清除App数据、在终端文件管理器删除缓存文件后，需要重新判断是否进行获取。
• 也可以仅在WIFI下，或其他场景下进行操作。
• 本文不对plus.io模块进行深入介绍，具体使用方法请参考文末官方文档链接。

步骤：

1. 在App.vue中，判断是否进行缓存操作，如果需要缓存，则进行如下操作：

先下载视频数据到终端，后进行缓存操作

onLaunch: function () {
    // #ifdef APP-PLUS
    // 获取视频下载地址
    let videoUrl = 'http://www.xxx.com/xxx.mp4'

    // 缓存数据存放目录
     let saveStartPageFilePath = "startPageFileCache"

    // 创建下载任务(含缓存步骤)
    let downloadTak = plus.downloader.createDownload(videoUrl, {}, function(d, status){
        // 下载完成
        if(status == 200){
        console.log("Download success: " + d.filename);
        // 将下载的视频数据转换为本地文件路径
        fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);

        // 执行缓存
        // plus.io.PRIVATE_DOC：为本App私有文件夹
        plus.io.requestFileSystem( plus.io.PRIVATE_DOC, function( fs ) {
            // 可通过fs操作PRIVATE_DOC文件系统
            // 没有saveStartPageFilePath路径，则创建
            fs.root.getFile(saveStartPageFilePath, {create: true}, function( fileEntry ) {
            // 可通过fileEntry操作文件
            fileEntry.createWriter( function( fileWriter ) {
                // 开始写入到saveStartPageFilePath
                fileWriter.write(fileSaveUrl);
                // 可通过fileWriter操作文件
                // 写入完成事件
                fileWriter.onwrite = function( e ) {
                    console.log( 'Write completed.' );
                    // 存入Strorage,当前视频名称和上次视频名称（如果有上次）
                    uni.setStorageSync('startPageFileCache', {name: saveStartPageFilePath, oldName: cacheStatus.name})
                };
                // 写入失败事件
                fileWriter.onerror = function( e ) {
                    console.log( 'Write failed:'+ e.toString() );
                }
            })
            })
        }, function ( e ) {
            console.log( "Request file system failed: " + e.message)
        } );
        }else{
        console.log("Download failed: " + status);
        }
    });


    // 执行下载任务
    downloadTak.setRequestHeader('response-type', 'bolb')
    downloadTak.start();
  // #endif

2. 在启动视频页面中： 读取缓存数据，进行播放

判断是否已经存在当前启动视频的缓存，如果存在，则直接读取缓存数据进行播放、展示，如果不存在，则进直接进入App首页

// #ifdef APP-PLUS
// 获取缓存数据
    readCache(item) {
      let that = this
      let cacheStatus = uni.getStorageSync('startPageFileCache')
      if (!cacheStatus) {
        // 直接跳转会跳不过去
        setTimeout(() => {
          uni.switchTab({url: '/pages/index/index'})
        }, 50)
      } else {
        // 读取App私有文件夹
        plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function (fs) {
          // 获取缓存时候存储的名称
          fs.root.getFile(cacheStatus.name, {create: false}, function (fileEntry) {
            fileEntry.file(function (file) {
              var fileReader = new plus.io.FileReader();
              fileReader.readAsText(file, "UTF-8");
              fileReader.onloadend = function () {
                // 缓存视频文件路径，可以直接拿到video中播放
                console.log(fileReader.result)
                that.playUrl = fileReader.result
              }
            })
          })
        }, function (e) {
          console.log("Request file system failed: " + e.message)
        });
      }
    }
// #endif

3. 删除旧的缓存视频数据

在后台进行启动视频替换后，删除旧的缓存视频数据，防止缓存数据过多占用空间。 在首页进行删除操作， 已在第一步缓存步骤中记录了新旧视频名称，再和接口对比可放心删除指定文件。

// #ifdef APP-PLUS
    removeCache() {
      let cacheStatus = uni.getStorageSync('startPageFileCache')
      console.log(cacheStatus)
      if (cacheStatus && cacheStatus.oldName) {
        if (cacheStatus.oldName === cacheStatus.name) {
          console.log('新旧视频一致， 不删除')
          return
        }
        console.log('执行删除缓存..')
        plus.io.requestFileSystem( plus.io.PRIVATE_DOC, function( fs ) {
          let name = cacheStatus.oldName.split('/')
          let dirPath = fs.root.toURL() + '/' + name[0] + '/' + name[1]
          console.log(dirPath, "<<<dir")
          plus.io.resolveLocalFileSystemURL(dirPath, function(entry) {
            console.log(entry)
            //读取这个目录对象
            var directoryReader = entry.createReader();
            //读取这个目录下的所有文件
            directoryReader.readEntries(function(entries) {
              console.log("entries", entries)
              if (entries.length > 0) {
                entry.removeRecursively(function (entry) {
                      console.log("删除成功")
                    },
                    function (e) {
                      console.log("删除失败")
                    })
              } else {
                console.log('缓存不存在')
              }
            })
          })
        })
      }
    }
// #endif

以上，基本是Uniapp执行缓存,读取使用缓存，删除缓存的代码； 可以根据此笔记，进行相关的开发。

如有其它疑问，需要作者的帮助，随时联系（有偿）

联系邮箱：[email protected]

html5+地址：www.html5plus.org/doc/zh_cn/i...