詳情 - 功能完善
本文配套視訊地址： v.qq.com/x/page/f055…
開始前請把
ch4-3分支中的code/目錄匯入微信開發工具
這一節中，我們把詳情的其他功能完善起來：下一篇、 分享、 返回列表。
Step 1. 增加 下一篇 功能
增加 下一篇 的功能，我們需要在檢視中繫結一個事件，來觸發程式碼中的響應函式，此函式會呼叫介面，返回下一篇文章內容資料。
1、修改檢視檔案 detail.wxml，增加相應的繫結事件
<button class="footbar-btn clearBtnDefault" bindtap="next">下一篇</button>
複製程式碼2、修改程式碼 detail.js，增加繫結事件對應的 next 及相關函式：
next(){
this.requestNextContentId()
.then(data => {
let contentId = data && data.contentId || 0;
this.init(contentId);
})
},
requestNextContentId () {
let pubDate = this.data.detailData && this.data.detailData.lastUpdateTime || ''
let contentId = this.data.detailData && this.data.detailData.contentId || 0
return util.request({
url: 'detail',
mock: true,
data: {
tag:'微信熱門',
pubDate: pubDate,
contentId: contentId,
langs: config.appLang || 'en'
}
})
.then(res => {
if (res && res.status === 0 && res.data && res.data.contentId) {
util.log(res)
return res.data
} else {
util.alert('提示', '沒有更多文章了!')
return null
}
})
}
複製程式碼大概介紹下這兩個函式：
點選觸發 next 函式，它會先呼叫 requestNextContentId，通過把當前文章的 lastUpdateTime 和 contentId 引數傳遞給後端，後端會返回下一篇文章的 contentId，這樣我們就知道了文章 Id，然後就像剛開始一樣，把 contentId 再次傳遞給 init(contentId) 函式，獲取文章的詳情資料，然後是渲染檢視……
這個時候，可能你已經發現了一個使用者體驗上的 bug：當頁面滾動到一定程度後點選下一篇，新的頁面沒有滾動到頂部。所以我們需要修復這個 bug，當文章更新後，正常情況下，頁面應該滾動到頂部，也就是滾動條在最開始位置。現在我們開始修復它：
scroll-view 元件有個屬性 scroll-top，這個屬性代表著滾動條當前的位置，也就是說，當它的值為 0 時候，滾動條在最頂部，所以我們需要在資料 data 中記錄這個值，當需要文章滾動到頁面頂部時候，我們只需要修改 scroll-top 的值就可以了。
這裡我們用 scrollTop 來表示：
// 修改 detail.js 的資料 data
data:{
scrollTop: 0,
detailData: {}
}
複製程式碼修改檢視檔案，注意增加 enable-back-to-top 屬性，作用就不解釋了，直接看屬性名的單詞應該就明白：
<scroll-view scroll-y="true" scroll-top="{{ scrollTop }}" enable-back-to-top="true" class="root-wrap">
複製程式碼當我們需要文章返回到頂部時候，只要設定這個變數值就可以了。這裡我們對賦值操作提取出單獨的函式：
goTop () {
this.setData({
scrollTop: 0
})
}
複製程式碼在函式 init() 中呼叫：
init (contentId) {
if (contentId) {
this.goTop()
this.requestDetail(contentId)
.then(data => {
this.configPageData(data);
})
//呼叫wxparse
.then(()=>{
this.articleRevert();
});
}
}
複製程式碼Step 2. 增加 分享 功能
呼叫小程式會對分享事件做監聽，如果觸發分享功能後，監聽事件會返回一個物件，包含了分享出去的資訊內容，並且可以分別對分享成功和分享失敗做處理
<!--
<button class="footbar-share clearBtnDefault">
<view class="icon footbar-share-icon"></view>
</button>
-->
<button class="footbar-share clearBtnDefault" open-type="share">
<view class="icon footbar-share-icon"></view>
</button>
複製程式碼button 元件增加了 open-type="share" 屬性後，就可以觸發 onShareAppMessage 監聽事件：
onShareAppMessage () {
let title = this.data.detailData && this.data.detailData.title || config.defaultShareText;
let contentId = this.data.detailData && this.data.detailData.contentId || 0;
return {
// 分享出去的內容標題
title: title,
// 使用者點選分享出去的內容，跳轉的地址
// contentId為文章id引數；share引數作用是說明使用者是從分享出去的地址進來的，我們後面會用到
path: `/pages/detail/detail?share=1&contentId=${contentId}`,
// 分享成功
success: function(res) {},
// 分享失敗
fail: function(res) {}
}
},
複製程式碼這裡需要我們注意下，此介面對部分版本不支援，所以如果版本不支援時候，我們要給使用者一個提示資訊。所以我們需要給分享按鈕另外繫結一個點選事件，如果不支援的話，提示使用者：
notSupportShare () {
// deviceInfo 是使用者的裝置資訊，我們在 app.js 中已經獲取並儲存在 globalData 中
let device = app.globalData.deviceInfo;
let sdkVersion = device && device.SDKVersion || '1.0.0';
return /1\.0\.0|1\.0\.1|1\.1\.0|1\.1\.1/.test(sdkVersion);
},
share () {
if (this.notSupportShare()) {
wx.showModal({
title: '提示',
content: '您的微信版本較低，請點選右上角分享'
})
}
}
複製程式碼在檢視中繫結 share 監聽事件：
<!--
<button class="footbar-share clearBtnDefault" open-type="share">
<view class="icon footbar-share-icon"></view>
</button>
-->
<button class="footbar-share clearBtnDefault" bindtap="share" open-type="share">
<view class="icon footbar-share-icon"></view>
</button>
複製程式碼Step 3. 增加 返回列表 功能
我們需要在 detail.js 中增加一個返回列表的函式，然後檢視中繫結觸發事件
// detail.js 增加以下內容
Page({
back(){
wx.navigateBack()
}
})
複製程式碼在檢視中繫結事件：
<!--
<button class="footbar-back clearBtnDefault">
<view class="icon footbar-back-icon"></view>
</button>
-->
<button class="footbar-back clearBtnDefault" bindtap="back">
<view class="icon footbar-back-icon"></view>
</button>
複製程式碼由於 wx.navigateBack 相當於瀏覽器的 history，通過瀏覽記錄返回的。那麼如果使用者並不是從列表進來的，比如是從分享出去的詳情開啟呢？這時候記錄是不存在的。
如果是通過分享進來的，有帶進來引數 share=1，如 step 2 中的分享功能，那麼我們在剛進到頁面時候，就可以通過 share=1 是否存在來標識出來：
onLoad (option) {
let id = option.contentId || 0;
this.setData({
isFromShare: !!option.share
});
this.init(id);
},
複製程式碼然後修改 back 函式，如果是從分享入口進來的，那麼我們就通過導航的方式來返回列表；如果不是，就正常的通過載入記錄來返回：
// detail.js 增加以下內容
Page({
back(){
if (this.data.isFromShare) {
wx.navigateTo({
url: '../index/index'
})
} else {
wx.navigateBack()
}
}
})
複製程式碼至此，我們簡單的小程式實戰已經完成！！！
iKcamp官網：www.ikcamp.com
訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程式｜基於最新版1.0開發者工具之初中級培訓教程分享》。 包含：文章、視訊、原始碼
iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、噹噹開售。
【11月11號】上海iKcamp最新活動
與
“天天練口語”小程式總榜排名第四、教育類排名第一的研發團隊，面對面溝通交流。
2019年，iKcamp原創新書《Koa與Node.js開發實戰》已在京東、天貓、亞馬遜、噹噹開售啦！