这次超人鸭实现的功能就是在小程序中可以让用户选择自己的背景图片作为展示，并且可以替换。
先看看图:

image.png

1.当第一次使用的时候没有背景图就会让用户选择。
2.点击后就可以选择文件中的照片作为背景图。

image.png

image.png

1.云开发相关第一项：云存储

image.png

腾讯为每个开发者提供了5g的免费容量，用户可以在小程序端上传文件到云存储进行保存，保存成功后云存储会返回一个真实的文件路径，最常用的就是用来存储照片。

2.云开发相关第二项: 云数据库

image.png

用户可以在小程序端操作云数据库执行增删改查操作，而且在小程序端，数据库的集合的权限默认是仅创建者可读写的，也就是说，不同的用户往同个集合里面存信息，但是能读到的只有自己存进去的，别人是访问不了的，这也是我开发这个功能需要的模式

image.png

这就是实现更换背景图用到的两个小程序云开发相关，下面讲如何实现。

• 1.首先要分两种情况，用户第一次设置背景图和非第一次设置背景图,第一次设置是往数据库里面添加数据，非第一次就是更新数据，替换图片。
• 2.流程从用户点击设置背景图开始，先用用户选择图片，然后把图片保存到云存储里面，再把云存储返回的文件路径存储到数据库中，存储成功后读取数据库，把文件路径赋值给data里面的变量。
  这是大致的思路，下面结合代码讲具体实现
• 1.wxml

  <view class="bg-box">
    <view class="profile-tip flex-c-c" catchtap="chooseImg" wx:if="{{!bgImg}}"> // 通过是否有背景图控制出现隐藏
      <text class="iconfont icon-tupian"></text>
      <text class="tip-text">选择你的背景图吧</text>
    </view>
    <image wx:if="{{bgImg}}" src="{{bgImg}}" class="bgImg" catchtap="updateImg" mode="aspectFill"></image>
  </view>

css就不贴出来了。

• 2.js
  第一步从用户点击选择图片开始:chooseImg,下面会涉及到挺多小程序的api，我会结合注释，要是不明白可以到官网查阅

  chooseImg() {  // 用户点击选择图片
    wx.chooseImage({  // 这个api为让用户从文件中选择图片
      count: 1,  // 选择的照片数，只能一张
      sizeType: ['original', 'compressed'],  // 选择原图或是压缩图
      sourceType: ['album'],  // 从相册中选择，还可以再写一个选项通过拍照
      success: (res) => {  // 选择成功后,会返回一个数组，这个数组保存了照片的临时路径
        wx.showLoading({
          title: '加载中',
        })
        let tempFilePath = res.tempFilePaths[0]    // 因为我只存一张，所以是[0],获取这个图片的临时路径
        let suffix = /\.\w+$/.exec(tempFilePath)[0]   // 获取图片拓展名,供保存到云存储使用
        wx.cloud.uploadFile({   // 存储到云存储上
          cloudPath: 'bgImg/' + Date.now() + '-' + Math.random() + suffix,  // 保存的路径,为了名字防止重复
          filePath: tempFilePath,  // 文件的路径
          success: (res) => {  // 存储成功
            let fileID = res.fileID  // 拿到存储在云存储的图片id
            this.setDbImg(fileID)  // 执行存储到数据库的方法
          }
        })
      }
    })
  },

这是第一步的代码，里面注意的是，做背景图的功能一次只能存储一张图片，然后存储到云存储的时候先要在云存储的控制台上创建好文件夹,存储成功后就可以到云存储上刷新看是否成功：

image.png

const db = wx.cloud.database();  // 下面涉及到数据库的操作都要通过这个db来操作

  setDbImg(fileID) {
    // 同样，要现在云数据库的控制台上创建一个集合，通过.collection来操作集合
    db.collection('bgImg').get().then((res) => {  // 查询集合的数据
      let data = res.data
      if(data.length === 0) {  // 如果是第一次存直接添加
        db.collection('bgImg').add({
          data: {
            bgImg: fileID  // 将上面传下来的图片路径保存
          }
        }).then((res) => {
          this.getDbImg()  // 读取数据的方法，在下面执行
        })
      } else {  // 如果是第二次存就替换
        let id = data[0]._id  // 因为只能存储一张背景图，直接获取到这条数据中数据库中的_id,唯一标识
        db.collection('bgImg').doc(id).update({  // 更新数据
          data: {
            bgImg: fileID
          }
        }).then((res) => {
          this.getDbImg() // 读取数据的方法，在下面执行
        })
      }
    })
  }

