收藏功能
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位置的数据取反--》存储至集合中--》存储到本地--》修改视图