微信小程序教學第四章第三節（含視頻）：小程序中級實戰教程：詳情-功能完善

詳情 - 功能完善

本文配套視頻地址： v.qq.com/x/page/f055…

---

開始前請把 ch4-3 分支中的 code/ 目錄導入微信開發工具
這一節中，咱們把詳情的其餘功能完善起來：下一篇、 分享、 返回列表。

Step 1. 增長 下一篇 功能

增長 下一篇 的功能，咱們須要在視圖中綁定一個事件，來觸發代碼中的響應函數，此函數會調用接口，返回下一篇文章內容數據。

一、修改視圖文件 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 屬性，做用就不解釋了，直接看屬性名的單詞應該就明白：

<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最新活動

報名地址：www.huodongxing.com/event/54099…

與「每天練口語」小程序總榜排名第4、教育類排名第一的研發團隊，面對面溝通交流。

---

2019年，iKcamp原創新書《Koa與Node.js開發實戰》已在京東、天貓、亞馬遜、噹噹開售啦！