微信小程序版博客——用户中心页面设计问题汇总
微信小程序版博客——用户中心页面设计问题汇总
在上一篇优化了授权登录之后，本篇主要记录小用户中心的设计及一些问题
主要涉及截图下面的几个功能，其他的想到可以再添加：
截图1
最近浏览功能
最近浏览还是利用的小程序的10M本地缓存来实现，当用户浏览文章时，将文章的一些关键信息保存至缓存中。
当点击最近浏览时从缓存中读取数据。有一点需要注意下，由于本地缓存是有限的，所以最近浏览有个上限，默认30条，这里可以随意控制。
相关代码如下：
//最近浏览
var postsRecent = wx.getStorageSync('posts_Recent');
var content = {};
content['imageUrl'] = recentUrl;
content['title'] = post.title;
content['time'] = util.formatTime(new Date());
if (postsRecent) {
postsRecent[post.id] = content;
if (Object.getOwnPropertyNames(postsRecent).length > 30) {
for (var item in postsRecent) {
delete postsRecent[item];
break
}
}
wx.setStorageSync('posts_Recent', postsRecent);
}
else {
postsRecent = {};
postsRecent[post.id] = content;
wx.setStorageSync('posts_Recent', postsRecent);
}这里有个坑的地方，保存至缓存原本想用数组的，但是数据需要有判重的逻辑，用户可能会点击多次，这样代码逻辑感觉有点麻烦。
后来还是使用对象了，但使用对象也有个问题，就是当属性个数超出既定的阈值时，需要删除第一个属性。
找了半天没发现优雅的方法，于是有了下面那段for循环：
for (var item in postsRecent) {
delete postsRecent[item];
break
}这样我们就可以在最近浏览页面加载数据啦，这里还有一个小问题就是需要倒序加载，所以用了reverse()方法：
if (Object.getOwnPropertyNames(postsRecent).length > 0) {
for (var item in postsRecent) {
var post = {};
post['id'] = item;
post['title'] = postsRecent[item]['title'];
post['imageUrl'] = postsRecent[item]['imageUrl'];
post['created_at'] = postsRecent[item]['time'];
posts.push(post);
}
that.setData({
posts: posts.reverse(),
nodata: false,
nomore: true
})
}页面专题还是采用了之前专题页面的样式，只是去掉了Tab页：
截图2
我的收藏功能
收藏功能页和最近浏览页共用了同一个页面，代码也比较接近，区别的是取消收藏时记得移除对应的缓存数据。
另外就是动态加载下NavigationBar：
wx.setNavigationBarTitle({
title: '最近浏览'
})还有就是提醒下用户，收藏的上限，用户进来时会有个顶部提示：
截图3
但总觉得不是很好，因为用户每次进来都有这个提示，后面还是改下吧，做个类似不再提示的对话框。
功能反馈功能
功能反馈功能实际是接的小程序的客服消息功能，只需要一句代码：
<button open-type="contact" />点击按钮后自动跳转至客服会话。
截图4
微信提供网页版客服工具接收消息，也可以调用客服消息接口发送客服消息，但这个比较麻烦点，需要配置接口，然后接入，具体可以看文档。
截图5
联系作者与关于功能
这两个页面其实没什么好说的，就是个静态页面，有一个小优化，就是在介绍自己的时候，邮箱之类的可以点击复制，这样用户可以轻松复制,利用小程序提供的设置系统剪贴板的功能API来实现：
wx.setClipboardData({
data: data,
success: function (res) {
wx.getClipboardData({
success: function (res) {
console.log(res.data)
}
})
}
})
截图6
总结
到这里，我的小程序版博客基本上开发的差不多了，就等着能审核通过了。