这是第二步的代码，在上面说到数据库集合的权限，仅供创建者读写， db.collection('bgImg').get()是获取集合的全部数据，因为设置了权限，所以只能获取到自己的。存储成功后就是从数据库获取这个路径赋值给data里面的变量,也就是上面的getDbImg方法:

  getDbImg() {  // 从数据库获取图片
    db.collection('bgImg').get().then((res) => {
      let data = res.data
      if(data.length > 0) { // 如果有数据才能赋值
        this.setData({
          bgImg: data[0].bgImg  // data里面的变量,赋值给wxml的image标签的src展示
        })
        wx.hideLoading()
      }
    })
  },

这就是完整的设置流程，然后我们一进页面的时候就要从数据库中获取图片路径展示，所以在onLoad的时候:

  onLoad: function (options) {
    this.getDbImg()
  }

如果用户还没设置用背景图，也就说数据库里面还没有数据，那么data的bgImg就会为空，就会展示:

image.png

然后当有了图片想替换的时候，给个提示后同样是执行上面的流程

  updateImg() {  // 更换背景图
    wx.showModal({
      title: '提示',
      content: '更换背景图?',
      success: (res) => {
        if (res.confirm) {  // 用户点击了确定
          this.chooseImg()  // 去选择图片
        }
        if (res.cancel) {
          return
        }
      }
    })
  },

这就是完整的实现流程，下面我将完整的js代码贴出来:

const db = wx.cloud.database();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    bgImg: ''
  },
  // 选择背景图
  chooseImg() {
    var fileID;
    wx.chooseImage({
      count: 1,  // 选择的照片数，只能一张
      sizeType: ['original', 'compressed'],
      sourceType: ['album'],
      success: (res) => {
        wx.showLoading({
          title: '加载中',
        })
        let tempFilePath = res.tempFilePaths[0] // 返回的临时路径是一个数组
        let suffix = /\.\w+$/.exec(tempFilePath)[0]  // 获取图片拓展名
        wx.cloud.uploadFile({
          cloudPath: 'bgImg/' + Date.now() + '-' + Math.random() + suffix,
          filePath: tempFilePath,
          success: (res) => {
            fileID = res.fileID  // 拿到存储在云存储的图片id
            this.setDbImg(fileID)
          }
        })
      }
    })
  },
  setDbImg(fileID) {  // 存储数据库
    db.collection('bgImg').get().then((res) => {
      let data = res.data
      if(data.length === 0) {  // 如果是第一次存直接添加
        db.collection('bgImg').add({
          data: {
            bgImg: fileID
          }
        }).then((res) => {
          this.getDbImg()
        })
      } else {  // 如果是第二次存就替换
        let id = data[0]._id
        db.collection('bgImg').doc(id).update({
          data: {
            bgImg: fileID
          }
        }).then((res) => {
          this.getDbImg()
        })
      }
    })
  },
  getDbImg() {  // 从数据库获取图片
    db.collection('bgImg').get().then((res) => {
      let data = res.data
      if(data.length > 0) {
        this.setData({
          bgImg: data[0].bgImg
        })
        wx.hideLoading()
      }
    })
  },
  updateImg() {  // 更换背景图
    wx.showModal({
      title: '提示',
      content: '更换背景图?',
      confirmColor: '#6595e9',
      success: (res) => {
        if (res.confirm) {
          this.chooseImg()
        }
        if (res.cancel) {
          return
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getDbImg()
  }
})

这是超人鸭学到云开发的时候冒出来的想法，应该有更好的方法来实现这个功能，欢迎大家指教哦，下面贴一个在手机上的效果:

image.png