夜光帶你走進 微信小程序開發（二十七）擅長的領域

夜光序言：

 

吾雕玉刻一位如花美眷，絕藝傾城，爲爾憶得昔日舊約。

 

 

 

 
 
正文：
 
                                              以道御術 / 以術識道

 

// pages/news/news-detail/news-detail.js
var newsData = require("../../data/newsdata.js")


Page({

  /**
   * 頁面的初始數據
   */
  data: {
      // detailData:[] 這個初始化，我們也先不要
  },

  /**
   * 生命週期函數--監聽頁面加載
   * 夜光：這個生命週期函數用的情況比較多
   */
  onLoad: function (options) {
    //  console.log(options.newsid)
    console.log();
    this.setData(
      // 這個不行嗯~ 
      // detailData:newsData.initData[options.newsid]
      newsData.initData[options.newsid]
    )
    this.setData({
      newsid: options.newsid
    })

    //測試本地存儲
    // wx.setStorageSync("key", "data") 我先把這句代碼註釋掉，接下來

    // console.log(wx.getStorageSync("key"));

    //收藏存儲數據格式
    //var newsCollect={
    //   0：true
    //   1：flase
    //}

    //第一次進入的時候，判斷是否存在本地存儲以及是否收藏，這裏
       var newsCollect = wx.getStorageSync("newsCollect");
       //之後我們判斷
       //如果newsCollect存在，則代表以前收藏過或者取消過收藏
       if (newsCollect){
         var newCollect = newsCollect[options.newsid]
         this.setData({
           collected: newCollect
         })
       }else{
         //第一次進入，根本不存在數據
         var newsCollect = {}; //先定義一個空對象
         //我把當前唯一id放到newsCollect對象中，默認指定false
         newsCollect[options.newsid] = false; //這裏，我們需要對對象和數組之間的關係有較爲深刻的認識
         //放到本地存儲之中去
         wx.setStorageSync("newsCollect", newsCollect)
       }
      
    },
    //下面，我們寫一個方法
    collectTap:function(event){
      //我們一般寫方法，都會先在控制檯隨便打印點東西，看看是否有問題
      // console.log("1")
      // console.log(this.data.newsid); //打印看一下 有了效果，我們就可以幹活了
      // this.data.newsid
      //既然如此，我們在這個裏面就要存儲了
      //注意：newsCollect是所有數據的集合
      var newsCollect = wx.getStorageSync("newsCollect"); //這裏，我們數據存儲的格式就是newsCollect
      //這裏需要提醒一下，第一次進來的時候就要判斷數據是否存在
      //但是這裏並沒有寫，這裏是進來之後的邏輯，這需要注意一下

      //下面我們再定義一個一條的
      // var newCollect = newsCollect
      var newCollect = newsCollect[this.data.newsid];
      // console.log(newCollect)
      //這裏是什麼邏輯，如果是收藏的則被取消，如果未被收藏則收藏
      newCollect = !newCollect; //反正取反麼，true or false

      //更新到本地存儲中
      newsCollect[this.data.newsid] = newCollect;
      wx.setStorageSync("newsCollect", newsCollect); //newsCollect把這個集合的整體再放進去
      //後臺數據是更新了，那麼前端的視圖層如何更新呢
      //下面就是渲染到,並更新視圖
      this.setData({
        //暫時不知道，因爲我們根本不知道視圖是怎麼改變的
        collected: newsCollect[this.data.newsid]
      })

      wx.showToast({
        title: newsCollect[this.data.newsid]?'收藏成功':"取消收藏",
        icon: 'success',
        duration: 2000
      })

    }

  

})