微信小程序學習筆記

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) // 覆蓋緩存數據
        }
      }
    })
  }
})