本文配套視頻地址: v.qq.com/x/page/f055…html
開始前請把
ch4-3
分支中的code/
目錄導入微信開發工具
這一節中,咱們把詳情的其餘功能完善起來:下一篇、 分享、 返回列表。前端
下一篇
功能增長 下一篇
的功能,咱們須要在視圖中綁定一個事件,來觸發代碼中的響應函數,此函數會調用接口,返回下一篇文章內容數據。小程序
一、修改視圖文件 detail.wxml
,增長相應的綁定事件後端
<button class="footbar-btn clearBtnDefault" bindtap="next">下一篇</button>
複製代碼
二、修改代碼 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
屬性,做用就不解釋了,直接看屬性名的單詞應該就明白:app
<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();
});
}
}
複製代碼
分享
功能調用小程序會對分享事件作監聽,若是觸發分享功能後,監聽事件會返回一個對象,包含了分享出去的信息內容,而且能夠分別對分享成功和分享失敗作處理
<!-- <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>
複製代碼
返回列表
功能咱們須要在 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前端高效開發實戰》已在亞馬遜、京東、噹噹開售。
與
「每天練口語」
小程序總榜排名第4、教育類排名第一的研發團隊,面對面溝通交流。
2019年,iKcamp原創新書《Koa與Node.js開發實戰》已在京東、天貓、亞馬遜、噹噹開售啦!