微信小程序版博客——用户中心页面设计问题汇总

在上一篇优化了授权登录之后,本篇主要记录下用户中心的设计及一些问题

主要涉及截图下面的几个功能,其他的想到可以再添加:

截图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) 
          }
        })
      }
    })

image

总结

到这里,我的小程序版博客基本上开发的差不多了,就等着能审核通过了。

作者:玄冰
欢迎关注我的微信公众号和博客小程序
欢迎关注我的公众号 欢迎关注我的公众号