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

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

文章详情页样式设计

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

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
    })
  },

截图7

打赏功能实现

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

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

截图8

分享功能实现

分享需要用到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;
}

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

待解决问题

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

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

总结

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

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