LZ很沮喪，因為發現這個專案可能無法實現大部分預期的功能並且不會有太多人看這些文章，已經不太想寫編碼過程，但本著寫文章不僅是經驗分享還是對自己程式設計的記錄及自身知識的驗證，因此咬牙繼續寫完這個專案的相關文章。如果有看到文章的並有跟著學習的朋友要注意目前小程式僅支援https協議的API，當然也可以不採用API方式利用網頁解析獲得資料，但是這只是個學習專案的過程，本著快速學習開發小程式的精神暫時不做深入探討。

1、頁面生命週期函式的利用

在學習過程中會碰到生命週期函式，這是框架自身封裝的一些特有的功能，可以聯想到Struct、Spring裡的攔截器或servlet當中的過濾器監聽器等，都是採用類似的原理在增強功能。頁面生命週期函式可以更好的幫助我們實現頁面邏輯與資料之間的互動。

最常用到的是onLoad,onPullDownRefresh,onReachBottom等主要是設計頁面資料初始化及上拉、下拉重新整理。另外想要操作小程式前後臺切換時的行為可以使用onShow,onHide函式。在本次專案中主要運用到了以下的函式：

onLoad、以文章列表頁為例

/**
 * 獲取部落格文章列表
 * 
 * @obj 傳入的事件本身
 */
function getArticleList(obj){
  var page = obj.data.page
  wx.request({
    url: API_URL+"getarticlelist",
    data: {
      access_token: ACCESS_TOKEN,
      page: page
    },
    header: {
      'content-type': "application/json"
    },
    success: function (res) {
      console.log(res.data)
      if (res.data.page + 1 > res.data.count / res.data.size) {//判斷是否超過頁數
        obj.setData({
          noMore: true,
          loadHidden: true,
          list: obj.data.lists
        })
        return;
      }
      var dataList = []
      obj.setData({
        lists: dataList.concat(obj.data.lists, res.data.list),
        page: ++obj.data.page
      })
    }
  })
}
 

module.exports={
  getArticleList: getArticleList
}

module.exports是對自定義宣告方法的一種匯出，使得其他JS檔案可以呼叫該js中的方法

wx.request是小程式呼叫的微信的API功能，該方法是發起請求

（API的使用基本都與上述例子類似，都編寫的邏輯層程式碼中，以wx.xxx方式呼叫）

OBJECT引數說明：

success返回引數說明：

我們主要會用到request的url,data,success屬性

url中因為預設資料地址相同將其定義為常量API_URL並拼接字串組成完整的路徑（有興趣瞭解REST路徑的可以去看看我轉載的一些有關於REST API的文章，開發當中會常常涉及到的）

data主要傳遞一些引數或者頁面資料，ACCESS_TOKEN是前面文章提到的臨時令牌token，用來訪問資料API用的

success 為成功後的回撥函式，主要利用setData方法對資料進行重新整理。這兒要注意不要使用類似

this.data.xxx=xxx

的方法去重新整理資料了，LZ在ionic的開發中吃透了這種苦，幸好小程式開發中，明確的說出了，採用上述方法會使得頁面資料無法重新整理，因此堅決使用this.setData方法重新整理頁面資料。

另外method方法在我們上傳檔案，測試不同型別的介面時也會常常用到。

2.template模板的樣式最好在app.wxss全域性樣式中定義

上篇文章有用到template模板的知識，後面認真運用發現實際上像page頁面那樣新建資料夾，並建立wxss樣式檔案並不能實現對template模板樣式的操控。經過實踐，最終發現，template模板樣式應在app.wxss全域性樣式中實現才會產生效果，以下是採用模板介面後的效果圖：

3.上拉至底的重新整理

當頁面到達底端時會出現載入更多選項，由loadHidden屬性控制其顯示，並且到達頁面底端會自動呼叫onReachBottom生命週期函式

onReachBottom: function () {
    if(!this.data.noMore){
      this.setData({ loadHidden: false })
      console.log("xxxxx" + this.data.noMore)
    }else{
      wx.showToast({
        title: '我是有底線的',
        icon: 'none',
        duration: 2000
      })
    }

對應wxml結構

以上noMore是控制是否還有更多資料，當沒有更多資料時會設定loadHidden屬性隱藏載入更多的選項，並且呼叫小程式自身的提示框進行提示wx.showToast

主要用到了title顯示標題提示內容，duration設定提示框停留在頁面的時間

以下是效果：

以下是小程式文件的具體引數介紹：

OBJECT引數說明：

icon有效值