微信小程序-文章详情页面实现

先自己绘制了一个丑陋的原型图，然后开始在小程序上绘制页面，然后设计样式，一路过来总结就是哪里不懂查哪里之旅~

原型设计和分析

• 原型图效果

  
  文章详情.png

• 为什么要这么设计？

正常情况下是设计先出设计图，然后服务器和我们一同讨论接口如何设计，然后根据服务器返回的结果，我们再去界面上显示。但是这里我们使用的是第三方的接口，所以只能他有什么我们显示什么了。

服务器接口返回的数据如下如：

小程序-服务器返回结果.png

分析json结果，我们这里为了简单，也就只显示几个元素分别是时间,标题，类型，作者，图片。

整体是垂直排列，然后图片是根据是否有返回来动态显示，最后的心形图标是为了收藏使用（目前还未实现收藏功能）

原型实现

在实现的过程中一步步思考，首先是页面如何实现，然后是数据如何获取，最后是如何动态显示数据

• 页面实现
  从原型图分析，我们的根布局需要能够整体垂直滑动，然后图片水平显示三行（后来实现的时候发现水平显示图片，图片太小不美观，故改成图片整体垂直摆放）

详情页面的整体布局 reading-detail.wxml

<view>
  <view class='top-text'>
    <text>web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。</text>
  </view>
  <view class="divLine"></view>
  <view>
    <view class='content-text'>
      <text>{{content}}</text>
    </view>
    <view class='image-container'>
      <block wx:for="{{images}}" wx:for-item="item" wx:for-index="idx">
        <view class='image-container' catchtap='onImageClick' data-imageUrl="{{item.imageUrl}}">
          <image  wx:if="{{hadImage}}" class='image-item' src="{{item.imageUrl}}" mode='widthFix'></image>
        </view>
      </block>
    </view>
    <view>
      <text class='type-text'>类型：{{postType}}</text>
      <text class='type-author'>作者：{{who}}</text>
    </view>
    <view><text class='type-date'>发布时间：{{date}}</text></view>
    <view><text class='url-text'>网页链接：{{url}}</text></view>
    <view class='view-like' catchtap='onLikeClick'>
      <image class='icon-like' src='/images/detail/icon_like.png'></image>
    </view>
  </view>
</view>

布局还算好做的，难点就在于页面的样式如何去调整（难也是相对新手，比如我这种小白吧）
详情页面的样式文件 wxss

.scroller-container{
  height: 1300rpx;
}
.top-text{
  font-size: 24rpx;
  color: #999;
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.divLine{
 background: #D1D1D6;
 width: 100%;
 height: 2px;
 margin: 20rpx;
}

.content-text{
  margin: 20rpx;
  font-size: 40rpx;
  font-weight: 600rpx;
  color: #333;
}
.image-container{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  margin: 20rpx;
}

.image-item{
  width: 100%;
  height: 600rpx;
  padding-bottom: 20rpx;
}
.view-like{
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: center;
  justify-content: center;
}
.icon-like{
  width: 128rpx;
  height: 128rpx;
  margin-top: 20rpx;
}
.type-text{
  margin-left: 10rpx;
  font-size: 30rpx;
}
.url-text{
  margin-left: 10rpx;
  font-size: 24rpx;
}
.type-author{
  margin-left: 10rpx;
  font-size: 30rpx;
}
.type-date{
  margin-left: 10rpx;
  font-size: 30rpx;
}

在实现心形图标居中过程中align-items: center;(交叉轴上的对齐方式)没居中显示，查了下是需要设置显示为水平摆放，然后还需要设置justify-content: center;(表示在主轴上的对齐方式)这里有一篇文章介绍微信小程序布局挺好的微信小程序布局基础

• 数据获取
  通过上一个页面传递过来，目前是用最简单的url传值的形式传递

在 reading.js 文件中的点击事件传递数据

 /**
   * item 的点击事件
  */
  onGankTap:function(event){
    var url = event.currentTarget.dataset.posturl;
    var desc = event.currentTarget.dataset.postdesc;
    var postType = event.currentTarget.dataset.posttype;
    var who = event.currentTarget.dataset.postwho;
    var date = event.currentTarget.dataset.postdate;
    var images = event.currentTarget.dataset.postimages;

    wx.navigateTo({
      url: "reading-detail/reading-detail?url=" + url + "&content=" + desc + "&type=" + postType + "&who=" + who + "&date=" + date +"&images="+images 
    })
  },

在 reading-detail.js 文件中接受传递过来的数据，并对数据处理

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var url = options.url;
    var content = options.content;
    var postType = options.type;
    var who = options.who;
    var date = options.date;
    var images = options.images.split(',');
    var imageArray = [];
    var hadImage = false ;
    
    for (var i = 0; i < images.length; i++) {
        // 图片不为空则存到数组中
      if (images[i] != "undefined"){
        var obj = {
          imageUrl: images[i],
        }
        imageArray.push(obj);
      }
    }
    // 是否有图片
    if (imageArray.length > 0) {
      hadImage = true;
    } else {
      hadImage = false;
    }
    // 传递数据给ui显示
    this.setData({
      url: url,
      content: content,
      date: date,
      postType: postType,
      who: who,
      images: imageArray,
      hadImage: hadImage
    })
    // 标题
    wx.setNavigationBarTitle({
      title: "文章详情"
    })
  },

• 数据动态填充
  通过判断语句动态判断控制图片显示的变量是否有值，有则显示图片组件，没有则不显示图片组件。

在 reading-detail.wxml 中通过判断语句判断是否显示图片组件, hadImage 是 js 中传递过来的值

 <image  wx:if="{{hadImage}}" class='image-item' src="{{item.imageUrl}}" mode='widthFix'></image>

ok，查看文章详情功能到这里了（详情页最好是直接用 web-view 展示，但是个人开发不支持 web-view 组件）。

需要源码的可以联系我
微信号：weixin1105894953，联系请备注