微信小程序-云函数点赞业务实现

微信小程序-云函数点赞业务实现

一、效果

二、逻辑

1.用户信息存储到全局变量中

//app.js
App({
  onLaunch: function () {
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力')
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        env: 'test-3g0tlekwebabfec9',
        traceUser: true,
      })
    }


    // 将用户信息在授权登录时存储到全局变量中
    this.globalData = {}
    // ES6提供了Object.assign()，用于合并/复制对象的属性。
    try {
      // 从本地获取用户信息到全局变量中
      var value = wx.getStorageSync('userInfo')
      if (value) {
        this.globalData.userInfo = JSON.parse(value);
      }
    } catch (e) {
      console.log('app js:', '用户未登录')
    }

  }
})

2.login.js

// pages/login/login.js
var that;
const db = wx.cloud.database();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo:null,
  },
  bindGetUserInfo: function (e) {
    console.log('bindGetUserInfo:', e)
    // 获取登录信息成功
    if (e.detail.userInfo) {
      // 授权登录时调取添加用户函数
      that.addUser(e.detail.userInfo);
    } else {
      // 获取登录信息失败
      wx.showToast({
        icon: 'none',
        title: '拒绝授权',
      })
    }
  },
  addUser(userInfo) {
    wx.showLoading({
      title: '正在登录...',
    })
    // 调用登录函数
    wx.cloud.callFunction({
      name: 'login',
      data: userInfo
    }).then(res => {
      console.log('callFunction success:', res)
      
      // 用户存在
      if(res.result.code==200){
        // 将用户_openid存入页面
        userInfo._openid=res.result.userInfo._openid;
      }
      if(res.result.code==201){
        // 用户注册，并返回_openid
        userInfo._openid=res.result._openid;
      }
      // 将用户信息存储到本地
      wx.setStorage({
        data: JSON.stringify(userInfo),
        key: 'userInfo',
        success(res) {
          // 将用户信息存储到全局变量
          getApp().globalData.userInfo = userInfo;
          wx.hideLoading()
          wx.showToast({
            icon:'success',
            title: '登录成功',
          })
          wx.navigateTo({
            url: '../circle/list',
          })
        }
      })
      
    }).catch(error => {
      wx.hideLoading()
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    that = this;
    console.log("login onload:", getApp().globalData.userInfo)

    // 页面加载时判断用户是否授权登录
    if (getApp().globalData.userInfo) {
      wx.navigateTo({
        url: '../circle/list',
      })
      that.setData({
        userInfo: getApp().globalData.userInfo
      })
    }
  },
})

3.login云函数

// 云函数模板
// 部署：在 cloud-functions/login 文件夹右击选择 “上传并部署”

const cloud = require('wx-server-sdk')

// 初始化 cloud
cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  //两个环境一定要写具体环境
  env: 'test-**********'
})

const db = cloud.database();
/**
 * 这个示例将经自动鉴权过的小程序用户 openid 返回给小程序端
 * 
 * event 参数包含小程序端调用传入的 data
 * 
 */
exports.main = (event, context) => {
  console.log(event)
  console.log(context)

  // 可执行其他自定义逻辑
  // console.log 的内容可以在云开发云函数调用日志查看

  // 获取 WX Context (微信调用上下文)，包括 OPENID、APPID、及 UNIONID（需满足 UNIONID 获取条件）等信息
  const wxContext = cloud.getWXContext()
  // 定义对象=event
  const {
    nickName,
    avatarUrl,
    gender
  } = event;
  // 查询用户是否存在
  return db.collection('user').where({
      _openid: wxContext.OPENID
    }).get()
    // 要返回openid，所以用get
    .then(res => {
      if (res.data.length > 0) {
        // 用户存在，将用户信息返回
        return {
          code: 200,
          errMsg: '用户已经存在',
          // 主要目的是返回用户的_openid,方便写点赞逻辑
          userInfo: res.data[0]
        }
      } else {
        // 用户不存在，将用户添加进user表
        return db.collection('user').add({
          data: {
            _openid: wxContext.OPENID,
            nickName: nickName,
            avatarUrl: avatarUrl,
            gender: gender,
            time: new Date()
          }
        }).then(res => {
          return {
            code: 201,
            errMsg: '用户注册成功',
            _openid: wxContext.OPENID
          }
        })
        .catch(error=>{
          return {
            code: 301,
            errMsg: '用户注册失败',
          }
        })
      }
    }).catch(error=>{
      return {
        code: 300,
        errMsg:'用户查询失败',
      }
    })
}

