(七)微信小程序:收藏功能

收藏功能

  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运用~

(七)微信小程序:收藏功能

上一篇:小程序前端


下一篇:【.net core】微信公众号JSAPI支付--申请退款