小西瓜的探索之旅：文件操作测试分享，wx.openDocument探索

一：文件操作：

小程序官方接口如下图：

2971057b9bd9e9b9e5ba4127733eca1d.png (4.66 KB, 下载次数: 64)

下载附件

2018-1-21 12:53 上传

针对这几个接口，做了个小demo。

// pages/service/file/index.js
Page({
  data:{
    //URL是是base64位时可以显示图片，但但download下来就有点问题
    imgSrc:',
    loading:false,
    showList:false,
    filesList:[]
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  },
  downloadFile:function(e){
    console.log(e)
    // e.currentTarget.dataset.src
    var that = this;
    that.setData({
     loading:true, 
    })
    wx.downloadFile({
      url: e.currentTarget.dataset.src, //仅为示例，并非真实的资源
      success: function(res) {
        console.log('success');
        console.log(res)
        that.setData({
          src:res.tempFilePath
        })
        show('下载成功');
      },
      fail:function(){
        console.log('fail');
      },
      complete:function(){
        console.log('complete')
            that.setData({
               loading:false, 
            })
      }
    })
  },
  uploadFile:function(){
    var that = this;
    console.log(that.data.src);
    //upload wx img 
    wx.uploadFile({
      url: 'https://String',//暂无可用URL
      filePath:that.data.src,
      name:'name',
      // header: {}, // 设置请求的 header
      // formData: {}, // HTTP 请求中其他额外的 form data
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  toLocal:function(){
    /*保存到本地 */
    /*saveFile对临时路径只能保存到本地1次。再次保存该临时路径，显示saveFile:fail file not found */
    var that =this;
    var tempFilePath = that.data.src||'';//that.data.src;//res.tempFilePath
    wx.saveFile({
      tempFilePath: tempFilePath,
      success: function(res1) {
        console.log(res1);
        var savedFilePath = res1.savedFilePath
        show('保存成功')
      },
      fail:function(res){
          console.log('fail')
          console.log(res)
          showTip();
        },
        complete: function(res) {
          console.log('complete')
          console.log(res)
        }
    })
  },
  getList:function(){
    wx.navigateTo({
      url: './files',
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  },
  openFile:function(){
    var URL =';
    var that = this
      // wx.openDocument({
      //   filePath: ',
      //   success: function (res) {
      //     console.log('打开文档成功')
      //   },
      //   fail:function(res){
      //     console.log('fail')
      //     console.log(res)
      //   },
      //   complete: function(res) {
      //     console.log('complete')
      //     console.log(res)
      //   }
      // })
    wx.downloadFile({
    url: URL,
    success: function (res) {
      var filePath = res.tempFilePath 
      wx.openDocument({
        filePath: filePath,
        success: function (res) {
          console.log('打开文档成功')
          console.log(res)
          show('打开文档成功')
        },
        fail:function(res){
          console.log('fail')
          console.log(res)
          showTip();
        },
        complete: function(res) {
          console.log('complete')
          console.log(res)
        }
      })
    },
    fail:function(res){
      console.log('fail')
      console.log(res)
    },
    complete: function(res) {
      console.log('complete')
      console.log(res)
    }
  })
  },
})
 export const show=function(tip){
    wx.showToast({
      title: tip||'成功',
      icon: 'success',
      duration: 2000
    })
  }
  export const showTip=function(tip){
    wx.showModal({
      title:'提示',
      content:tip||'操作失败！',
      showCancel:false,
    })
  }

<!--pages/service/file/index.wxml-->
<loading hidden="{{!loading}}"/>
<image  mode="top" src="{{imgSrc}}"></image>
<button bindtap="downloadFile" data-src="{{imgSrc}}">下载图片</button>
<button bindtap="toLocal">保存到本地</button>
<!--<button bindtap="uploadFile">uploadFile</button>-->
<button bindtap="getList">查看已保存文件列表</button>
<button bindtap="openFile">打开一份在线的的pdf文件</button>
<view class="tip-box">
    <view>tip:</view>
    <view>1.操作步骤：下载图片->保存到本地->查看已保存文件列表。</view>
    <view>2.下载图片的临时路径仅能保存到本地一次。</view>
    <view>3.可以多次下载图片，再每次保存到本地，就可以看到多个文件保存的记录。</view>
    <view>4.图片仅用于显示。</view>
</view>

uploadFile和downloadFile都是将文件上传/下载后存放至微信的一个临时路径， 
这个tempFilePath在其他接口上就可以用，比如播放录音、展示头像等。

今天试了一下在安卓机子上的下载与文件管理。

6705ceab7cfe5cf26d2eed306944f9cd.jpg (43.59 KB, 下载次数: 73)

下载附件

2018-1-21 12:53 上传

下载图片之后，可以看到微信文件夹中有一个tmp_的文件，这个就是下载之后的一个临时路径。

9bcd72873b909d1f77759f3af1436153.jpg (28.69 KB, 下载次数: 62)

下载附件

2018-1-21 12:53 上传

保存文件至本地，用saveFile,得到的文件是将临时文件的tmp_改为了永久文件store_

d3caab21df41d65c0cec4eee95334074.jpg (46.08 KB, 下载次数: 62)

下载附件

2018-1-21 12:53 上传

fdbd14523f2f950ccc5a0227fa2a6157.jpg (28.35 KB, 下载次数: 79)

下载附件

2018-1-21 12:53 上传

在小程序上查看已保存的文件列表，调用 getSavedFileList 
可以清晰看到文件列表上的数据，与文件夹上的一样。

e2a7323c64b3b73d240c18d8fdf0b357.jpg (35.1 KB, 下载次数: 67)

下载附件

2018-1-21 12:53 上传

其实我是用与描述相反的方式来确定微信保存在本地的文件夹的。 
不太好找，文件夹名称是wxafiles. 
在我手机上是这样，还没在别的手机上试过。 
小程序的测试只能是开发者预览效果，想要换另一部手机看效果，要么换个有开发权限的号登陆开发者工具，要么另一手机上登录微信。。。

二：探索wx.openDocument之旅

今天尝试了一下 wx.openDocument ，微信的官方接口文档对wx.openDocument接口的介绍是酱紫的...

68f8d33fdc34ec66023c671e92db6e37.png (35.12 KB, 下载次数: 81)

下载附件

2018-1-21 12:53 上传

其中filePath 说明：文件路径，可通过 downFile 获得。 
做了两个demo

wx.openDocument({
  filePath: ',
  success: function (res) {
    console.log('打开文档成功')
  },
  fail:function(res){
    console.log('fail')
    console.log(res)
  },
  complete: function(res) {
    console.log('complete')
    console.log(res)
  }
})

测试结果为：file doesn't exist...

8fed1e9c905534fca28f800cc68bfd6c.jpg (45.58 KB, 下载次数: 75)

下载附件

2018-1-21 12:53 上传

what ?! doesn't exist?

把文件放在目录下，再来段代码：

wx.openDocument({
  filePath: './123.pdf',
  success: function (res) {
    console.log('打开文档成功')
  },
  fail:function(res){
    console.log('fail')
    console.log(res)
  },
  complete: function(res) {
    console.log('complete')
    console.log(res)
  }
})

结果，还是doesn't exist.... 
还是乖点吧，跟着demo这样，先download再open

wx.downloadFile({
   url: ',
   success: function (res) {
     var filePath = res.tempFilePath 
     wx.openDocument({
       filePath: filePath,
       success: function (res) {
         console.log('打开文档成功')
         console.log(res)
       },
       fail:function(res){
         console.log('fail')
         console.log(res)
       },
       complete: function(res) {
         console.log('complete')
         console.log(res)
       }
     })
   },
   fail:function(res){
     console.log('fail')
     console.log(res)
   },
   complete: function(res) {
     console.log('complete')
     console.log(res)
   }
 })

哇塞，这霸气，还是我来感受一下~~~

b34c6790a01ea412ea04eec790c2c8f5.jpg (22.33 KB, 下载次数: 85)

下载附件

2018-1-21 12:53 上传

再看看console出来的信息

e55f633ac68ca22bdc42c9b36b1920ab.jpg (56.5 KB, 下载次数: 80)

下载附件

2018-1-21 12:53 上传

至于为什么会这样，我还没弄明白，只是知道目前是这种现象，必须先download一个在线的支持类型的文档文件，才可用 wx.openDocument 打开浏览。 
就算我download一个同目录下的123.pdf也是不行的~~

猜测是，微信不允许文件目录内的文件直接打开，因为小程序本来就大小就限制，放几份文档，这1M还得了？！ 
至于用downloadFile去download线上的文档，会不会是将线上的文档通过一层转换改成了微信app所能解析的文件，然后open就可以打开了呢？！

看来说明要改为“文件路径，必须通过 downFile 获得。”

分享一下这种现象而已， 
有大神知道原因的话请指教~