云开发（微信-小程序）笔记（十五）---- 收藏，点赞（下）

云开发（微信-小程序）笔记（十四）---- 收藏，点赞（上）

1.存在的问题与解决方案

在前面我们介绍了收藏，点赞功能的实现，但还是存在一定的问题，没有实时的与数据库同步。为了这个问题，我们将结合云函数（可以修改所有用户创建的数据）来解决。

2.具体优化

2-1.在数据库中添加点赞，收藏字段

2-2.编写云函数

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

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  if (event.action == 'shouchang'){
  return await cloud.database().collection('Goods').doc(event.id)
  .update({
    data: {
      shouchang: event.shouchang
    }
  })
  .then(res =>{
    console.log('收藏状态成功',res)
    return res
  })
  .catch( res =>{
    console.log('收藏状态失败',res)
    return res
  })
}else{
  return await cloud.database().collection('Goods').doc(event.id)
  .update({
    data: {
      dianzan: event.dianzan
    }
  })
  .then(res =>{
    console.log('点赞状态成功',res)
    return res
  })
  .catch( res =>{
    console.log('点赞状态失败',res)
    return res
  })
}
}

一定要上传自己的修改，否者云函数是不会生效的。

2-3.修改tubiao.js文件

// pages/tubiao/tubiao.js
let ID = ''
let shouchang = false
let dianzan = false
Page({
  data: {
    shouchangUrl: "../../imgs/chang-no.png ",
    dianzanUrl: "../../imgs/zan-no.png",
  },
  onLoad(res){
    console.log(res)
    ID = 'b69f67c06268c88b005446ac66f0ad09'
    wx.cloud.database().collection('Goods')
    .doc(ID)
    .get()
    .then(res => {
      console.log('详情页成功',res)
      shouchang=res.data.shouchang
      dianzan=res.data.dianzan
      this.setData({
        detail: res.data,
        shouchangUrl:shouchang?"../../imgs/chang-yes.png":"../../imgs/chang-no.png",
        dianzanUrl:dianzan?"../../imgs/zan-yes.png":"../../imgs/zan-no.png"
      })
    })
    .catch(res =>{
      console.log('请求数据失败',res)
    })
  },
    //收藏（三目运算符）
    clickMe1(){
      this.setData({
        shouchangUrl:shouchang?"../../imgs/chang-no.png":"../../imgs/chang-yes.png"
      })
      shouchang = !shouchang //取反（收藏与未收藏之间的切换）
       //调用云函数
       wx.cloud.callFunction({
         name: "tubiao", //云函数名
         data: {
           action:"shouchang",
           id: ID,
           shouchang: shouchang
         }
       }).then(res => {
         console.log('收藏成功')
       }).catch(res => {
         console.log('收藏失败')
       })

    },
    //收藏（三目运算符）
    clickMe2(){
      this.setData({
        dianzanUrl:dianzan?"../../imgs/zan-no.png":"../../imgs/zan-yes.png"
      })
      dianzan = !dianzan //取反（点赞与未点赞之间的切换）
       //调用云函数
       wx.cloud.callFunction({
        name: "tubiao",
        data: {
          action:"dianzan",
          id: ID,
          dianzan: dianzan
        }
      }).then(res => {
        console.log('点赞成功')
      }).catch(res => {
        console.log('点赞失败')
      })
    }, 
})

2-4.修改tubiao.wxml文件(无修改)

<!--pages/tubiao/tubiao.wxml-->
<view>
<image class = "image" src = "{{shouchangUrl}}" bindtap="clickMe1"></image>
<image class = "image" src = "{{dianzanUrl}}" bindtap="clickMe2"></image>
</view>

2-5.修改tubiao.wxss文件(无修改）

/* pages/tubiao/tubiao.wxss */
.image{
  width: 120rpx;
  height: 120rpx;
}

2-6.效果图（视频）

点赞，收藏效果视频

小程序-收藏点赞数据库同步

云开发（微信-小程序）笔记（十六）---- 评论

感谢大家，点赞，收藏，关注，评论！