uniapp实现文章收藏

首先布局为 图文
我们实现点击文章上的红心进行收藏操作
红心组件如下

<template>
  <view class="save-incons" @click.stop="_changeSaveStatus">
    <uni-icons color="#ff6600" :type="isLike ? 'heart-filled':'heart'" size="20"></uni-icons>
  </view>
</template>

在功能实现之前我们需要验证是否为登录的状态 如未登录则跳转登录页面
像是检验登录的功能一般会多次用到 直接Mixin混入全局使用

checkedIsLogin () {
          return new Promise(resolve => {
            if (this.userInfo) {
              resolve()
            } else {
              uni.navigateTo({
                url: '/pages/userInfo/login/login'
              })
            }
          })
        },

我们在数据操作完成之后记得更新之前存储的用户信息保证数据是实时更新的
同事重新获取新的数据 覆盖之前的数据

 this.updateUserInfo({ ...this.userInfo, ...newUserInfo })

整体流程如下 添加上点击之后提示框

  methods: {
    async _changeSaveStatus () {
      // TODOS 判断用户是否登录
      await this.checkedIsLogin();
      const { msg, newUserInfo } = await this.$http.update_save_like({
        articleId: this.item._id,
        userId: this.userInfo._id
      })
      uni.showToast({
        title: msg,
        icon: 'none'
      })
      this.updateUserInfo({ ...this.userInfo, ...newUserInfo })
    },
  },

此时我们拿到文章id 和用户id 传入后端进行数据操作

'use strict';
// 定义数据库引用
const db = uniCloud.database();
// 定义修改指令
const dbCmd = db.command

exports.main = async (event, context) => {
	const {
		userId,
		articleId
	} = event
	// 获取用户Ids集合
	const userInfo = await db.collection('user').doc(userId).get();

	const articleIds = userInfo.data[0].article_likes_ids
	let returnMsg = null

	let articleArr = null;
	// 如果包含删除收藏
	if (articleIds.includes(articleId)) {
		articleArr = dbCmd.pull(articleId)
		returnMsg = '取消收藏成功'
	} else {
		articleArr = dbCmd.addToSet(articleId)
		returnMsg = '添加收藏成功'
	}

	await db.collection('user').doc(userId).update({
		article_likes_ids: articleArr
	})

	const updateUserInfo = await db.collection('user').doc(userId).get()

	//返回数据给客户端
	return {
		code: 0,
		data: {
			msg: returnMsg,
			newUserInfo:updateUserInfo.data[0]
		}
	}
};

同时动态设置我们的红心状态 自动变化

  computed: {
    isLike () {
      return this.userInfo && this.userInfo.article_likes_ids.includes(this.item._id)
    }
  }

写的有些草率 具体可私聊发源码