怎么在微信小程序中实现文章详情页面

这篇文章给大家介绍怎么在微信小程序中实现文章详情页面，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联制作网站网页找三站合一网站制作公司,专注于网页设计,网站建设、做网站,网站设计,企业网站搭建,网站开发,建网站业务,680元做网站,已为上千服务,创新互联网站建设将一如既往的为我们的客户提供最优质的网站建设、网络营销推广服务!

原型设计和分析

原型图效果

文章详情.png

为什么要这么设计？

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

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

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

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

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

原型实现

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

页面实现

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

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

 
 web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
 
 
 
 
  {{content}}
 
 
  
  
   
  
  
 
 
  类型：{{postType}}
  作者：{{who}}
 
 发布时间：{{date}}
 网页链接：{{url}}
 
  
 
 

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

详情页面的样式文件 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 中传递过来的值

复制代码 代码如下:

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

关于怎么在微信小程序中实现文章详情页面就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。