1. 生命週期和相關函式

Page({
    data: {},
    // Page 例項的生命週期函式
    onLoad: (option) => {  // 頁面初次載入時候觸發，只會觸發一次
        console.log(option.id) // 1
    },
    onReady: () => {},  // 頁面初次渲染完畢，只會觸發一次（頁面已經準備妥當，在邏輯層可以和檢視層進行互動了）
    onShow: () => {}, // 從別的頁面進入到當前頁面時呼叫
    onHide: () => {}, // wx.navigateTo 切換到其他頁面或者底部tab切換時觸發
    onUnload: () => {}, // 使用 wx.redirectTo 或者 wx.navigateBack 返回其他頁面時候觸發，當前頁面會被銷燬
    // 頁面使用者行為
    onPullDownRefresh: () => {},  // 需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh
    onReachBottom: () => {}, // 可以在app.json的window選項中或頁面配置中設定觸發距離onReachBottomDistance
    onShareAppMessage: () => {
        // 此事件需要 return 一個 Object，用於自定義轉發內容
        return {
            title: 'xxx',
            path: '/yyy',
        }
    },
    onPageScroll: (obj) => {
        console.log(obj.scrollTop) // 頁面在垂直方向已滾動的距離（單位px）
    },
    // 其他自定義函式
    getData: () => {
        this.formatDate() // 用 this.func 來訪問例項中的函式
    },
    formatDate: () => {},
})
 

2. this.setDate

this.setDate({
    key: value
}, callback)
key 的值非常靈活，可以以資料路徑的形式給出（字串形式），示例：
data: {
    myInfo: {
        name: 'wangxi',
        age: '26'
    },
    user: [{
        nickName: 'Tony'
        gender: 'male'
    }]

}
this.setData({
    'userInfo.name': 'Raychan'
    'user[0].gender': 'female'
})
 

setDate會更新 this.data 中對應的值（同步的過程）
並且把資料從邏輯層傳遞給渲染層，從而達到更新頁面的目的（非同步的過程）
回撥函式在setDate 對介面渲染完成後觸發

不要直接修改 this.data （注意和 vue 中修改資料的方式加以區別）

綜上，下面的程式碼是可以獲取到到對應的data值的(和 React 中的 setState 不同)

data: {
    name: 'wangxi'
}

this.setData({
    name: 'Raychan'
})

console.log(this.data.name) // Raychan
 

3. 路由

getCurrentPages() // 獲取當前頁面棧的例項

4. 模組化

// 公共程式碼匯出
module.export.funcName = funcName
// 引用
var name = require('funcName')

5. 模板

// define
<template name='tpl'></template>
// usage
<template is='tpl'></template>

6. 執行機制
小程式沒有重啟的概念
當小程式進入後臺，客戶端會維持一段時間的執行狀態，超過一定時間後（目前是5分鐘）會被微信主動銷燬
當短時間內（5s）連續收到兩次以上收到系統記憶體告警，會進行小程式的銷燬

7. 請求API

wx.request({
    url: 'test.php',
    data: {},
    header: { 'content-type': 'application/json' },
    success: function(res) {
         // 收到https服務成功後返回
         console.log(res.data)
    },
    fail: function() {
         // 發生網路錯誤等情況觸發
    },
    complete: function() {
         // 成功或者失敗後觸發
    }
})

8. 獲取系統資訊

wx.getSystemInfoSync()

9. 頁面互動反饋

// view 容器和 button 元件提供了 hover-class 屬性，觸控時會在該元件上加上對一個的樣式
<view hover-class="clsName"></view>
// 在耗時操作時加上 loading 屬性
<button loading="{{loading}}" bindtap="tap"></button>

data: { loading: false }
tap: () => {
    this.setData({
        loading: true
    })
    // ajax etc...
}

10. 顯示隱藏 toast

wx.showToast({
    title: 'xxx',
    icon: 'success',
    duration: 1500, // 1.5 秒後消失
})

wx.hideToast()

11. modal

wx.showModal({
    title: '標題',
    content: '告知當前狀態，資訊和解決方法',
    confirmText: '主操作',
    cancelText: '次要操作',
    success: function(res) {
        if (res.confirm) {
            console.log('使用者點選主操作')
        } else if (res.cancel) {
              console.log('使用者點選次要操作')
        }
     }
})

12. HTTP 請求

var hasClick = false;

Page({
  tap: function() {
    if (hasClick) {
      return
    }
    hasClick = true
    wx.showLoading()
    wx.request({
      url: 'https://test.com/getinfo',
      method: 'POST',
      header: { 'content-type':'application/json' },
      data: { },
      success: function (res) {
        if (res.statusCode === 200) {
          console.log(res.data)// 伺服器回包內容
        }
      },
      fail: function (res) {
        wx.showToast({ title: '系統錯誤' })
      },
      complete: function (res) {
        wx.hideLoading()
        hasClick = false
      }
    })
  }
})

13. 排查異常的方法
在使用wx.request介面我們會經常遇到無法發起請求或者伺服器無法收到請求的情況，我們羅列排查這個問題的一般方法：

1. 檢查手機網路狀態以及wifi連線點是否工作正常。
2. 檢查小程式是否為開發版或者體驗版，因為開發版和體驗版的小程式不會校驗域名。
3. 檢查對應請求的HTTPS證書是否有效，同時TLS的版本必須支援1.2及以上版本，可以在開發者工具的console面板輸入showRequestInfo()檢視相關資訊。
4. 域名不要使用IP地址或者localhost，並且不能帶埠號，同時域名需要經過ICP備案。
5. 檢查app.json配置的超時時間配置是否太短，超時時間太短會導致還沒收到回報就觸發fail回撥。
6. 檢查發出去的請求是否302到其他域名的介面，這種302的情況會被視為請求別的域名介面導致無法發起請求。

14. 快取

• wx.getStorage()
• wx.getStorageSync()
• wx.setStorage()
• wx.setStorageSync()

wx.getStorage({
    key: 'key1',
    success: res => {
        console.log(res)
    },
    fail: (err) => {
        console.log(err)
    }
})

try {
    const value = wx.getStorageSync('key2')
} catch (e) {
    console.log(e)
}

// 寫快取
wx.setStorage({
    key: 'key1',
    data: 'value1'
    success: res => {
        console.log(res)
    },
    fail: (err) => {
        console.log(err)
    }
})

利用本地快取提前渲染介面

Page({
  onLoad: function() {
    var that = this
    var list =wx.getStorageSync("list")
    if (list) { // 本地如果有快取列表，提前渲染
      that.setData({ list })
    }
    wx.request({
      url: 'https://test.com/getproductlist',
      success: function (res) {
        if (res.statusCode === 200) {
          list = res.data.list
          that.setData({ list }) // 再次渲染列表
          wx.setStorageSync("list", list) // 覆蓋快取資料
        }
      }
    })
  }
})