4.具体页面点赞函数

 clickLove(e) {
    console.log("点赞函数",e);
    var index = e.currentTarget.dataset.index;
    var circleData = that.data.list[index];
    var loveList = circleData.loveList;
    
    var isHaveLove = false;
    for (var i = 0; i < loveList.length; i++) {
      if (that.data.userInfo._openid == loveList[i]._openid) {
        isHaveLove = true;
        loveList.splice(i, 1);
        // 如果已经点过赞，取消点赞
        wx.cloud.callFunction({
          name:'updateCircleLove',
          data:{
            type:0,
            circleId:circleData._id
          }
        }).then(res=>{
          console.log("取消赞成功",res);
        }).catch(err=>{
          console.error("取消赞失败",err);
        })
        // 取消赞
        circleData.isLove = false;
        break;
      }
    }

    if (!isHaveLove) {
      // 本地点赞
      loveList.push({
        nickName: that.data.userInfo.nickName,
        _openid: that.data.userInfo._openid
      });
      wx.cloud.callFunction({
        name:'updateCircleLove',
        data:{
          type:1,
          circleId:circleData._id,
          nickName:that.data.userInfo.nickName
        }
      }).then(res=>{
        console.log("点赞成功",res);
      }).catch(err=>{
        console.error("点赞失败",err);
      })
      // 点赞
      circleData.isLove = true;
    }

    that.setData({
      list: that.data.list,
      showOperationPannelIndex: -1
    })


  },

5.js

