昨天微信公佈了小程式，可以說舉國轟動，不光是微信前期推廣做得好，更是因為小程式有著不小的吸引力，筆者仔細體驗了一下小程式示例，可以說體驗不錯。當然，這篇博文並不是為了說明小程式多好多好的推薦文，我們今天主要是來講如何進行學習開發的。

  這篇博文主要適用於有開發經驗的開發人員，當然沒有開發經驗的，也能從文中獲取一些知識要點。筆者是一枚毫無css經驗，毫無js經驗的一名app開發者，暫時來說筆者只看過一些css和js的原始碼，所以這篇博文也非常適合和筆者類似的開發者參考，一起學習一起進步。

  廢話不多說，我們開始學習.....

  首先，如何成為小程式開發者，隨便百度就能搜到官方教程，在此我就不多廢話，你可以在這裡申請註冊，並拿到開發工具->

https://mp.weixin.qq.com

  開發介面首頁如下：

    

  我們用設定好的開發者微信賬號掃描登入即可進入正式頁面。

 

  在這裡我們選擇新增新專案，填入我們的AppID新建專案，就會得到一個官方的demo示例，我們主要是以demo示例中的程式碼進行學習入門。

 

  這個就是我們的開發介面了，它預設開啟的是編輯介面，如果我們想要除錯東西，可以點選下面的除錯頁面，除錯我們的程式碼，尋找bug尋找問題就全靠它了。

  可以看到，此demo一進來就是獲取許可權，這個東西肯定能在程式碼中有所體現。而我們的程式碼架構就在模擬器的右側，整個架構一目瞭然，此demo分為了三部分：pages，utils，app的檔案。我們可以根據字面意思來理解每一部分的內容。

  pages：顧名思義，是跟我們的介面有關的，所有的頁面都在這個資料夾裡。

  utils：工具資料夾，工具類的方法都在這裡面。

  app的檔案：app字首的有很多檔案，我們之後再說它字尾所屬性質，總之，這些檔案肯定是app的總入口，至於原因，筆者只能說是經驗之談。

  既然知道了入口檔案，我們可以依次開啟app字首的檔案進行檢視（如果看過官方文件更好，因為官方文件裡有更詳細的說明）。

  app.js，一看就是一個js檔案，裡面的程式碼如下：

//app.js
App({
  onLaunch: function () {
    //呼叫API從本地快取中獲取資料
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //呼叫登入介面
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})
 

  可以看到APP({...})，這個方法包含了整個原始碼，那麼我們可以推斷出，要想開發小程式初始化，APP({...})是個最好的選擇。

  在APP({...})方法中，擁有三個大屬性：onLaunch:function(){}, getUserInfo:function(cb){},globalData:{}。其中onLaunch和getUserInfo是一個方法，globalData是一個類似物件的東西。而從字面意思上可以看出，onLaunch方法應該是一個系統方法，它是在app載入後執行的，而getUserInfo應該是一個自定義方法，因為並不是所有小程式都需要獲得許可權的公共資訊，我們待會來驗證這個理論。最後一個globalData，從字面意思上就能知道這個是個全域性物件，但是光從這我們並不能知道是個自定義的還是系統的，因此最好看官方文件進行求證（查詢官方文件可以知道這是個系統全域性）。

  為了驗證getUserInfo是否是必須使用的，我們在原始碼中將它刪除，然後執行。很明顯，小程式依舊能夠執行，所以說這個方法應該是一個自定義方法，當然不排除是系統的，但是有一點肯定的是，它可有可無，只有在你的應用需要用到公共資訊的時候，你可以在此寫一個類似方法（後來筆者試著改寫方法名，發現可以修改並且能夠順利執行，說明getUserInfo確實是個自定義方法）。

  由上所知，在APP({...})入口方法中，微信支援自定義方法，那應該也支援自定義屬性（這個讀者可以去試一下）。

  接下來我們繼續讀程式碼。

    //呼叫API從本地快取中獲取資料
    var logs = wx.getStorageSync('logs') || []

  這句程式碼很有意思，從字面上看就是獲取本地快取用的，這個方法應該是微信資料儲存的一個方法，logs如果有資料返回一個數組，沒有就為空的陣列。那有趣在哪呢，這只是一個簡單的判斷，何為有趣？

  我們可以仔細看看程式碼wx.，不知道大家注意到沒有，wx是微信的縮寫，點後面是方法，我們在這裡可以大膽推論，wx.是微信系統給我們封裝的方法，而且這裡面絕對有更多的方法。所以，有趣就有趣在很多方法我們不需要自己寫，微信已經幫我們封裝好了，我們可以試著敲一下wx.，系統自動會給你匹配出不少的方法：

  而且微信很良心的每個方法提示都寫成了中文，幫了我們這樣的英盲不少忙。

logs.unshift(Date.now())
wx.setStorageSync('logs', logs)

  接下來兩段程式碼很簡單，筆者雖然不懂js，專門去搜索了unshift方法，這是一個數據插入到陣列開頭的方法，而setStorageSync很簡單，就是一個新增本地資料的方法，它是個同步方法。這樣子，我們就可以在每一次進入app的時候新增一個最新的時間到logs的陣列中做本地快取。

  
  var that = this
  if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //呼叫登入介面
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }

  這段程式碼是考驗非js專業的開發者能力的時候。this應該是引用本例項的一個值，它將它賦值給that的原因從下面的程式碼中可以判斷出來js的一些特性。每一個方法是一個封閉函式，它的上一層例項即為this，所以如果一個方法A包含另一個方法B，在A中使用this指的是A的例項，在B中使用this應該是B的例項，即擁有B的A，所以在這裡我們為了拿到A中的例項this，必須要賦一個值給that，讓B能使用A的例項。在此demo中，上面的this指的是app這個例項，為了在下面的方法中可以使用app的例項，所以賦了that給this。

    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }

  這是一個簡單的判斷，如果全域性物件擁有了內容，那麼進入這個判斷。

