先自己繪制了一個丑陋的原型圖，然后開始在小程序上繪制頁面，然后設計樣式，一路過來總結就是哪里不懂查哪里之旅~
原型設計和分析
原型圖效果
文章詳情.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 中傳遞過來的值
ok，查看文章詳情功能到這里了（詳情頁最好是直接用 web-view 展示，但是個人開發不支持 web-view 組件）。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
