微信小程序云开发之收藏文章功能的简单实现(微信小程序云开发控制台)

微信小程序云开发之收藏文章功能的简单实现

推荐整理分享微信小程序云开发之收藏文章功能的简单实现(微信小程序云开发控制台)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:微信小程序云开发和普通开发区别,微信小程序云开发打不开,微信小程序云开发项目,微信小程序云开发是后端吗,微信小程序云开发项目,微信小程序云开发收费标准,微信小程序云开发,微信小程序云开发控制台,内容如对您有帮助，希望把文章链接给更多的朋友！

最近宅宅也是在给人做一款文章小程序，其中需要实现用户收藏文章，然后能显示在收藏页面的功能，也是在网上找了不少其他博主的文章，但是都达不到我想要的效果（要么用了云函数，要么超出了我的知识范围，要么本身存在一些bug）

于是宅宅自己写了一份，代码有些简单，没啥高深的技术，大佬们多多担待。

文章页面

首先来看效果（页面凑活看，不喜欢的话待会儿自己写个）

 wxml代码

<view style="display: flex;flex-direction:column;justify-content: center;align-items: center;"> <image class = "image" src = "{{shouchangUrl1}}" bindtap="clickMe1"></image> <view>收藏</view></view>

 wxss代码

page{ background: #ffffff;}.image{ width: 100rpx; height: 100rpx;}

样式上都很简单，上面的可以做个参考，具体想实现什么效果，按自己的喜好来。

最重要的是下面的js代码，后面我会做一些解读，分享我在操作过程中遇到的一些问题

js代码

const db = wx.cloud.database()Page({ data: { id:'', show1:'', shouchangUrl1: "../../images/shou0.png ", xuhao:'', shoucang:[] }, onLoad: function (e) { this.setData({ _id:e.id }) var id = e.id; db.collection('note').doc(id).get().then(res => { console.log('获取到的收藏数组', res.data.shoucang) this.setData({ shoucang:res.data.shoucang }) wx.cloud.callFunction({ name: 'get', complete: res => { console.log('云函数获取到的openid: ', res.result.openId) var shoucang = this.data.shoucang; var dianzan = this.data.dianzan; var daka = this.data.daka; var openid = res.result.openId; if(shoucang.indexOf(openid)>-1){ this.setData({ shouchangUrl1: "../../images/shou1.png", show1:1 }) console.log('收藏存在') }else{ this.setData({ shouchangUrl1: "../../images/shou0.png", show1:0 }) console.log('收藏不存在') } } }) }) }, //收藏 clickMe1(){ if(this.data.show1==0){ wx.cloud.callFunction({ name: 'get', complete: res => { console.log('云函数获取到的openid: ', res.result.openId) var openid = res.result.openId; var xuhao= this.data._id var _ = db.command db.collection('note').doc(xuhao).update({ data: { shoucang: _.addToSet(openid) } }) } }) this.setData({ shouchangUrl1: "../../images/shou1.png", show1:1 }) }else{ wx.cloud.callFunction({ name: 'get', complete: res => { console.log('云函数获取到的openid: ', res.result.openId) var openid = res.result.openId; var xuhao= this.data._id var _ = db.command db.collection('note').doc(xuhao).update({ data: { shoucang: _.pull(openid) } }) } }) this.setData({ shouchangUrl1: "../../images/shou0.png", show1:0 }) }},})

实现上的原理很简单：首次加载时，从云开发数据库获取收藏数组，赋值到本地数组，然后通过get云函数获取当前用户的openid，通过indexOf判断收藏数组中是否存在当前用户的openid，有则显示已收藏赋值show为1，没有则显示未收藏赋值show为0。然后点击收藏按钮时候，通过if语句判断show，show为0，则向收藏数组中添加当前用户的openid（这里用的addToSet）否则删除指定收藏数组的openid（这里用的pull）

注意：由于上面的代码没有将openid赋值给变量，所以后面clickMe1又使用了get云函数，实际操作中可以将通过赋值变量省略此步骤（懒得改了，凑活看吧）

原理上了解了，但是实际上要考虑到代码运行的同步的问题，一开始的时候，我是将获取到openid和获取到收藏数组的方法是分开的，但是这样，可能出现你获取完收藏数组和data中的变量比对完了，但是openid才刚刚获取赋值给data变量的情况，这就导致对比数据不准确，一直为else的情况，最后采用了方法中的本来默认的异步执行解决了这个问题（当然也可以更改代码，通过promise来实现异步执行，但是我不太会。。。）

另外，起初的时候，我并没有打算通过本地对比数组，来确定当前用户是否收藏，而是使用微信文档给与的api，通过where去查询用户的openid是否存在shoucang数组，这样的话，一是更难处理方法同步的问题，二是使用where查询时遇到了一些关于字段类型的问题，懒得解决。在这里给大家说下，希望能给大家躲避一些坑。

收藏页面

文章收藏了怎么能没有收藏页面呢，下面是收藏页面的图片，页面简单，不喜欢可以自己改个哈

收藏页面的实现还是很简单的，条件查询就可以了，下面是代码：

wxml代码

<view class="cu-list menu"> <view style="margin: 15rpx 0rpx;" class="cu-item " wx:for="{{shou}}" wx:key="index" bindtap="note" data-id="{{item._id}}" data-type="{{item.type}}"> <view style="display: flex;align-items: center;justify-content: space-around;"> <view style="width: 550rpx;" class="content padding-tb-sm"> <view class="K_between"> <text class="text-cut k_width">{{item.title ? item.title : '无标题'}}</text> <!--<text catchtap class="cuIcon-moreandroid" bindtap="mores" data-id="{{item._id}}" data-text="{{item.text}}"></text>--> </view> <view class="text-gray text-sm text-cut k_width"> {{item.text}} </view> </view> </view> </view> </view>

 wxss代码

.K_between{ display:flex; justify-content:space-between }.k_width{ width:700rpx;}

js代码

// pages/shoucang/shoucang.jsconst db = wx.cloud.database()Page({ /** * 页面的初始数据 */ data: { title:'', shou:[] }, /** * 生命周期函数--监听页面加载 */ onLoad() { wx.cloud.callFunction({ name: 'get', complete: res => { console.log('云函数获取到的openid: ', res.result.openId) var openid = res.result.openId; db.collection('note').where({ shoucang: openid }).get({ success: res =>{ console.log(res.data[0]); this.setData({ shou:res.data }) } }) }}) }, note: function (e) { wx.navigateTo({ url: '../notexianshi/note?id=' + e.currentTarget.dataset.id })},})

代码还是很简单的，关键在于查询发法，但是！！！！

要注意，有一部分是我懒的简单，这个代码实际使用中最多能显示20条，至于原因，不知道的可以查一下微信文档，如果对数目没有要求的可以使用这一小段代码，需要全部显示的，可以参考一下skip的分页用法。

好了，文章就分享到这啦，最后看一下效果吧