微信小程序开发

自己最近在玩微信小程序，准备记录一些自己遇到的，网络上没有对应教程（也许是自己没找到），或者是教程比较少的问题，然后给出自己的解决方案

目录

• 微信小程序开发
• 问题
• 一、云储存是什么？
• • 云储存与文件操作常见的API
  • • 上传文件: wx.cloud.uploadFile 方法
    • 下载文件: wx.cloud.uploadFile
    • 删除文件： wx.cloud.uploadFile
• 二、解决办法
• • 1.解决思路
  • 实现代码
  • 解决这个问题的其他思路
  • 批量上传文件要解决的一个配套问题
• 总结

问题

微信小程序的云开发将后台，数据库等东西结合在了一起，然后使用一些给定的api可以快速的开发一系列项目，但是快速必然会损失一定的灵活性，在实际的创建项目中，发现无法批量的将文件上传到云储存上。下面介绍一下我的解决方法

一、云储存是什么？

云储存是腾讯提供云开发中的一个重要的功能，说白了就是储存一些诸如图片，视频，文档等文件，下面是云储存的官方介绍：

云存储提供高可用、高稳定、强安全的云端存储服务，支持任意数量和形式的非结构化数据存储，如视频和图片，并在控制台进行可视化管理。云存储包含以下功能：

• 存储管理：支持文件夹，方便文件归类。支持文件的上传、删除、移动、下载、搜索等，并可以查看文件的详情信息
• 权限设置：可以灵活设置哪些用户是否可以读写该文件夹中的文件，以保证业务的数据安全
• 上传管理：在这里可以查看文件上传历史、进度及状态
• 文件搜索：支持文件前缀名称及子目录文件的搜索
• 组件支持：支持在 image、audio 等组件中传入云文件 ID

云储存与文件操作常见的API

上传文件: wx.cloud.uploadFile 方法

wx.cloud.uploadFile({ 
  cloudPath: 'example.png', // 上传至云端的路径
  filePath: '', // 小程序临时文件路径
  success: res => { 
    // 返回文件 ID
    console.log(res.fileID)
  },
  fail: console.error
})

这个方法我们要**注意，就是微信小程序上传的是临时文件路径，这里其实就是我们的本地文件所在的路径。**也可以是wx自己生成的诸如这样的临时路径：http://tmp/wx0ffcd03a1dfdc451.o6zAJs7JDPzeAscW09c_BG24fpdU.6919dfcada671055948023075afd859a.jpg。

上传后的在云开发控制台查看到的文件如下。我打码的内容其实可是说的微信小程序的云环境的实例名，然后ID的组成就是实例名+储存文件夹+图片名。。我们云开发没有网址，其实就是那个实例名充当了网址的作用。方便了一些操作

下载文件: wx.cloud.uploadFile

 wx.cloud.uploadFile({ 
  cloudPath: 'example.png', // 上传至云端的路径
  filePath: '', // 小程序临时文件路径
  success: res => { 
    // 返回文件 ID
    console.log(res.fileID)
  },
  fail: console.error
})

删除文件： wx.cloud.uploadFile

wx.cloud.deleteFile({ 
  fileList: ['a7xzcb']//这里面是文件的ID列表
}).then(res => { 
  // handle success
  console.log(res.fileList)
}).catch(error => { 
  // handle error
})

二、解决办法

1.解决思路

我们看到微信小程序支持的文件上传是单个文件上传，且是通过小程序本身上传的，其实应用场景就是用户自己选择文件上传，这样，有类似于wx.chooseImage这样的函数。因为微信云开发弱化后端，我们没有直接操作的能力，所有我们只能借助上述的上传文件的函数，来完成我们的需要：我们主要是我们如果能获得我们要上传的文件地址，然后就可以实现文件的上传了，具体分为两步：

1. 我们在微信开发者工具里面遍历我们的资源文件夹
2. 找到我们的文件路径，递归上传

这里有一个小小的问题，微信小程序不支持windows的绝对路径的。我们可以通过’…/…/…/’这样的组合定位到我们资源文件坐在的地方，这样有一个问题就是我们我们资源文件和微信小程序有一个共同的路径。

实现代码

代码如下：

  addPicInfo:function(res){ 
    const that = this;
    var FileSystemManager=wx.getFileSystemManager();
    FileSystemManager.readdir(
      { 
        dirPath: '/新建文件夹/',
        success: function(e){ 
          console.log(e.files)
          for (let i in e.files){ 
          FileSystemManager.readdir({ 
            dirPath:'/新建文件夹/'+ e.files[i],
            success: function(e2){ 
              for (let j in e2.files){ 
              wx.cloud.uploadFile(
                { 
                  cloudPath:'./static/products/'+e.files[i]+'/'+e2.files[j],
                  filePath:'/新建文件夹/'+ e.files[i]+'/'+e2.files[j],
                  success:function()
                  { 
                    console.log(e2.files[j])
                  }
                }
              )
              }
            },
            fail: function(e){ 
              console.log(e.errMsg)
            }
          }
          )
        }
          
        },
        fail: function(e){ 
          console.log(e.errMsg)
        }
      }
    )
  },

代码解读：

1. 我在开发的时候，在某个界面设定了一个按钮，绑定了这个上传函数：addPicInfo
2. 当我们点击时，运行这个函数，先是wx.getFileSystemManager()获得了一个文件管理器的操作实例
3. 用这个文件管理器来遍历我们的文件夹：

FileSystemManager.readdir({ 
 dirPath:  '/新建文件夹/',//我这里为什么没有上文所学的../呢，是因为我把资源文件放在了小程序的开发目录下，这个在开发者工具编译模拟运行时不会出错，但真机调试会提示你代码包太大了。

 }),

4.遍历完文件上传

解决这个问题的其他思路

可以看到，核心就是把我们的微信开发者工具当成一种后台管理程序，编写代码递归上传文件。当然我们得到所要递归上传文件时，也不一定非得要在微信小程序内编写。因为我这个资源文件夹内只有一层子目录，当你的资源文件夹子目录深度不一致时，那就不好玩了，这时候，我们可以用其他的程序，比如python来获得资源文件夹的目录树，组成一个json，微信小程序直接读取json中的数据，来递归上传也是挺好的。这个在有不同子目录文件夹深度的情况下更好用

批量上传文件要解决的一个配套问题

我们要用这个文件时，一般得从数据库中找到这个文件，然后再进行操作，那就设及到批量操作数据库的问题，其实微信小程序的数据库有一个csv文件上传功能，根据我们上文说的文件ID的组成策略，我们很容易自己生成上传文件在云存储中的ID。方便我们自己使用。

总结

以上就是今天要讲的内容，本文可能略有啰嗦。写的时候，基本上想到什么就写什么了，不太在意是不是足够简洁。如果能对您有所帮助，还请点赞支持，收藏不迷路。