全棧工程師之路-中級篇之小程序開發-第一章第三節閱讀官方demo

在網上好多人，喜歡找別人寫好的一些線上的項目源碼，比較完整的。想着學習的更加實用和全面一點。

這無可厚非，可是，我發現有好多人並非很在乎官方提供的demo。

好比ionic的tabs demo就沒有什麼人看。

我我的以爲既然官方把這樣的demo推到了入門的地位，那必然是有它的道理的。

因此我很喜歡從官方的demo開始學習，由於它足夠簡單，又足夠讓我明白它的用法和邏輯。

上一節課，咱們已經講解了如何新建一個項目，而且講解了工具裏面的一部分功能。

剩下的在項目開發中比較經常使用的，不容易被忽略的，上一節就沒詳細講解。會在以後的開發中介紹。

1、目錄結構

小程序規定一個頁面對應四個文件。（其中有的必須有的非必需，太麻煩了，反正記下來四個文件就好）

*.js 小程序的邏輯文件

*.json 小程序的配置文件

*.wxss 小程序的樣式文件--至關於css

*.wxml 小程序的頁面結構--至關於html

每個子頁面都對應四個上述的文件。

在根目錄下還有三個文件，能夠理解爲存放公共配置、公共邏輯、公共樣式的地方。

這麼理解吧，小程序會首先使用這外面的三個文件。若是子頁面本身的相應文件作了修改，則會使用子頁面的配置和樣式。

接下來咱們打開app.json文件

看第一個page屬性，是一個字符串數組，用於配製子頁面的文件路徑。

注意數組的第一項就是打開小程序時的主頁面。

還有這裏有一個新建頁面的技巧，最開始我新建一個頁面是先新建一個文件夾，而後在文件夾裏面新建四個文件，最後再在配置表裏面添加路徑。

有一次因爲拼寫錯誤，發現，工具自動新建裏一個文件夾和頁面所需的文件，而且文件裏面還寫了必要的內容。

如：在page裏面寫上"pages/test/test". 按ctrl+s保存（Mac用command+s），工具就自動建立了四個文件了。

接着看app.json裏面的window屬性。

window屬性用來配置小程序的狀態欄、導航欄、標題和窗口的背景色。注意每一個子頁面均可以在本身的json文件裏面，單獨對上述這四個屬性作單獨的配置。

除了圖中四種屬性，還有enablePullDownRefresh 是否開啓下拉刷新。

接下來咱們打開app.wxss

這個屬於公共的樣式表，只要在這個文件中定義的樣式文件，能夠在任何子頁面中調用。

而在子頁面中定義的獨立樣式，則只能在本身的結構文件中調用，子頁面之間不能相互調用。

/util/util.js

工具文件，編輯一些經常使用工具方法，用的比較多的就是用來配置服務器請求路徑。

這應該是用來作公用方法的，可是公用方法又能夠寫在app.js中，因此我也不是太清楚，這個文件的意義是什麼。

接下來咱們來看一下，咱們剛剛新建的test.js文件。

// pages/test/test.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
  },
  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
  },
  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {
  },
  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {
  },
  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {
  },
  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {
  },
  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  }
})

這個新建的文件，比demo現有的代碼能讓咱們更清楚的知道小程序的生命週期。

咱們如今每個勾子函數中打印出相應的日誌。

如：

修改app.json文件，將test頁面修改爲默認頁面

-------------------2017年5月14日編輯到這裏，2017年7月28日接着編輯，有點忘記這小節要講什麼了，補充一點算一點吧。---------------------------

打開工具-調試-console查看，打印日誌。能夠查看勾子函數的調用順序，瞭解小程序的生命週期，其餘沒打印的函數，看名字，應該能明白。

其中兩個函數，這裏能夠重複提一下。onPullDownRefresh（監聽用戶下拉動做）、onReachBottom（頁面上拉觸底事件的處理函數）

這兩個函數onPullDownRefresh用於下拉刷新頁面，可參考微信朋友圈，下拉拉取朋友們最新發布的朋友圈消息。

onReachBottom是用戶加載更多列表，一樣參考微信朋友圈，下拉拉取更多朋友圈列表歷史記錄，分頁加載更多數據的概念。

接下來讓咱們從新回到最原始的demo裏查看index裏面的內容。

修改app.json,將"pages/index/index"設置成page數組的第一項，是index頁面做爲啓動頁。

打開// pages/index/index.wxml

如今把全部的關注點集中在上圖我標記的位置（我打開的時候我電腦裏面的demo我作過一點點修改，可能跟原來的不太同樣，可是這幾個地方沒有變化，不要太較真哦）

一、先看第二行class="container"這個和傳統的html中的用法同樣，只是對應文件wxss中的.container{}

二、標籤，在小程序中，所使用的標籤全是微信作過封裝的，能夠按照html的標籤去理解記憶這些標籤，可是不能徹底等同，應該查閱詳細的api看看有什麼屬性，便於後續的開發，可能你要的什麼功能，微信已經封裝好了。

三、src=「{{地址變量}}」’這個和ng中的綁定數據很像，只是直接使用src，注意雙大括號要當在雙引號裏面。

四、在標籤中的綁定數據也是用雙{{}}，如今好多新的框架基本上都是這麼作的，注意這裏雙大括號不須要放在雙引號裏面。

五、bindtap="bindTiewTap" 事件綁定，這裏先略過，後續的詳細的出一節講解全部的綁定事件，也可查閱官方文檔。

接下來咱們先深刻的看小程序的數據綁定，這裏咱們從上圖中的標記4{{'你好，'+userInfo.nickName}}入手瞭解。

這裏能夠知道這裏的數據綁定了userInfo變量的nickName屬性。那這個userInfo又是從哪裏來的呢？

接着咱們打開文件// pages/index/index.js

看第五行的data，咱們知道userInfo是這個data的一個屬性。這裏咱們知道小程序把界面綁定在了他相對應的js的data中。

這麼理解吧，js中的Page對應一個界面。

看第3行，建立了一個變量app經過全局方法，getApp()獲取了當前應用實例。

在19行中調用了app.getUserInfo的方法。這裏能夠跟進查看到上一層的app.js中

這裏咱們就知道了，在index.js中調用getApp()方法獲取的就是app.js中的這個App();

接下來咱們把注意力集中在getUserInfo這個方法中，這裏出現一個wx.login()方法。

這裏咱們並無人任何一個地方定義了wx變量，因此這裏能夠知道，小程序中把wx做爲官方API的保留關鍵字。這裏調用了微信的登陸接口，獲取了用戶數據。

那麼這一整個流程就是進入index界面-調用onload方法-調用app.js中的getUserInfo方法-調用微信登陸接口-獲取用戶數據-經過回調函數cb-回調到index.js中-

將數據賦值給data的userInfo-傳遞到界面中的{{userInfo.nikeName}}實現數據展現。

其實要深究的話這個demo還有很多內容，介於篇幅將其餘的內容放於後續的章節中講解。

這節課的內容就到這裏結束了。

感謝您的閱讀。

我是小虎（最近把名字改爲了莽夫，以爲比較符合個人性格特徵，說好的行不更名坐不改姓呢，捂臉），但願你開心。

有什麼問題能夠直接聯繫個人我的微信yu_xiaohiu

但願你們關注個人我的公衆號ionic_