收藏功能(含作者及栏目收藏)
首先将含有收藏功能的地方标注出来:
1处收藏按钮为作者收藏与栏目收藏,当用户按下按钮后会变为已收藏、再按下去则为取消收藏。在开发过程中,主要是对按钮状态的判断
模板结构:
{{allReady}}
处理逻辑:
ColletButton: function(e) {
let id = e.currentTarget.dataset.id;
let have = e.currentTarget.dataset.have;
let parentid = e.currentTarget.dataset.parentid;
let user = wx.getStorageSync('user') || {};
wx.showLoading({
title: '正在处理',
});
if (!have) {
Api.fetchPost(Api.collection, { userid: user.openid, id: id, type: 1, have: 1 }, (err, res) => {
if (res.ret == 200) {
wx.hideLoading();
vm.KaTeX parse error: Expected 'EOF', got '}' at position 51: …}) }̲ else {...} …set({ allReady: “收藏”, have: false })
} else {…}
});
};
}
2处和3处的收藏逻辑基本相同,只是3会判断是否已经收藏此作者
模板结构:
收藏按钮处理方法:
onRecommStart:function(e){
let that = this;
let user = wx.getStorageSync(‘user’) || {};
let id = e.currentTarget.dataset.id;
let parentid = e.currentTarget.dataset.parentid;
let have = e.currentTarget.dataset.have;
let list = vm.
set({authors:list});
setTimeout(function(){
//此处为刷新顶部收藏栏数据
that.getColAutData();
},1000)
},
4处为栏目收藏区域,使用了scroll-view组件,左右滑动方式方便用户查看自己已经收藏的栏目。需要注意的是需要在小程序onLoad或onShow时,取到栏目的个数,再计算组件整体宽度。
模板:
.... 逻辑(请注意wWidhth值的计算): ... colData.data.map(item => { Api.fetchGet(Api.column + item, (err, res) => { if (res.data) { columnAutData.push(res.data.channel); if (columnAutData.length == colData.data.length) { vm.$set({ columnColtDatas: columnAutData, wWidhth: (colData.data.length * 694) + 44, dataReady: true }); }; }; }); }); ...1.8 个人中心功能
个人中心主简单呈现个人信息、用户收藏的作者/栏目统计、用户已浏览的文章记录。值得注意的是,页面onShow周期时需要刷新用户的收藏统计信息。
1.9 浏览记录功能
浏览记录模块在个人中心页面中:
1.数据来源为用户浏览文章时的上报,服务端做时间戳记录(浏览去重)等工作。
2.在开发列表加载逻辑时,需要注意验证一下拿到数据的一致性。因为运营端可能已经删掉某篇文章,而用户的上报的浏览记录又是过去时,所以对于这种情况的发生,需要在数据字段做标记、或者在删稿流程上形成通知机制。
1.10 评论功能
因为信息审核和登录态的问题,腾讯大家小程序评论功能折中选择调用【珊瑚评论】记录接口,仅做评论内容展示。
1.11 分享功能(含首页)
分享功能都在onShareAppMessage()函数里,不同于右上角分享按钮,如果在页面中某个地方添加分享功能,需要button绑定属性open-type=”share”。除此之外,还需要相关分享属性如:
1.12 评分功能
评分功能在文章底层页中,用户对文章的评分操作会形成:
1.这一篇文章的评分数据依据。
2.这一篇文章在栏目的栏目评分依据
3.这一篇文章作者的评分依据
在开发中,评分功能由多个功能函数组成,大致可以分为渲染、用户操作、服务器操作回调、还有数据换算等一些函数方法。