微信小程序入門篇（一）

最近因爲課程作業需要用到微信公衆號及小程序的開發與管理，網上搜了好多，好不容易找到便於使用的，先存下來，以後慢慢看~
轉載自：https://www.jianshu.com/p/e63be70e3ab9

準備工作

下載開發工具：微信小程序開發工具

創建項目

1.添加項目
2.如果沒有AppID可以選擇無AppID,項目名稱可以隨便起，因爲入門教程我想教大家都比較想學的商城，所以直接叫商城啦，項目目錄中的shopping是自己創建的新文件夾，空文件夾系統就會自動在shopping文件夾中創建整個項目架構，記得勾選quick start項目

項目架構分析

1整體架構:自動創建的項目就會以下架構目錄

• 紅框1 ：菜單欄
• 紅框2：界面效果顯示
• 紅框3 ：代碼架構目錄

2.着重對代碼架構目錄做介紹：app.js、app.json、app.wxss，這三個中前兩個是必看的，前兩個相當於目錄，就好比你讀一本書，都要先看一下目錄，所以以後看別人項目的時候，首先先看app.js和app.json

• app.js是小程序的腳本代碼。我們可以在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。調用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數據。
• app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何註釋。
• app.wxss 是整個小程序的公共樣式表。我們可以在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。
  3.app.json解析：首先既然是.json所以一定是json格式，這裏麪包含兩部分pages和window，固定字段，pages就是整個小程序包含的頁面，可以根據路徑查找到對應的頁面，window就是設置一些窗口樣式，依次是配置小程序的窗口 背景字體樣式，配置導航條背景樣式，配置默認標題，及顏色
  

現學現用

• 我要設置導航欄的標題爲商城，字體爲白色，背景爲黑色要怎麼做吶？ 很簡單吧，找到app.json把下面的代碼替換到window裏面就可以啦，要解釋一下navigationBarBackgroundColor和navigationBarTextStyle都是支持rgb的，也就是說設置字體顏色navigationBarTextStyle爲白色填入white其實也可以填入#fff，都是一樣的效果

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#000",
    "navigationBarTitleText": "商城",
    "navigationBarTextStyle":"white"
  }

• 我要增加一個界面怎麼辦吶？ 同理只需在app.json裏的pages屬性加入你要的路徑pages/addPage/addPage，你寫好路徑後系統會自動給你建好文件的

"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/addPage/addPage"
  ]

下圖是解決以上兩個問題的效果圖，app.json就暫時解析到這裏，記着我們在這裏面有新添加一個界面addPage，後面會詳細介紹這個界面的，篇幅限制，這個先擱置一下

4.app.js解析:看後綴名.js就知道是JavaScript的代碼，首先看一下App裏面包含的幾個方法onLaunch、getUserInfo、getUserInfo

• onLaunch方法是小程序啓動的時候執行的方法

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

看一下里面的代碼，wx.以這個開頭的都是系統封裝好的方法，我們都可以直接調用，輸入wx.,系統會自動提示出自帶的方法，查詢更多系統定義的方法請看微信API文檔，這裏篇幅限制不能全部介紹

好，迴歸正題，看着三句話代碼，wx.getStorageSync是獲取本地緩存的logs字段，logs.unshift代碼是什麼意思吶？unshift是js的知識，unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度。所以大概能理解這三句話代碼啦，大致是取本地緩存數據logs字段，插入最新時間，然後存儲再次存入到緩存中的logs字段裏，說了這麼多，那Storage存儲的數據在哪裏吶，請看下圖，會更好理解，找到菜單欄裏的調試->Storage下就可以看到本地緩存的logs字段及數據，你也可以自行添加數據，然後調用wx.getStorageSync(‘key值’) ，就可以獲取數據啦

• globalData全局變量數據
• getUserInfo自定義的方法用於獲取用戶信息，整體的代碼意思就是如果用戶信息爲空就去調用微信的登錄接口，登錄成功後存儲在全局變量globalData裏，分析兩處代碼第一處var that = this，that=this,這個是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。還不明白that=this可以參考此文獻，第二處是typeof cb == “function” && cb(this.globalData.userInfo)，代碼中兩次調用此代碼所以要剖析一下，cb是callback的縮寫，翻譯代碼意思就是cb==function，要求cb爲方法，並且回調cb方法，剩下的wx.login猜都能猜出來是微信封裝好的登錄方法啦

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
  }

5.app.wxss 我打算放在下一節和addPage頁一起講

總結

• 通過這個篇幅的介紹，我們瞭解了小程序的整體架構，學習瞭如何創建小程序，以及對小程序目錄app.js、app.json詳細的分析，下一篇將會詳細講解addPage的編寫，敬請期待！
• 溫故而知新，看文上面的文章，不能一帶而過，要學會舉一反三，下面我提幾個問題，看看讀者吸收的怎麼樣。能回答以下問題說明你讀懂這篇文章啦，讀不懂請查看上面的內容自行找答案
• wx.login是什麼？that = this的作用？
• 在哪裏可以查到StorageSync本地緩存的數據？
• 如何增加頁面？
• 在哪裏設置導航欄的屬性？