微信小程序wx.downloadFile（）使用体验
想给单位做一个小程序，实现模板文件下载的功能，方便办事群众把文件下载到手机上自行打印填写，也能提高办事效率。

不过想法是好的，截止目前2018年10月24日，微信小程序还不支持这样的功能。

wx.downloadFile()获取到的文件缓存在手机上，这个文件保存时间是很短暂的，当退出小程序的时候就会被销毁,如果想在下次打开小程序的时候还能看到这个文件，就需要使用wx.saveFile()把装载在临时地址tempFilePath中的文件保存到长期缓存中。
wx.downloadFile({
      url: 'filepath',
      header: {},
      success: function(res) {
        var tempFilePath = res.tempFilePath
        //console.log('临时文件地址是：' + tempFilePath)
        wx.saveFile({
          tempFilePath: tempFilePath,
          success: function(res) {
              var saveFilePath = res.savedFilePath   
          },//可以将saveFilePath写入到页面数据中
          fail: function(res) {},
          complete: function(res) {
            console.log('complete后的res数据：')
          },
        }) //,
      },
      fail: function(res) {
        wx.showModal({
          title: '下载失败',
          content: '请联系管理员',
        })
      },
      complete: function(res) {},
    })
}

下载图片可以通过微信小程序API提供的预览接口预览图片之后长按图片达到保存到手机的目的，但是DOC等其他类型文件就不行了，比如doc文档，只能使用wx.openDocument
wx.openDocument({
        filePath: saveFilePath,
        //就是之前的那个saveFilePath
        success: function(res){
          console.log(res)
        }
      })

这样可以打开预览，但是这个文件使用手机自带的文件查看器是不能打开的。也不能手动保存……

查了很多资料，小程wx.downloadFile(Object object)下载的pdf文件只能保存在小程序的文件目录内（藏得很深用户一般找不到），跟随小程序的删除而被清理。

图片和视频倒是可以通过api保存到系统相册中。
pdf这类的文件只能通过wx.openDocument预览的时候开启右上角转发或者引导用户复制下载链接用浏览器打开来下载。
按官方的说法下载的本地文件分三类链接地址


这里选择的是pdf下载下来让用户预览的时候自己选择是否转发保存出来。

一开始我参考了百度的方法通过 wx.downloadFile 下载临时文件wx.saveFile(Object object)保存成本地缓存文件最后wx.openDocument打开预览。但是这里我注意到一个坑官方的文档说明wx.saveFile(Object object)只能存10M



而且wx.openDocument转发的pdf文件会丢失pdf后缀直接打不开



排查了半天好像是wx.downloadFile临时文件的原因。咨询社区的方案wx.downloadFile使用fath参数将文件输出改成自定义的文件名加后缀。
//查看并下载
See_download() {
   wx.downloadFile({//下载
    url: url,//服务器上的pdf地址
    filePath: wx.env.USER_DATA_PATH + '/test.pdf',//自定义文件地址
    success: function (res) {
     var filePath = res.filePath
     wx.openDocument({//打开
      filePath: filePath,
      success: function (res) {}
     })
    }
   })
}

成功是成功了，但是wx.saveFile保存的时候报错而用wx.getSavedFileList找不到文件在哪？后续多了内存溢出怎么办？

经过一番我注意到


原来这路径实际已经保存到本地用户文件里了。直接省去wx.saveFile这一步。只要通过.readdir删除就可以了
// 删除本地文件
  deletContract() {
    try {
      let file = wx.getFileSystemManager();
      file.readdir({
        dirPath: `${wx.env.USER_DATA_PATH}`,
        success: res => {
          console.log(res);
          if (res.files.length > 2) {
            file.unlink({
              filePath: `${wx.env.USER_DATA_PATH}/${res.files[0]}`,
              complete: res => {

              }
            })
          }
        }
      })
    } catch (error) {

    }
  },

最后代码

   let that = this;
    const fileExtName = ".pdf";
    const randfile = new Date().getTime() + fileExtName;
    const newPath = `${wx.env.USER_DATA_PATH}/${randfile}`;
    that.deletContract();
    wx.downloadFile({
      url: 下载pdf的链接url,
      filePath: newPath,
      success: function (res) {
        const filePath = res.tempFilePath;
 		 wx.openDocument({
          filePath: newPath,
          showMenu: true,
          fileType: 'pdf',
          success: function (res) {}
        })
      },
      fail: function (res) {
        wx.hideLoading();
      }
    })

wx.downloadFile遇到损坏的图片，下载失败
说明

小程序获取用户微信头像过程中图片损坏，在使用wx.downloadFile下载图片的时候加上失败的回调，可以在失败回调里面setData一个默认的图片，当下载图片失败时用默认图片
注意

下载图片失败时，log里面可能会随机报一个undefined的错误，我遇到的就是下面这个


wx.downloadFile({
          url: that.data.httpsUrl + res.data.data.avatar,
          success: function(res) {
            // 下载图片成功，临时路径为res.tempFilePath
            console.log(
              'downloadFile 下载图片成功,path=' + res.tempFilePath
            );
            that.setData({
              avatar: res.tempFilePath
            });
          },
		  // 加上失败的回调
          fail: function(res) {
            // 用户头像损坏，头像下载失败，给默认头像
            console.log('头像失败', res)
            that.setData({
              avatar: '../../image/vclass/ren7@2x.png'
            });
          }
        });

今天遇到了一个问题，安卓手机上报这个错误downloadFile:fail downloadFile protocol must be http or https，调试了各种办法一直没有解决，后来发现是因为后台过来的数据有空格，但是又看不出来，最后用trim()去了空格就好了，坑爹啊！！！