開發技術棧：mpvue + Vant Weapp + 小程式

1. 小程式元件的生命週期

        因為使用了mpvue的原因，小程式元件不僅有vue的生命週期函式，並且還還同時擁有小程式的生命週期函式（和vue的生命週期函式同級）

        小程式的生命週期函式包括：  

               onLoad () : 頁面載入時觸發。一個頁面只會呼叫一次

               onShow () : 頁面顯示/切入前臺時觸發  => 常用，每次載入元件請求資料，vue中一般用路由監聽實現

               onReady () : 頁面初次渲染完成時觸發

               onHide () : 頁面隱藏/切入後臺時觸發  => 常用

               onUnload () : 頁面解除安裝時觸發

2. 上拉重新整理，下拉載入

       小程式中的上拉重新整理和下拉載入是是比較容易實現的，步驟如下：

•  在頁面對應的main.json 配置裡面配置 enablePullDownRefresh 和 onReachBottomDistance 這兩個屬性

{
    "enablePullDownRefresh": true,
    "onReachBottomDistance": "30px",
    "usingComponents": {
        "van-nav-bar": "/static/vant/nav-bar/index",
        "van-loading": "/static/vant/loading/index"
      }
}
 

• 監聽頁面的 onPullDownRefres() 和 onReachBottom () 函式

           常見的頁面事件有三種：上拉重新整理、下拉載入、頁面滾動。都是和生命週期函式同級

3.  小程式的圖片懶載入

         vue中實現圖片懶載入的效果需要使用外掛 vue-lazyload ；但是在小程式裡面不需要這麼複雜，只需要使用小程式提供的 image 元件並使用它的 lazy-load 屬性即可。

注意： 一般使用圖片懶載入的情況都是在圖片列表中，使用一般可以在這個圖片列表之外套一個 scroll-view 元件（一般是縱向的）！

4. mpvue框架下小程式中的富文字的顯示 mpvue-wxParse

安裝：npm i mpvue-wxparse

頁面中引入：import wxParse from 'mpvue-wxparse';

                      components: { wxParse },

使用wxParse元件：

                      <div>

                              <wxParse :content="article" @preview="preview" @navigate="navigate" />

                      </div>

常見屬性：

5. 常用的小程式的原生元件

        view：檢視容器

        scroll-view：可滾動檢視區域

        swiper：滑塊檢視容器（輪播圖）

        image：圖片（主要使用 lazy-load 屬性，做圖片懶載入）

        input：輸入框（主要使用 confirm-type 屬性，設定鍵盤右下角按鈕的文字，僅在type='text'時生效）

文章僅為本人學習過程的一個記錄，僅供參考，如有問題，歡迎指出！