微信小程序：收藏功能

Posted 2021-02-22 happy-prince

收藏功能

　　1.利用数据缓存进行对是否首次进入响应新闻页面进行判断

　　　　　　（1）查看API中关于数据缓存部分，了解如何获取、设置本地数据

　　　　　　　　　

　　　　　　　（2）了解本地存储的收藏信息数据结构：

　　　　　　　　　　　　

 

　　　　　　　（3）进行逻辑判断：是否为首次进入页面（在onLoad中进行判断）

// pages/news/news-details/news-details.js
var data = require("../../../data/data.js");
Page({

  /**
   * 页面的初始数据
   */
  data: {
      currentNews:{},
      collected:false,  //标志着当前数据是否收藏
      newsid:0  //选中的id值
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      this.setData({
        currentNews:data[options.id],
        newsid:options.id
      });

      //进入页面的时候，需要判断当前页面是否已经本地存储
      var collections = wx.getStorageSync(‘collections‘);
      //如果存在，则非第一次进入；如果不存在，则是第一次进入
      if(collections){
        //存在
        this.setData({
          collected:collections[options.id]
        });
      }else{
        //不存在
        var collections = {};
        //把当前这条数据写到本地存储中
        collections[options.id] = false;
        wx.setStorageSync(‘collections‘, collections);

      }
  }
}）

View Code

　　　　　　　　　　代码解析：1.collected 标志着是否被收藏，在决定是否更换收藏图片方面起着至关重要作用

　　　　　　　　　　　　　　　2.流程为：从本地读取-->判断-->(不存在)：设置信息，然后存储至本地  （存在）：赋值collected为true

　　　2.点击收藏，执行收藏操作

　　　　　　（1）news-details.wxml中对图片进行限制（添加响应函数）

<view class="circle-img">
      <image src="../../../image/sch.png" wx:if="{{ collected }}" bindtap="collectHandler"></image> 
      <image src="../../../image/sc.png" wx:else bindtap="collectHandler"></image> 
      <image class="share-img" src="../../../image/fx.png"></image>
 </view>

View Code

　　　　　　　　由代码可以发现，利用API中的条件渲染选取呈现出的图片

　　　　　　　　 

 

　　　　　　　　（2）news-details.js中对于响应函数collectHandler定义

collectHandler(event){
    //读取本地存储信息
    var collections = wx.getStorageSync(‘collections‘);
    var collection = collections[this.data.newsid];
    //取反操作
    collection = !collection;
    //重新写到集合中
    collections[this.data.newsid] = collection;
    //写入到本地存储中
    wx.setStorageSync(‘collections‘, collections);
    //修改视图
    this.setData({
      collected:collection
    });
  }

View Code

　　　　　　　　　　代码解析：1.流程：从本地读取--》相应id位置的数据取反--》存储至集合中--》存储到本地--》修改视图

 此节完成了新闻收藏功能，下一节开启tabBar运用~