微信小程序版博客——文章详情页设计及问题汇总

在上一篇主要将列表页设计完成,并优化了一些交互类问题,本篇主要介绍下文章详情页开发设计过程及过程中遇见的坑

文章详情页样式设计

文章详情页差不多分三个部分:

  1. 标题部分——文章标题:头图,作者,时间之类
  2. 文章内容——html部分:通过wxParse组件转
  3. 底部tabBar部分:分享,收藏,返回之类的功能

由于ghost没有评论部分,所以暂时放弃接入评论功能。先来看下整体效果:

截图1

wxParse使用

wxParse是将html格式的富文本内容转换成小程序可展示的内容的组件,在框架搭建那一篇文章中有提到。

引入必要的文件之后,在.wxss,.wxml,.js文件下分别引用:

@import "/wxParse/wxParse.wxss";

<import src="../../wxParse/wxParse.wxml" />

const WxParse = require('../../wxParse/wxParse.js');

然后引用模板赋值就可以了,使用起来还是比较简单的,不详细说了。

<template is="wxParse" data="{{wxParseData:article.nodes}}" />

WxParse.wxParse('article', 'html', post.html, that, 5);

但这个组件目前来说不是很完美,目前发现的问题如下:

  • 代码区域的换行符没有了,导致所有的代码都是一行的。
  • 图片与文字之间没有空行,样式上不是特别好看
  • 无序的项目符号与文字不对齐,看上去有点别扭。
  • 引用的背景色不高亮,样式不是特别醒目。

截图2

截图3

截图4

截图5

目前先放弃这块优化,等主要功能完成后看看能否将这些问题优化下。

自定义底部tabBar

底部tabBar原本想接入评论的,但发现服务端目前不支持,只好放弃,同时也发现个人开发者貌似也不允许有评论性质的功能(我的小程序目前审核了两次都没有通过,比较悲催)

于是先随便设计几个功能,站着位,主要利用有赞UI的Panel,然后底部固定悬浮就可以了,然后下几个icon实现截图中的几个功能,样式可参考截图:

//底部固定悬浮样式:
.detail-tab {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}

截图6

返回功能实现

接下来就是实现底部tabBar中的几个功能了,首先是返回功能,这个比较简单,我只需要返回上一页,看下了文档使用wx.navigateBack即可。

  //返回上一页  
  navigateBack: function(e){
    wx.navigateBack(); 
  },

这里可以顺便把wx.navigateTo,wx.redirectTo,wx.switchTab,wx.reLaunch都看下,熟悉下API。

收藏功能实现

收藏功能需要使用小程序的数据缓存,可以看下文档数据缓存这块,同一个微信用户,同一个小程序 storage上限为10MB。

就是用户在点击收藏时,将对应的文章的Id记录到数据缓存中。使用数据缓存记得10MB的上限,合理利用。

点击收藏时更新数据缓存,变化收藏icon,现实收藏提示,收藏提示用的有赞的Toast轻提示:

  //收藏
  collection:function(e){
    var postsCollected = wx.getStorageSync('posts_Collected');
    var postCollected = postsCollected[this.data.post.id];
    postCollected = !postCollected;
    postsCollected[this.data.post.id] = postCollected;
    wx.setStorageSync('posts_Collected', postsCollected);
    this.showZanToast(postCollected?'已收藏':'已取消收藏');
    this.setData({
      collected: postCollected
    })
  },

image

打赏功能实现

个人开发者貌似不支持支付,贴支付码感觉也比较敏感,所以这里没有具体实现,用了下有赞的弹出框:

 //打赏
 reward:function(e){
   this.showZanDialog({
     content: '您的分享与关注是对我最大的打赏!'
   }).then(() => {
     console.log('=== shoe reward ===', 'type: confirm');
   });
 },

image

分享功能实现

分享需要用到onShareAppMessage,可以看下API文档,当定义该方法时,点击右上角会出现转发。
代码还是比较简单的:

 onShareAppMessage: function () {
   return {
     title: this.data.post.title,
     path: '/pages/detail/detail?blogId=' + this.data.post.id
    }
  },

这里需要注意的是path,路径一定要填对,其实就是你在app.json中维护的路径。

但这里开发的时候碰到两个问题。一个是我是自定义的转发icon按钮,需要怎么实现,从文档中发现只有button设置open-type属性,会默认调用分享事件:

<button class="btn" open-type="share">

但随之而来的就是样式问题了,在设计底部的时候是通过view和icon来实现的,于是只能在外层嵌套一层button:

  <view class="zan-col zan-col-6 item-body">
    <button class="btn" open-type="share">
      <image class='iconimage' src="/images/icon/share.png"></image>
      <view class='zan-font-12 zan-c-gray-dark'>分享</view>
    </button>
  </view>

接下来就要移除button的默认样式,这里坑死我了,首先border,这个网上有,设置after将boder移除,比较坑的是button样式中的line-height,貌似无法移除,只能覆盖,但这个数值不好定义,很难保证与其他几个icon平行,再加上屏幕大小是不确定的。

所以一气之下把四个功能icon都套了一层button的样式,不懂有没有更优雅的方式,前端基本功不扎实呀。

.detail-tab .item-body .btn {
  line-height: 120%;
  background-color: #fff;
}

.detail-tab .item-body .btn::after {
  border: none;
}

image

目前小程序只能发送给朋友或者群,貌似还不能分享朋友圈。这个暂时忽略,后期可以搞个生成图片分享的功能。

待解决问题

到这里,基本上详情页差不多了,但问题依旧很多,后期需要解决:

  • 首先是上面整理的wxParse组件的问题
  • 分享链接点进去只能看到分享的文章,无法跳转到其他页面
  • 文章中的链接不起作用(这个貌似比较复杂)
  • 其他一些细节体验

总结

主要的几个页面基本上开发完了,最后就是用户中心的几个功能了。

唯一无奈的是个人开发者,小程序目前挺难审核通过呀,不知道有什么审核敲门。

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