慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第6章构建新闻详情页面-使用缓存实现文章收藏功能

使用缓存实现文章收藏功能

1.清除垃圾代码

2.进入目录 pages/post/post-detail，修改文件 page-detail.wxml

<!-- 先静后动，先样式再数据 -->
<view class="container">
  <image class="head-image" src="{{postData.headImgSrc}}"></image>
  <image class="audio" src="/images/music/music-start.png"></image>
  <view class="author-date">
    <image class="avatar" src="{{postData.avatar}}"></image>
    <text class="author">{{postData.author}}</text>
    <text class="const-text">发表于</text>
    <text class="date">{{postData.dateTime}}</text>
  </view>
  <text class="title">{{postData.title}}</text>
  <view class="tool">
    <view class="circle-img">
      <image src="/images/icon/collection.png"></image>
      <image class="share-img" src="/images/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">{{postData.detail}}</text>
</view>

3.进入目录 pages/post/post-detail，修改文件 page-detail.js

var postsData = require('../../../data/posts-data.js')

Page({
  onLoad:function(option) {
    var postId = option.id;
    var postData = postsData.postList[postId];
    // 如果在onLoad方法中，不是异步的去执行一个数据绑定
    // 则不需要使用 this.setData 方法
    // 只需要对 this.data 赋值即可实现数据绑定
    this.setData({
      postData:postData
    })
  }
})

4.进入目录 pages/post/post-detail，修改文件 page-detail.wxml，收藏图片的变化

<!-- 先静后动，先样式再数据 -->
<view class="container">
  <image class="head-image" src="{{postData.headImgSrc}}"></image>
  <image class="audio" src="/images/music/music-start.png"></image>
  <view class="author-date">
    <image class="avatar" src="{{postData.avatar}}"></image>
    <text class="author">{{postData.author}}</text>
    <text class="const-text">发表于</text>
    <text class="date">{{postData.dateTime}}</text>
  </view>
  <text class="title">{{postData.title}}</text>
  <view class="tool">
    <view class="circle-img">
      <image wx:if="{{collectd}}" src="/images/icon/collection.png"></image>
      <image wx:else src="/images/icon/collection-anti.png"></image>
      <image class="share-img" src="/images/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">{{postData.detail}}</text>
</view>

5.进入目录 pages/post/post-detail，修改文件 page-detail.js　

var postsData = require('../../../data/posts-data.js')

Page({
  onLoad:function(option) {
    var postId = option.id;
    var postData = postsData.postList[postId];
    // 如果在onLoad方法中，不是异步的去执行一个数据绑定
    // 则不需要使用 this.setData 方法
    // 只需要对 this.data 赋值即可实现数据绑定
    this.setData({
      postData:postData
    })

    // var postsCollected = {
    //   1:"true",
    //   2:"false",
    //   3:"true"
    //   ...
    // } 

    var postsCollected = wx.getStorageSync('postsCollected')
    if (postsCollected) {
      var postCollected = postsCollected[postId]  
      this.setData({
        collected = postCollected
      })
    }
  }
})

6.进入目录 pages/post/post-detail，修改文件 page-detail.wxml，添加事件，使用缓存切换图片

<!-- 先静后动，先样式再数据 -->
<view class="container">
  <image class="head-image" src="{{postData.headImgSrc}}"></image>
  <image class="audio" src="/images/music/music-start.png"></image>
  <view class="author-date">
    <image class="avatar" src="{{postData.avatar}}"></image>
    <text class="author">{{postData.author}}</text>
    <text class="const-text">发表于</text>
    <text class="date">{{postData.dateTime}}</text>
  </view>
  <text class="title">{{postData.title}}</text>
  <view class="tool">
    <view class="circle-img">
      <image wx:if="{{collected}}" catchtap="onCollectionTap" src="/images/icon/collection.png"></image>
      <image wx:else catchtap="onCollectionTap" src="/images/icon/collection-anti.png"></image>
      <image class="share-img" src="/images/icon/share.png"></image>
    </view>
    <view class="horizon"></view>
  </view>
  <text class="detail">{{postData.detail}}</text>
</view>

7.进入目录 pages/post/post-detail，修改文件 page-detail.js

var postsData = require('../../../data/posts-data.js')

Page({
  data:{},
  onLoad:function(option) {
    var postId = option.id;
    this.data.currentPostId = postId;
    var postData = postsData.postList[postId];
    // 如果在onLoad方法中，不是异步的去执行一个数据绑定
    // 则不需要使用 this.setData 方法
    // 只需要对 this.data 赋值即可实现数据绑定
    this.setData({
      postData:postData
    })

    // var postsCollected = {
    //   1:"true",
    //   2:"false",
    //   3:"true"
    //   ...
    // } 

    var postsCollected = wx.getStorageSync('posts_collected')
    if (postsCollected) {
      var postCollected = postsCollected[postId]  
      this.setData({
        collected:postCollected
      })
    } else {
      var postsCollected = {};
      postsCollected[postId] = false;
      wx.setStorageSync('posts_collected', postsCollected); 
    }
  },
  
  onCollectionTap:function(event) {
    var postsCollected = wx.getStorageSync('posts_collected');
    var postCollected = postsCollected[this.data.currentPostId];
    // 收藏变成未收藏，未收藏变成收藏
    postCollected = !postCollected;
    postsCollected[this.data.currentPostId] = postCollected;
    // 更新文章是否的缓存值
    wx.setStorageSync('posts_collected', postsCollected);
    // 更新数据绑定变量，从而实现切换图片
    this.setData({
      collected:postCollected
    })
  }
})

8.测试，点击收藏图片，留意调试器的 Storage 的缓存值变化