在網上好多人，喜歡找別人寫好的一些線上的專案原始碼，比較完整的。想著學習的更加實用和全面一點。

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

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

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

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

上一節課，我們已經講解了如何新建一個專案，並且講解了工具裡面的一部分功能。

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

一、目錄結構

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

*.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我做過一點點修改，可能跟原來的不太一樣，但是這幾個地方沒有變化，不要太較真哦）

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

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

3、src=“{{地址變數}}”’這個和ng中的繫結資料很像，只是直接使用src，注意雙大括號要當在雙引號裡面。

4、在標籤中的繫結資料也是用雙{{}}，現在好多新的框架基本上都是這麼做的，注意這裡雙大括號不需要放在雙引號裡面。

5、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_