微信小程式推出已久，除了普通開發版本，如今已經支援雲開發版本。框架上的選擇也有很多，比較火的應該屬 mpvue 和 wepy 吧。但是我還是選擇先從普通開發版本和原生語言開始入手微信小程式，然後再考慮框架的事情。

專案結構

剛接觸小程式的我，一看到也是有點懵逼的。但是細心看下來，發現和其他前端框架組織的專案也是大同小異的。我們且不關注專案配置檔案 project.config.json 和輔助js模組 util.js，小程式基本上由App和Page兩部分組成，我們暫且稱這兩者都為元件吧。小程式的元件基本上由四個檔案組成。 wxml 對應 html，負責模板檢視；wxss 對應 css，負責樣式表現；js就不用說了，負責邏輯操作；json則是負責元件相關的配置。

Demo分析

小程式 demo 主要包含兩個頁面，首頁有請求使用者授權的按鈕，授權後點擊使用者頭像進入日誌頁面，檢視登入日誌。

獲取使用者資訊

該 demo 獲取使用者資訊的思路是：

首先需要檢查使用者是否已經對小程式進行了個人資訊授權，需要呼叫

wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      // 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框
      ......
    }
  }
})

• 如果使用者第一次進入或從未授權個人資訊，則不做任何預設操作，此時需要使用者手動點選按鈕進行授權；

根據小程式官方解釋：注意：wx.authorize({scope: “scope.userInfo”})，無法彈出授權視窗，請使用

// wxml
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo"></button>

// js
getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
 

使用者點選該按鈕時，會返回獲取到的使用者資訊，回撥的detail資料與wx.getUserInfo返回的一致。

• 如果已經授權過，則在 App 的 onLaunch 鉤子函式中呼叫 getUserInfo 去獲取使用者資訊，並在 index 頁面進行顯示。

這裡存在一個潛在的 bug ，App 的 onLaunch 執行後，Index 頁面的 onLoad 方法也會隨之執行，如果此時 wx.getUserInfo 介面尚未響應完成，則 Index 不能顯示出使用者資訊。解決的方法是在 Index 頁面獲取 app 例項，並在 app 例項上掛載一個回撥函式，然後在 wx.getUserInfo 介面得到響應後，執行該回調函式。

// index.js
// 獲取應用例項
const app = getApp()

app.userInfoReadyCallback = res => {
  this.setData({
    userInfo: res.userInfo,
    hasUserInfo: true
  })
}


// app.js
wx.getSetting({
  success: res => {
    if (res.authSetting['scope.userInfo']) {
      wx.getUserInfo({
        success: res => {
          this.globalData.userInfo = res.userInfo
		  // 如果有 index 頁面指定的回撥函式，則執行
          if (this.userInfoReadyCallback) {
            this.userInfoReadyCallback(res)
          }
        }
      })
    }
  }
})

儲存資料和路由

本地快取

該 demo 中儲存日誌用到了 setStorageSync ，這是一個同步儲存本地快取的方法。與之對應的同步獲取本地快取的方法是 getStorageSync 。說到同步，就不得不提到非同步。本地快取存取的非同步方法分別是 getStorage 和 setStorage。小程式的本地快取與 WebStorage 有異曲同工之妙。

var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)

路由

小程式提供的路由方法主要有以下幾個：

• wx.redirectTo(Object object)：關閉當前頁面，跳轉到應用內的某個頁面，但是不允許跳轉到 tabbar 頁面。傳入的 object 包含 url (跳轉的頁面的路徑)，success (成功回撥函式)，fail (失敗回撥函式），complete (介面呼叫結束的回撥函式，無論成功或失敗) 等幾個屬性及方法。相當於沒有當前頁的歷史記錄。
• wx.navigateTo(Object object)：保留當前頁面，跳轉到應用內的某個頁面，但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。相當於保留了當前頁的歷史記錄。
• wx.navigateBack(Object object)：關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。傳入的 object 不再包含 url，而是 delta，表示後退 delta 頁。
• wx.reLaunch(Object object)：關閉所有頁面，開啟到應用內的某個頁面。相當於銷燬所有路由歷史記錄再開啟新頁面。
• wx.switchTab(Object object)：跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面。