// pages/circle/list.js
var that;
var db = wx.cloud.database()
var _ = db.command
var _animation; // 动画实体
var _animationIndex = 0; // 动画执行次数index（当前执行了多少次）
var _animationIntervalId = -1; // 动画定时任务id，通过setInterval来达到无限旋转，记录id，用于结束定时任务
const _ANIMATION_TIME = 300; // 动画播放一次的时长ms
Page({

  /**
   * 页面的初始数据
   */
  data: {
    userInfo: null,
    list: [],
    friendIds: [],
    
    showOperationPannelIndex: -1,
    currentCircleIndex: -1,
    showCommentAdd: false,
    commentContent: '',
    heightBottom: '',
    refresh: false,
    loadMore: false,
    haveMoreData: true,
    loading: false,
    page: 0,
    pageCount: 10,
    reply:'',
    touchStartOperation:false,
    touchStartOperationPannel:false,
    moveHeight:'500',
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    that = this;
    that.setData({
      userInfo: getApp().globalData.userInfo,
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    _animationIndex = 0;
    _animationIntervalId = -1;
    this.data.animation = '';

    _animation = wx.createAnimation({
      duration: _ANIMATION_TIME,
      timingFunction: 'linear',
      delay: 0,
      transformOrigin: '50% 50% 0'
    })

    that.refresh();
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },
  /**
   * 实现image旋转动画，每次旋转 120*n度
   */
  rotateAni: function (n) {
    _animation.rotate(120 * (n)).step()
    this.setData({
      animation: _animation.export()
    })
  },
  clickBack(){
    console.log('clickBack');
    wx.navigateBack({
      delta: 1,
    })
  },
  /**
   * 开始旋转
   */
  startAnimationInterval: function () {
    var that = this;
    that.rotateAni(++_animationIndex); // 进行一次旋转
    _animationIntervalId = setInterval(function () {
      that.rotateAni(++_animationIndex);
    }, _ANIMATION_TIME); // 每间隔_ANIMATION_TIME进行一次旋转
  },

  /**
   * 停止旋转
   */
  stopAnimationInterval: function () {
    if (_animationIntervalId > 0) {
      clearInterval(_animationIntervalId);
      _animationIntervalId = 0;
    }
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("onPullDownRefresh")

  },

  refresh() {
    if (that.data.loading) {
      return
    }
    // wx.showLoading({
    //   title: '正在刷新...',
    // })
    that.setData({
      refresh: true,
    })
    that.startAnimationInterval();
    that.getList();
  },

  getList() {
    if (that.data.loading) {
      return
    } else {
      that.setData({
        loading: true
      })
    }
    var currentPage = that.data.page;
    // 如果是刷新，要设置请求的页码为0
    if (that.data.refresh) {
      currentPage = 0;
    }
    // 获取好友的朋友圈信息
    db.collection('circle')
      .orderBy('time', 'desc')
      .skip(currentPage * that.data.pageCount)
      .limit(that.data.pageCount)
      .get()
      .then(res => {
        console.log('getList:', res)
        if (that.data.refresh) {
          that.setData({
            list: []
          })
        }
        if (res.data.length > 0) {
          for (var i = 0; i < res.data.length; i++) {
            res.data[i].isLove = false;
            for (var j = 0; j < res.data[i].loveList.length; j++) {
              if (that.data.userInfo._openid == res.data[i].loveList[j]._openid) {
                // 如果已经点赞，设置状态isLove true
                res.data[i].isLove = true;
                break;
              }
            }
            res.data[i].time = that.js_date_time(res.data[i].time);
            that.data.list.push(res.data[i])
          }
          that.setData({
            list: that.data.list
          })

          if (res.data.length == that.data.pageCount) {
            that.setData({
              haveMoreData: true
            })
          } else {
            that.setData({
              haveMoreData: false
            })
          }
        }
        that.setData({
          refresh: false,
          loading: false,
          loadMore: false,
          page: currentPage + 1
        })
        that.stopAnimationInterval();
        // wx.hideLoading()
      })
      .catch(error => {
        console.log('getList error:', error)
        that.stopAnimationInterval();
        that.setData({
          refresh: false,
          loading: false,
          loadMore: false,
        })
        // wx.hideLoading()
      })
  },

  js_date_time(unixtime) {
    var date = new Date(unixtime);
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    var h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    var minute = date.getMinutes();
    var second = date.getSeconds();
    minute = minute < 10 ? ('0' + minute) : minute;
    second = second < 10 ? ('0' + second) : second;
    return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second; //年月日时分秒
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("onReachBottom")
    if (that.data.loading) {
      return
    } else {
      that.setData({
        loadMore: true
      })

      setTimeout(() => {
        that.getList();
      }, 300);
    }
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  onPageScroll(e) {
    console.log("onPageScroll", e)
    that.setData({
      showOperationPannelIndex:-1
    })
  },

  goPublish() {
    wx.navigateTo({
      url: 'publish',
    })
  },

  showOperationPannel(e) {
    console.log("showOperationPannel", e)
    var index = e.currentTarget.dataset.index;
    if (that.data.showOperationPannelIndex == index) {
      that.setData({
        showOperationPannelIndex: -1
      })
    } else {
      that.setData({
        showOperationPannelIndex: index
      })
    }

  },

  clickLove(e) {
    console.log("点赞函数",e);
    var index = e.currentTarget.dataset.index;
    var circleData = that.data.list[index];
    var loveList = circleData.loveList;
    
    var isHaveLove = false;
    for (var i = 0; i < loveList.length; i++) {
      if (that.data.userInfo._openid == loveList[i]._openid) {
        isHaveLove = true;
        loveList.splice(i, 1);
        // 如果已经点过赞，取消点赞
        wx.cloud.callFunction({
          name:'updateCircleLove',
          data:{
            type:0,
            circleId:circleData._id
          }
        }).then(res=>{
          console.log("取消赞成功",res);
        }).catch(err=>{
          console.error("取消赞失败",err);
        })
        // 取消赞
        circleData.isLove = false;
        break;
      }
    }

    if (!isHaveLove) {
      // 本地点赞
      loveList.push({
        nickName: that.data.userInfo.nickName,
        _openid: that.data.userInfo._openid
      });
      wx.cloud.callFunction({
        name:'updateCircleLove',
        data:{
          type:1,
          circleId:circleData._id,
          nickName:that.data.userInfo.nickName
        }
      }).then(res=>{
        console.log("点赞成功",res);
      }).catch(err=>{
        console.error("点赞失败",err);
      })
      // 点赞
      circleData.isLove = true;
    }

    that.setData({
      list: that.data.list,
      showOperationPannelIndex: -1
    })


  },

  clickComment(e) {
    that.setData({
      currentCircleIndex: e.currentTarget.dataset.index,
      showCommentAdd: true,
      showOperationPannelIndex: -1,
    })

  },

  bindInput(e) {
    that.setData({
      commentContent: e.detail.value
    })
  },
  bindFocus(e) {
    that.setData({
      heightBottom: e.detail.height
    })
  },

  clickSend(e) {
    var circleData = that.data.list[that.data.currentCircleIndex];
    var commentList = circleData.commentList;

    var commentData = {};
    commentData.nickName = that.data.userInfo.nickName + "：";
    commentData.content = that.data.commentContent;
    commentData._openid = that.data.userInfo._openid;
    commentData.reply = that.data.reply;
    if(that.data.reply.length>0){
      commentData.nickName = that.data.userInfo.nickName;
    }

    commentList.push(commentData);

    that.setData({
      list: that.data.list,
      showCommentAdd: false,
      commentContent: '',
      reply:''
    })

    db.collection('circle').doc(circleData._id).update({
        data: {
          commentList: _.push(commentData)
        }
      })
      .then(res => {
        console.log('comment add success:', res)
      })
      .catch(err => {
        console.log('comment add fail:', err)
      })

  },
  clickCommentItem(e){
    // 点击评论列表条目

    // 1.获取评论所属的朋友圈信息index
    var circleIndex = e.currentTarget.dataset.index;
    // 2.获取评论在评论列表中的索引
    var commentIndex = e.currentTarget.dataset.commentindex;

    var circleData = that.data.list[circleIndex];
    var commentList = circleData.commentList;

    var commentData = commentList[commentIndex]
    var nickName = commentData.nickName;

    that.setData({
      currentCircleIndex: e.currentTarget.dataset.index,
      showCommentAdd: true,
      showOperationPannelIndex: -1,
      reply:nickName
    })
  },
  bindTouchStart(e){
    // 当触摸朋友圈列表视图时，隐藏评论输入框
    that.setData({
      showCommentAdd: false,
    })

    if(that.data.touchStartOperation || that.data.touchStartOperationPannel){

    } else {
      that.setData({
        showOperationPannelIndex: -1,
      })
    }
  },
  bindTouchStartOperation(e){
    // 触摸操作按钮开始
    that.setData({
      touchStartOperation:true
    })
  },
  bindTouchStartOperationPannel(e){
    // 触摸点赞和评论操作面板开始
    that.setData({
      touchStartOperationPannel:true
    })
  },
  bindTouchEndOperation(e){
    // 触摸操作按钮结束
    that.setData({
      touchStartOperation:false
    })
  },
  bindTouchEndOperationPannel(e){
    // 触摸点赞和评论操作面板结束
    that.setData({
      touchStartOperationPannel:false
    })
  },



















  // clickComment(e){
  //   var index = e.currentTarget.dataset.index;
  //   that.setData({
  //     currentIndex: index,
  //     showCommentAdd: true,
  //     showOperationPannelIndex: -1
  //   })
  // },

  // getInputValue(e) {
  //   this.setData({
  //     commentContent: e.detail.value
  //   })
  // },

  // inputFocus(e) {
  //   console.log(e, '键盘弹起')
  //   this.setData({
  //     height: e.detail.height,
  //     isInput: true
  //   })
  // },
  // inputBlur() {
  //   console.log('键盘收起')
  //   this.setData({
  //     isInput: false
  //   })
  // },

  // focusButn: function () {
  //   this.setData({
  //     focusInput: true,
  //     isInput: true
  //   })
  // },

  // onCircleTouchStart: function () {
  //   this.setData({
  //     showCommentAdd: false,
  //   })
  // },

  // clickSend(){
  //   var circleData = that.data.list[that.data.currentIndex];
  //   var commentList = circleData.commentList;

  //   var commentData = {};
  //   commentData.nickName = that.data.userInfo.nickName + "：";
  //   commentData.content = that.data.commentContent;

  //   commentList.push(commentData);

  //   that.setData({
  //     list: that.data.list,
  //     showCommentAdd: false,
  //     commentContent: ''
  //   })
  // },
























  // clickOperationBtn(e) {
  //   console.log('clickOperationBtn:', e)
  //   if (that.data.showOperationIndex == e.currentTarget.dataset.index) {
  //     that.setData({
  //       showOperationIndex: -1
  //     })
  //   } else {
  //     that.setData({
  //       showOperationIndex: e.currentTarget.dataset.index
  //     })
  //   }
  // },

  // tounchStart(e) {
  //   console.log('tounchStart:', e)
  //   that.setData({
  //     showOperationIndex: -1
  //   })
  // },

  // clickLove(e) {
  //   console.log('clickLove:', e, that.data.showOperationIndex)
  //   var index = e.currentTarget.dataset.index;
  //   var circleData = that.data.list[index];
  //   console.log('circleData:', circleData);
  //   wx.showToast({
  //     title: '点赞-' + circleData.nickName,
  //   })
  //   var isHaveLove = false;
  //   for (var i = 0; i < circleData.loveList.length; i++) {
  //     var loveData = circleData.loveList[i];
  //     if (loveData.nickName == circleData.nickName) {
  //       circleData.loveList.splice(i, 1);
  //       isHaveLove = true;
  //       break;
  //     }
  //   }
  //   if (!isHaveLove) {
  //     circleData.loveList.push({
  //       nickName: circleData.nickName
  //     });
  //   }
  //   console.log('circleData2:', circleData);
  //   console.log('isHaveLove:', isHaveLove);

  //   that.setData({
  //     ['list[' + index + '].loveList']: circleData.loveList,
  //     showOperationIndex: -1
  //   })
  // },

  // clickComment(e) {
  //   var index = e.currentTarget.dataset.index;
  //   var circleData = that.data.list[index];
  //   console.log('circleData:', circleData);
  //   wx.showToast({
  //     title: '评论-' + circleData.nickName,
  //   })

  //   circleData.commentList.push({
  //     nickName: circleData.nickName,
  //     content: circleData.content,
  //   });

  //   console.log('circleData2:', circleData);

  //   that.setData({
  //     ['list[' + index + '].commentList']: circleData.commentList,
  //     showOperationIndex: -1
  //   })
  // },
})

6.点赞云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')

// 初始化 cloud
cloud.init({
  // API 调用都保持和云函数当前所在环境一致
  env: 'test-**************'
})
const db = cloud.database()
const _ = db.command

// 云函数入口函数
exports.main = async (event, context) => {
  const {
    type, //是点赞1， 还是取消赞 0
    circleId, //当前操作的circle id
    nickName, // 昵称
  } = event;
  const wxContext = cloud.getWXContext()
  if (type == 0) {
    // 取消赞用更新方法
    return db.collection('circle').doc(circleId).update({
        data: {
          // 删除_openid
          loveList: _.pull({
            _openid: wxContext.OPENID
          })
        }
      })
      .then(res => {
        return {
          code : 200,
          errMsg:'取消赞成功'
        }
      })
      .catch(err => {
        return {
          code : 300,
          errMsg:'取消赞失败'
        }
      })
  } else if (type == 1) {
    return db.collection('circle').doc(circleId).update({
        data: {
          // 点赞
          loveList: _.push({
            _openid: wxContext.OPENID,
            nickName:nickName
          })
        }
      })
      .then(res => {
        return {
          code : 200,
          errMsg:'点赞成功'
        }
      })
      .catch(err => {
        return {
          code : 300,
          errMsg:'点赞失败'
        }
      })
  }
  // return {
  //   event,
  //   openid: wxContext.OPENID,
  //   appid: wxContext.APPID,
  //   unionid: wxContext.UNIONID,
  // }
}