（七）微信小程序：收藏功能

收藏功能

　　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);

      }
  }
}）

　　　　　　　　　　代碼解析：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>

　　　　　　　　由代碼可以發現，利用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
    });
  }

　　　　　　　　　　代碼解析：1.流程：從本地讀取--》相應id位置的數據取反--》存儲至集合中--》存儲到本地--》修改視圖

 此節完成了新聞收藏功能，下一節開啟tabBar運用~