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

<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>

.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;
}

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

/**
 * 生命周期函数--监听页面加载
 */
 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: "文章详情"
 })
 },