本文配套視頻地址：
v.qq.com/x/page/f055… 開(kāi)始前請(qǐng)把 ch4-3 分支中的 code/ 目錄導(dǎo)入微信開(kāi)發(fā)工具
這一節(jié)中，我們把詳情的其他功能完善起來(lái)：下一篇、 分享、 返回列表。
Step 1. 增加 下一篇 功能
增加 下一篇 的功能，我們需要在視圖中綁定一個(gè)事件，來(lái)觸發(fā)代碼中的響應(yīng)函數(shù)，此函數(shù)會(huì)調(diào)用接口，返回下一篇文章內(nèi)容數(shù)據(jù)。
1、修改視圖文件 detail.wxml ，增加相應(yīng)的綁定事件
<button class="footbar-btn clearBtnDefault" bindtap="next">下一篇</button>
2、修改代碼 detail.js ，增加綁定事件對(duì)應(yīng)的 next 及相關(guān)函數(shù)：
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('提示', '沒(méi)有更多文章了!')
return null
}
})
}
大概介紹下這兩個(gè)函數(shù)：
點(diǎn)擊觸發(fā) next 函數(shù)，它會(huì)先調(diào)用 requestNextContentId ，通過(guò)把當(dāng)前文章的 lastUpdateTime 和 contentId 參數(shù)傳遞給后端，后端會(huì)返回下一篇文章的 contentId ，這樣我們就知道了文章 Id，然后就像剛開(kāi)始一樣，把 contentId 再次傳遞給 init(contentId) 函數(shù)，獲取文章的詳情數(shù)據(jù)，然后是渲染視圖……
這個(gè)時(shí)候，可能你已經(jīng)發(fā)現(xiàn)了一個(gè)用戶體驗(yàn)上的 bug ：當(dāng)頁(yè)面滾動(dòng)到一定程度后點(diǎn)擊下一篇，新的頁(yè)面沒(méi)有滾動(dòng)到頂部。所以我們需要修復(fù)這個(gè) bug ，當(dāng)文章更新后，正常情況下，頁(yè)面應(yīng)該滾動(dòng)到頂部，也就是滾動(dòng)條在最開(kāi)始位置。現(xiàn)在我們開(kāi)始修復(fù)它：
scroll-view 組件有個(gè)屬性 scroll-top ，這個(gè)屬性代表著滾動(dòng)條當(dāng)前的位置，也就是說(shuō)，當(dāng)它的值為 0 時(shí)候，滾動(dòng)條在最頂部，所以我們需要在數(shù)據(jù) data 中記錄這個(gè)值，當(dāng)需要文章滾動(dòng)到頁(yè)面頂部時(shí)候，我們只需要修改 scroll-top 的值就可以了。
這里我們用 scrollTop 來(lái)表示：
// 修改 detail.js 的數(shù)據(jù) data
data:{
scrollTop: 0,
detailData: {}
}
修改視圖文件，注意增加 enable-back-to-top 屬性，作用就不解釋了，直接看屬性名的單詞應(yīng)該就明白：
<scroll-view scroll-y="true" scroll-top="{{ scrollTop }}" enable-back-to-top="true" class="root-wrap">
當(dāng)我們需要文章返回到頂部時(shí)候，只要設(shè)置這個(gè)變量值就可以了。這里我們對(duì)賦值操作提取出單獨(dú)的函數(shù)：
goTop () {
this.setData({
scrollTop: 0
})
}
在函數(shù) init() 中調(diào)用：
init (contentId) {
if (contentId) {
this.goTop()
this.requestDetail(contentId)
.then(data => {
this.configPageData(data);
})
//調(diào)用wxparse
.then(()=>{
this.articleRevert();
});
}
}
Step 2. 增加 分享 功能
調(diào)用小程序會(huì)對(duì)分享事件做監(jiān)聽(tīng)，如果觸發(fā)分享功能后，監(jiān)聽(tīng)事件會(huì)返回一個(gè)對(duì)象，包含了分享出去的信息內(nèi)容，并且可以分別對(duì)分享成功和分享失敗做處理
<!-- <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" 屬性后，就可以觸發(fā) onShareAppMessage 監(jiān)聽(tīng)事件：
onShareAppMessage () {
let title = this.data.detailData && this.data.detailData.title || config.defaultShareText;
let contentId = this.data.detailData && this.data.detailData.contentId || 0;
return {
// 分享出去的內(nèi)容標(biāo)題
title: title,
// 用戶點(diǎn)擊分享出去的內(nèi)容，跳轉(zhuǎn)的地址
// contentId為文章id參數(shù)；share參數(shù)作用是說(shuō)明用戶是從分享出去的地址進(jìn)來(lái)的，我們后面會(huì)用到
path: `/pages/detail/detail?share=1&contentId=${contentId}`,
// 分享成功
success: function(res) {},
// 分享失敗
fail: function(res) {}
}
},
這里需要我們注意下，此接口對(duì)部分版本不支持，所以如果版本不支持時(shí)候，我們要給用戶一個(gè)提示信息。所以我們需要給分享按鈕另外綁定一個(gè)點(diǎn)擊事件，如果不支持的話，提示用戶：
notSupportShare () {
// deviceInfo 是用戶的設(shè)備信息，我們?cè)?app.js 中已經(jīng)獲取并保存在 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: '您的微信版本較低，請(qǐng)點(diǎn)擊右上角分享'
})
}
}
在視圖中綁定 share 監(jiān)聽(tīng)事件：
<!-- <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 中增加一個(gè)返回列表的函數(shù)，然后視圖中綁定觸發(fā)事件
// detail.js 增加以下內(nèi)容
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 相當(dāng)于瀏覽器的 history ，通過(guò)瀏覽記錄返回的。那么如果用戶并不是從列表進(jìn)來(lái)的，比如是從分享出去的詳情打開(kāi)呢？這時(shí)候記錄是不存在的。
如果是通過(guò)分享進(jìn)來(lái)的，有帶進(jìn)來(lái)參數(shù) share=1 ，如 step 2 中的分享功能，那么我們?cè)趧傔M(jìn)到頁(yè)面時(shí)候，就可以通過(guò) share=1 是否存在來(lái)標(biāo)識(shí)出來(lái)：
onLoad (option) {
let id = option.contentId || 0;
this.setData({
isFromShare: !!option.share
});
this.init(id);
},
然后修改 back 函數(shù)，如果是從分享入口進(jìn)來(lái)的，那么我們就通過(guò)導(dǎo)航的方式來(lái)返回列表；如果不是，就正常的通過(guò)加載記錄來(lái)返回：
// detail.js 增加以下內(nèi)容
Page({
back(){
if (this.data.isFromShare) {
wx.navigateTo({
url: '../index/index'
})
} else {
wx.navigateBack()
}
}
})
至此，我們簡(jiǎn)單的小程序?qū)崙?zhàn)已經(jīng)完成！?。?/p>
iKcamp官網(wǎng)：www.ikcamp.com
訪問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)較新｜微信小程序｜基于較新版1.0開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享》。
包含：文章、視頻、源代碼
iKcamp原創(chuàng)新書(shū)《移動(dòng)Web前端高效開(kāi)發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開(kāi)售。
