微信小程序 基础 - 19 （登录后用户头像的更新）

上传更新头像的业务流程：

        1.客户端点击头像选择头像图片

wx.chooseImage()

        2.将头像图片上传到服务器, 并且获取访问该头像图片的网络路径.

        3.将该网络路径, 与当前用户绑定在一起存入数据库

        4.在下次登录时, 获取到最新的头像路径, 就可以看到新头像了

云开发-云存储

        云存储相当于网络云盘, 可以将本地文件上传存入云存储, 也可以在需要的时候从云存储空间将文件下载到本地.

        通过小程序提供的API实现图片上传

wx.cloud.uploadFile()

云开发-云函数

云函数是在小程序端定义, 部署到云端, 在云端执行的函数. 可以将云函数当做是nodejs接口进行调用, 流程:

1. 小程序使用相关API调用一个已经部署了的云函数.

2. 执行相应云函数代码, 返回结果.

3. 小程序端接收云函数返回的结果, 执行后续业务.

例如：编写一个云函数，部署到云服务器，在小程序端调用.

1. 编写一个云函数

   右键cloudFunctions, 选择新建Nodejs云函数即可. (起个云函数名)

2. 部署到云服务器

   右键云函数文件夹, 选择上传并部署(云端安装依赖).

3. 在小程序端调用

wx.cloud.callFunction()

// pages/me/me.js
const db = wx.cloud.database({
  env: '......',
})

Page({
  data: {
    nickname: '点击登录',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
    islogin: false
  },

  //点击头像，选择图片，更新头像路径到数据库
  tapAvatar() {
    if (!this.data.islogin) {
      return
    }
    wx.chooseImage({
      count: 1,
      success: (res) => {
        console.log(res)
        let temPath = res.tempFilePaths[0]
        this.setData({
          avatar: temPath
        })
        //将图片存到服务器（云存储）、更新到数据库中
        this.uploadFile(temPath)
      }
    })
  },
  //上传文件
  uploadFile(temPath) {
    //根据temPath，生成一个随机的图片名称，用于设置云端存储路径
    let ext = temPath.substring(temPath.lastIndexOf('.'))
    let cloudPath = 'img_' + Math.random() + ext
    wx.cloud.uploadFile({
      filePath: temPath,
      cloudPath: cloudPath,
      success: (res) => {
        console.log(res)
        let fileId = res.fileID
        this.updateAvatar(fileId) //更新当前用户头像路径
      }
    })
  },
  //更新云数据库中，当前用户的头像路径
  updateAvatar(fileId) {
    //云函数，获取openid
    wx.cloud.callFunction({
      name: 'sum',
      data: {
        a: 1,
        b: 1
      }
    }).then(res => {
      console.log(res)
      let openid = res.result.openid
      db.collection('users').where({
        _openid:openid
      }).update({
        data:{
          avatarUrl:fileId
        }
      }).then(res=>{
        console.log(res)
      }).catch(err=>{
        console.warn(err)
      })
    })   
  },
})

// 云函数入口文件   cloudfunctions/sum/index.js
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return {
    event,
    openid: wxContext.OPENID,
    appid: wxContext.APPID,
    unionid: wxContext.UNIONID,
  }
}