小程序云开发之点赞功能的实现

小程序点赞功能的实现

1.在完成页面布局之后，用data-id="{{item._id}}",拿到用户唯一标识。

<text bindtap="handleLinks" data-id="{{item._id}}">
              <text class="iconfont icondianzan" ></text>
              <text>{{item.links}}</text>
            </text>

2.在逻辑中获取id，利用updata云函数实现数据库更新。
原因：因为微信小程序为了访问安全而使用了权限设置，前端直接调取数据库，只能对自己创建的数据有读写的权限，而对别人创建的，无权做出更新，因此需要使用云函数来进行数据更新。
具体做法：
（1）.首先需要创建一个复用型更新云函数update。

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

cloud.init({
  // env:cloud.DYNAMIC_CURRENT_ENV
  env:'dev-e9qck'
  //因为微信小程序不会自动识别该小程序的配置环境，注意更改成自己创建的环境
})

const db = cloud.database()
//引入数据库
const _= db.command
//自增的方法，可在云开发中找到
// 云函数入口函数
exports.main = async (event, context) => {
//采用promise风格
//event携带前端传递过来的参数
    try {
    //判断传递过来的数据类型，然后使用eval()进行字符串转对象
      if (typeof event.data == 'string') {
        event.data = eval('('+ event.data + ')')
      }
      //使用await延迟调用数据库方法，利用collection和doc前端传递过来的变量，完成数据查找更新
      return await db.collection(event.collection).doc(event.doc).update({
        data: {
          //扩展运算符，进行浅拷贝
          ...event.data
        },
      })
     
    } catch(e) {
      console.error(e)
    }
}

（2）完成数据库更新之后，可以使用再次调取数据库的方法，对页面进行渲染，也可以在前端判断更新成功之后的返回值，然后直接对页面进行递增更新。
本文使用的是第二种方法：

let id = ev.target.dataset.id;
//向云函数中传递参数
    wx.cloud.callFunction({
      name:'update',
      data:{
        collection:'users',
        doc:id,
        //向云函数传递字符串，在后端进行解析
        data: "{links : _.inc(1)}"
      }
    }).then((res) =>{
      console.log(res)
      //数据库更新成功之后获取结果
      let updated = res.result.stats.updated;
      if(updated){
      //进行cloneListData的拷贝
        let cloneListData = [...this.data.listData]
      //构建循环，获取cloneListData，然后进行自增
        for(let i=0;i<cloneListData.length;i++){
          if(cloneListData[i]._id == id){
            cloneListData[i].links++;
          }
        }
        this.setData({
        //更新listData下的links
          listData : cloneListData
        })
      }
    })

关注微信公众号前端凌影，一起学习吧！