typeof cb == "function" && cb(this.globalData.userInfo)

  這句程式碼對於一個沒有js基礎的人很難理解，筆者也是花了大把時間才搞懂。

  首先typeof筆者搜到它的用法是判斷變數型別了，這也充分說明了後面為什麼會存在==這樣的語句。其次它判斷了cb是否是一個方法，js很方便，只要這樣== "function"就能判斷一個型別是否是一個方法。最麻煩的是後面的程式碼cb(this.globalData.userInfo)，這段程式碼如果不結合上下文程式碼根本不懂其意思，在這裡，筆者先賣個關子，因為這段程式碼得在後面使用到，我可以說明的是這句程式碼跟傳值有關。

  之後的else中我們又看到了老朋友wx.方法，這裡有個login方法，我們可以很方便地就能獲取到許可權資訊，一想到我以前app開發經常使用三方，這樣的系統方法著實很貼心（雖然本身就是內嵌微信，連這方法都沒有，有點說不過去）。

       success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }

  走到這裡肯定是登入成功了，在這裡wx.getUserInfo可以拿到公開資訊，我們在這裡就可以通過that訪問到app的例項，然後獲取它的globalData物件，我們將獲取到的資訊賦值給他，再走一遍typeof的判斷。

  好了，這裡是全部的入口方法，很簡單，而且是獲得了很多微信開發的知識點，我來梳理一下：微信入口方法有必須實現的方法onLaunch和自定義方法，還擁有一個全域性呼叫的物件globalData；微信擁有大量自帶的系統方法介面，通過wx.來呼叫，簡單粗暴；js字尾的檔案主要是邏輯檔案，所有的邏輯寫在js中，可以說是指令碼檔案。

  app.json檔案，首先它是個json檔案，裡面肯定為json格式，然後我們再來看內容：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

  內容不多，但是我們可以清晰看到分為了兩大類：pages和window。pages顧名思義是頁面的意思，window是視窗。我們可以看到pages中的內容全部是檔案路徑，對應著我們專案裡的內容：

  完全與json中的pages對應，所以我們可以推斷出pages裡面是為了分頁面用的，多少個頁面就多少個page。

  而window裡面有不少看上去像配置引數的東西，我們將navigationBarTextStyle改為red，如果我們的判斷沒錯，WeChat應該變為紅色：

  很明顯，我們的判斷很正確，所以，總結一下，json檔案是一個配置檔案，它可以配置內容和顯示。

  app.wxss，這個字尾很有意思wxss，這樣的字尾肯定是微信獨有的字尾。我們開啟檔案可以看到：

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

  如果你會css，或者看過css程式碼的人一眼就能看出來，這個檔案是css樣式的微信版本，因此很簡單，這個是樣式檔案。

  在原始碼檔案中，還有一個字尾檔案wxml，app檔案並沒有這個字尾，因此這個字尾需要我們學習到其他檔案再說，下次我們講index，裡面的東西也是很豐富的。