1、前言

微信小程式所使用的是騰訊自己開發的MINA框架，MINA框架跟主流框架有很大的相似之處，是一個MVVM框架，很慶幸本人先前有學過一點點VUE所以入門MINA框架還算比較順利，由於需要完全熟悉MINA框架我還需要學習很多，所以微信小程式學習之路篇打算一直寫下去，用以督促自己的學習。

2、準備工作

（1）、IDE的選擇

對於編輯器的選擇，在沒有接觸微信小程式之前，本人使用的是webstorm以及vscode,微信小程式有提供自己的IDE微信開發者工具，當然你也可以繼續使用自己慣用的IDE但是預覽以及一些小程式的釋出以及一些專案設定比較麻煩，所以本人還是推薦使用微信官方給的開發者工具，一些快捷鍵程式碼的編輯習慣上面和vscode比較相似。

（2）、微信小程式的檔案說明

檔案支援：目前微信小程式只提供了5種檔案的編輯

新建一個頁面就相當於新建了四個檔名一樣檔案字尾分別為wxml、wxss、js、json的四個檔案，此後該頁面的樣式與邏輯都會在這四個檔案中編寫，微信小程式識別檔案依賴的方法就是通過檔案命名的方式來實現的，因此檔案的命名必須要注意，另外同屬一個頁面的檔案也應該放到同一資料夾中便於管理。 預設檔案：使用開發者工具新建一個微信小程式專案自動生成的檔案

（3）開發者使用者註冊

每一個小程式的開發者都需要申請註冊一個小程式賬號（僅作練習除外，練習使用可以選擇測試號），用來開發管理髮布小程式以及聯合開發，這一部分都是走流程的環節，參照文件一般都能註冊成功

3、編寫

（1）、新建專案

每一個微信小程式開發者都會有一個唯一的AppID如果專案的開發者只有你自己一個人可以直接使用你個人的AppID，但是如果是聯合開發的話一般使用的是專案管理員的AppID。

（2）、程式碼的編寫

//app.js
App({
  //生命週期函式
  onLaunch: function () {
    // 展示本地儲存能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登入
    wx.login({
      success: res => {
        // 傳送 res.code 到後臺換取 openId, sessionKey, unionId
      }
    })
    // 獲取使用者資訊
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱，不會彈框
          wx.getUserInfo({
            success: res => {
              // 可以將 res 傳送給後臺解碼出 unionId
              this.globalData.userInfo = res.userInfo

              // 由於 getUserInfo 是網路請求，可能會在 Page.onLoad 之後才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

//app.json
{
  "pages":[
    "pages/index/index",//微信小程式最開始顯示的頁面放在第一位
    "pages/logs/logs"
  ],
  //微信小程式的視窗樣式
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

對於程式碼的編寫這塊，這裡只是提供了一些基本的配置以及樣式

3、程式碼的釋出以及稽核

小程式的釋出是有限制的（如專案大小不允許超過2m），建議詳細閱讀官方文件 編寫好程式碼以後點選選單欄>上傳 然後填寫版本號以及備註資訊點選上傳即刻 然後登陸微信公眾平臺提交稽核，稽核過後就可以直接釋出上線了

注：現在微信小程式已經支援個人主體了，也就是說個人也可以釋出小程式，只是個人釋出的小程式與組織釋出的小程式有著不小的區別，個人主體的小程式無法使用完整的小程式介面