怎么在微信小程序中實(shí)現(xiàn)文章詳情頁(yè)面

這篇文章給大家介紹怎么在微信小程序中實(shí)現(xiàn)文章詳情頁(yè)面，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

原型設(shè)計(jì)和分析

原型圖效果

文章詳情.png

為什么要這么設(shè)計(jì)？

正常情況下是設(shè)計(jì)先出設(shè)計(jì)圖，然后服務(wù)器和我們一同討論接口如何設(shè)計(jì)，然后根據(jù)服務(wù)器返回的結(jié)果，我們?cè)偃ソ缑嫔巷@示。但是這里我們使用的是第三方的接口，所以只能他有什么我們顯示什么了。

服務(wù)器接口返回的數(shù)據(jù)如下如：

小程序-服務(wù)器返回結(jié)果.png

分析 json 結(jié)果，我們這里為了簡(jiǎn)單，也就只顯示幾個(gè)元素分別是 時(shí)間,標(biāo)題，類(lèi)型，作者，圖片 。

整體是垂直排列，然后圖片是根據(jù)是否有返回來(lái)動(dòng)態(tài)顯示，最后的心形圖標(biāo)是為了收藏使用（目前還未實(shí)現(xiàn)收藏功能）

原型實(shí)現(xiàn)

在實(shí)現(xiàn)的過(guò)程中一步步思考，首先是頁(yè)面如何實(shí)現(xiàn)，然后是數(shù)據(jù)如何獲取，最后是如何動(dòng)態(tài)顯示數(shù)據(jù)

頁(yè)面實(shí)現(xiàn)

從原型圖分析，我們的根布局需要能夠整體垂直滑動(dòng)，然后圖片水平顯示三行（后來(lái)實(shí)現(xiàn)的時(shí)候發(fā)現(xiàn)水平顯示圖片，圖片太小不美觀，故改成圖片整體垂直擺放）

詳情頁(yè)面的整體布局 reading-detail.wxml

<view>
 <view class='top-text'>
 <text>web-view 組件是一個(gè)可以用來(lái)承載網(wǎng)頁(yè)的容器，會(huì)自動(dòng)鋪滿(mǎn)整個(gè)小程序頁(yè)面。個(gè)人類(lèi)型與海外類(lèi)型的小程序暫不支持使用。</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'>類(lèi)型：{{postType}}</text>
  <text class='type-author'>作者：{{who}}</text>
 </view>
 <view><text class='type-date'>發(fā)布時(shí)間：{{date}}</text></view>
 <view><text class='url-text'>網(wǎng)頁(yè)鏈接：{{url}}</text></view>
 <view class='view-like' catchtap='onLikeClick'>
  <image class='icon-like' src='/images/detail/icon_like.png'></image>
 </view>
 </view>
</view>

布局還算好做的，難點(diǎn)就在于頁(yè)面的樣式如何去調(diào)整（難也是相對(duì)新手，比如我這種小白吧）

詳情頁(yè)面的樣式文件 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;
}

在實(shí)現(xiàn)心形圖標(biāo)居中過(guò)程中 align-items: center;(交叉軸上的對(duì)齊方式) 沒(méi)居中顯示，查了下是需要設(shè)置顯示為水平擺放，然后還需要設(shè)置 justify-content: center;(表示在主軸上的對(duì)齊方式) 這里有一篇文章介紹微信小程序布局挺好的微信小程序布局基礎(chǔ)

數(shù)據(jù)獲取

通過(guò)上一個(gè)頁(yè)面?zhèn)鬟f過(guò)來(lái)，目前是用最簡(jiǎn)單的 url 傳值的形式傳遞

在 reading.js 文件中的點(diǎn)擊事件傳遞數(shù)據(jù)

/**
 * item 的點(diǎn)擊事件
 */
 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 文件中接受傳遞過(guò)來(lái)的數(shù)據(jù)，并對(duì)數(shù)據(jù)處理

/**
 * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
 */
 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++) {
  // 圖片不為空則存到數(shù)組中
  if (images[i] != "undefined"){
  var obj = {
   imageUrl: images[i],
  }
  imageArray.push(obj);
  }
 }
 // 是否有圖片
 if (imageArray.length > 0) {
  hadImage = true;
 } else {
  hadImage = false;
 }
 // 傳遞數(shù)據(jù)給ui顯示
 this.setData({
  url: url,
  content: content,
  date: date,
  postType: postType,
  who: who,
  images: imageArray,
  hadImage: hadImage
 })
 // 標(biāo)題
 wx.setNavigationBarTitle({
  title: "文章詳情"
 })
 },

數(shù)據(jù)動(dòng)態(tài)填充

通過(guò)判斷語(yǔ)句動(dòng)態(tài)判斷控制圖片顯示的變量是否有值，有則顯示圖片組件，沒(méi)有則不顯示圖片組件。

在 reading-detail.wxml 中通過(guò)判斷語(yǔ)句判斷是否顯示圖片組件, hadImage 是 js 中傳遞過(guò)來(lái)的值

復(fù)制代碼 代碼如下:

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

ok，查看文章詳情功能到這里了（詳情頁(yè)最好是直接用 web-view 展示，但是個(gè)人開(kāi)發(fā)不支持 web-view 組件）。

關(guān)于怎么在微信小程序中實(shí)現(xiàn)文章詳情頁(yè)面就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。