微信小程序的文章收藏与取消收藏
我们用的是网易新闻的链接：http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html
在新闻列表页：
1、在data里面写变量来接收数据源数组和收藏数组
2、首先需要在onLoad中进行网络请求：
wx.showLoading({
title: '努力请求数据中....',
mask:true
})
myFetch({
url:"http://c.m.163.com/nc/article/headline/T1348647853363/0-140.html",
data:null,
method:"GET"
}).then(res=>{
wx.hideLoading();
let array = res.data.T1348647853363;
array.splice(0,1);
this.setData({
dataArr:array,
})
}).catch(error=>{
console.log(error);
});
3、渲染到页面上：
<!--pages/neteasynews/neteasynews.wxml-->
<view>
<view class="item" wx:for="{{dataArr}}" wx:for-item="v" wx:for-index="i" catchtap="goDetail" data-item="{{v}}" wx:key="i">
<text class="title">{{v.mtime}}</text>
<text class="title">{{v.source}}</text>
<view class="content">{{v.digest}}</view>
<image src="{{v.imgsrc}}" style="width:300rpx;height:180rpx;" ></image>
<view class="isStore">
<i-icon type="{{collectNews[v.docid] ? 'like_fill' : 'like'}}" size="40" color="#ff0000" catchtap="toStore" data-article="{{v}}" />
</view>
</view>
</view>
4、给按钮添加点击事件：（传入点击的条目）
toStore(e){
// console.log(e.currentTarget.dataset);
var item = e.currentTarget.dataset.article;
//同步获取 本地数据
let saveObj = wx.getStorageSync('collect') || {};
if(saveObj.hasOwnProperty(item.docid)){
//已经存储过 要删除
delete saveObj[item.docid];
}else{
//没存储过 加入对象中
saveObj[item.docid] = item;
}
//判断结束以后 将最新的对象 存储到本地
wx.setStorage({
data:saveObj,
key:"collect",
success:(res)=>{
//添加成功 将最新的数据对象存储给data
this.setData({
collectNews:saveObj
})
}
})
},
5、在onShow里面初始化Storage存过的文章：
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
this.setData({
collectNews:wx.getStorageSync('collect')
})
},
6、点击进入详情页：
详情页：在详情页也可以进行收藏和取消收藏
goDetail(e){
this.setData({
itemObj:e.currentTarget.dataset,
})
let sendItemobj = JSON.stringify(this.data.itemObj);
wx.navigateTo({
url: '../newsDetail/newsDetail?item='+encodeURIComponent(sendItemobj),
// events: {
// // 打开页面回传操作
// back: function (data) {
// console.log('回传数据：', data);
// }
// },
// success: function (res) {
// // 通过eventChannel向被打开页面传送数据
// res.eventChannel.emit('lalala', {
// data: '传给你'
// })
// }
})
},
7、接收传过去的item 在详情页
neteasydetail.js:
首先在data中，定义变量来接收传过来的点击的对象和从Storage里面取出的collect对应的值
data: {
itemObj:"",
collectNews:{},
},
// 异步取法在onLoad()方法：
wx.getStorage({
key: 'collect',
success:(res)=>{
console.log(res.data);
this.setData({
collectNews: res.data,
})
}
})
console.log(options);
let newData = decodeURIComponent(options.item);
this.setData({
itemObj:JSON.parse(newData).item
})
console.log(this.data.itemObj);
点击详情页的收藏按钮：
collectArticle(){
// console.log(e.currentTarget.dataset);
var item = this.data.itemObj;
//同步获取 本地数据
let saveObj = wx.getStorageSync('collect') || {};
if(saveObj.hasOwnProperty(item.docid)){
//已经存储过 要删除
delete saveObj[item.docid];
}else{
//没存储过 加入对象中
saveObj[item.docid] = item;
}
//判断结束以后 将最新的对象 存储到本地
wx.setStorage({
data:saveObj,
key:"collect",
success:(res)=>{
//添加成功 将最新的数据对象存储给data
this.setData({
collectNews:saveObj
})
}
})
// let eventChannel = this.getOpenerEventChannel();
// eventChannel.emit('back', {
// data: '接收到了'
// })
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// let eventChannel = this.getOpenerEventChannel();
// 监听aishang事件，获取上一页面通过eventChannel传送到当前页面的数据
// eventChannel.on('lalala', function (data) {
// console.log('上页传来的参数：', data);
// })
// 异步取法
wx.getStorage({
key: 'collect',
success:(res)=>{
console.log(res.data);
this.setData({
collectNews: res.data,
})
}
})
console.log(options);
let newData = decodeURIComponent(options.item);
this.setData({
itemObj:JSON.parse(newData).item
})
console.log(this.data.itemObj);
},
3、在收藏列表页：
左滑可以进行删除收藏的新闻：
点击x号删除已收藏的文章
deleteCollect(e){
let item = e.currentTarget.dataset.item;
let collectArr = this.data.collectNews;
console.log(collectArr);
if(collectArr.hasOwnProperty(item.docid)){
//已经收藏过 要删除
delete collectArr[item.docid];
}
//判断结束以后 将最新的对象 存储到本地
wx.setStorage({
data:collectArr,
key:"collect",
success:(res)=>{
//添加成功 将最新的数据对象存储给data
this.setData({
collectNews:collectArr
})
}
})
},
在onshow里面监听页面（防止在列表页收藏之后，再再详情页收藏没有效果）
