第三个版本修改，应该没问题了
没找到完整的教程，自己琢磨着做了一个
一开始尝试用缓存数组做，但是一直搞不定取消收藏时删除对应的缓存数组数据，于是放弃。
又采用了数据库的方法，但是因为我收藏的不同表太多，又转用缓存来做
废话不多说，直接上代码
1、点击收藏页面
点击收藏，弹窗提示收藏成功；反之提示取消收藏
.wxml这里贴出收藏按钮，不贴出全部布局
<view class="animal_collect"><block wx:if="{{isShow==false}}"><text bindtap="handleCollect" data-id="{{item.name_id}}" class="iconfont icon-shoucang"></text></block><block wx:if="{{isShow==true}}" ><text bindtap="handleCollect" data-id="{{item.name_id}}" class="iconfont icon-shoucang1"></text></block><view class="collect_text">收藏</view></view>
这里使用的是阿里巴巴矢量图标，要用图片直接将text替换成image就可以。
这个没什么样式
.wxss
.animal_collect{flex: 3;font-size: 30rpx;display: flex;align-items: center;}
.js
data: {nameList:[],isShow: false,id: [],collect:[],},onLoad: function (options) {var id = parseInt(options.id);this.setData({id:id})// 换成自己的数据库在页面渲染db.collection('nameList').where({name_id:id}).get().then(res=>{this.setData({nameList:res.data})});//获取缓存数组里的isShow，即收藏状态，防止刷新后页面收藏丢失const Collect = wx.getStorageSync("collect")for(var i=0;i<Collect.length;i++){if(this.data.id==Collect[i].id){const isShow = Collect[i].isShowthis.setData({isShow})}}},//收藏按钮handleCollect(e){//取反let isShow = !this.data.isShowthis.setData({isShow})let collect = wx.getStorageSync("collect")|| [];//将收藏的文章信息放入缓存中，记得对照自己的数据库替换数据//id、name、src等可以自己取名字，只要在收藏wxml页面渲染记得换名字this.data.nameList.forEach((item,index)=>{let temp = {id:item.name_id,name:item.name_name,src:item.name_src,na_id:item.navigator_id,fa_id:item.family_id,test:item.detail_test,test1:item.detail_test1,test2:item.detail_test2,isShow:true}this.setData({temp})})//如果缓存中没有收藏过，则在缓存中插入数组const {id} = e.currentTarget.datasetconsole.log(id)//找到需要修改的文章索引const index= collect.findIndex(v=>v.id==id);console.log(index)console.log(collect[index])if(collect.length===0||collect[index]==undefined){collect.push(this.data.temp)wx.setStorageSync("collect_news",collect)}else{//如果缓存中已经存在收藏文章编号，则将isShow取反//删掉缓存中指定数组 可将下面这句改为 collect.splice(index,1);collect[index].isShow=!collect[index].isShowwx.setStorageSync("collect_news",collect)}//提示用户wx.showToast({title: isShow ? '收藏成功' : '取消收藏',icon:'success'})},
2、收藏页面获取缓冲数据
这是我做出来的页面效果
这是我的缓存数组数据
当缓存数组中isShow=true时显示
.wxml
<view class="first_tab"><!--过滤 将收藏显示--><block wx:for="{{collect}}"wx:if="{{item.isShow===true}}"><navigator class="animal_item"wx:key="cat_type"wx:for-item="item"data-id="{{item.id}}"bindtap="handleGoDetail"><!-- 图片容器 --><view class="animal_img_wrap"><image class="animal_img" src="{{item.src?item.src:'/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2774277168,3696497128&fm=26&gp=0.jpg'}}" /></view><!-- 文字容器 --><view class="animal_info_wrap"><view class="animal_name">{{item.name}}</view></view></navigator></block></view>
.wxss
.animal_item{display: flex;border-bottom: 1px solid #ccc;padding: 16rpx 0;}.animal_img_wrap{display: flex;flex: 1;justify-content: center;}.animal_img{width: 150rpx;height: 150rpx;border-radius: 80%;}.animal_info_wrap{flex: 2;display: flex;flex-direction: column;justify-content: space-around;}.animal_name{display: -webkit-box;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp: 2;font-size: 32rpx;}
最最最重要的就是js了
.js
const db = wx.cloud.database(Page({data: {collect:[]},onLoad(options){const collect = wx.getStorageSync("collect")this.setData({collect})},//点击跳转到文章详情handleGoDetail(e){wx.navigateTo({url:'/pages/animal_detail/animal_detail?id='+e.currentTarget.dataset.id,})}}))
