你或許聽說過，快速入門就是要學最小必要知識。而我最近在看微信小程序的官方教程時發(fā)現(xiàn)，這個教程雖然簡單，但對于微信小程序開發(fā)來說，80%的套路都能從這里學習到，你的小程序從0到1可以從這里實現(xiàn)突破。

在開始之前，先做100字的鋪墊。

小程序的每個頁面都是由4個文件組成的 ，前兩個最重要，是我們的重頭戲。先給這幾個文件一個簡短的解釋：

1. js 文件——數(shù)據(jù)來源；
2. wxml 文件——頁面的骨架；
3. wxss 文件——頁面的裝飾效果；
4. json 文件——可選，配置頁面上的零件。

另外，本文的目標讀者是真心想要嘗試小程序的無經(jīng)驗開發(fā)者，英語水平要求中學及格水平以上。另外，為了你可以動手跟著做，請下載微信開發(fā)工具并注冊微信小程序。

部分語言過于通俗是為了更好的理解。

綁定數(shù)據(jù)

現(xiàn)在就開始我們的第一個套路。

依照小程序的定義，小程序中的每個頁面都包含一個js文件。在一個 js 文件中，你需要列出這個頁面上需要的數(shù)據(jù)（上圖紅框中的內(nèi)容）。也就是說，data下面規(guī)定的數(shù)據(jù)（請努力去上圖中找到 data），就是頁面上需要用到的數(shù)據(jù)。這就叫做數(shù)據(jù)綁定。

「數(shù)據(jù)綁定」對你來說可能是個新詞匯。這里先不急著理解，我們的目標是會用，會用了就能理解一大半了。

怎么應用「數(shù)據(jù)綁定」呢？只需要兩步：1，聲明；2，使用。

聲明的格式是這樣的（類似上圖中的內(nèi)容）：

Page({
  data: {
    greeting: 'Hello World'
  }
  //...
})

在微信開發(fā)工具中是這樣的：

注意看 data 那個部分，我聲明了名字為greeting的數(shù)據(jù)。（所謂數(shù)據(jù)，學名應該叫變量，但在我們的教程里可以近似理解。）

第二步是使用。使用的意思是，我們到頁面上把這個數(shù)據(jù)顯示出來。方法是這樣的：

{{greeting}}

注意看{{ }}之間的部分，我們只需要把剛剛定義好的數(shù)據(jù)名稱寫在兩個大括號里就行了。順帶一提，這種使用數(shù)據(jù)的方法，叫做八字胡方法（英文Mustache），因為加上的兩個大括號可以想象成嘴上的胡子?；蛟S記住了胡子，你就記住了這種使用方法。

這就完成了我們的第一個套路——數(shù)據(jù)綁定。簡單吧！

但是這里有一個疑問，我們在哪里使用綁定好的數(shù)據(jù)呢？也就是問，在哪里使用{{greeting}}這句程序呢？

答案是我們的頁面上，也就是 wxml 這個文件中。這就是我們的下一個套路——顯示數(shù)據(jù)。

顯示數(shù)據(jù)

上一個套路的講解中，我們出現(xiàn)了這樣一句程序{{greeting}}。這是在使用數(shù)據(jù)。但這行代碼的完整版其實是這樣的：

{{greeting}}

在微信開發(fā)工具中的樣子是這樣的：

我們對{{greeting}}這一部分已經(jīng)熟悉，但對于它前面和后面的代碼還不熟悉。所以我們現(xiàn)在進行講解。

顯示數(shù)據(jù)時，我們其實希望顯示出來的內(nèi)容是很好看的。但如果你只寫成{{greeting}}，顯示出來的效果并不好：

為了讓顯示數(shù)據(jù)有更好看的效果，我們需要對{{greeting}}進行裝飾。怎么裝飾數(shù)據(jù)呢。我們要用2個東西：

1. 標簽
2. 樣式表

什么是標簽，我們從例子中來理解：{{greeting}}兩邊的和就是標簽，而且分別叫開始標簽和結(jié)束標簽。（你能發(fā)現(xiàn)開始標簽和結(jié)束標簽的區(qū)別么？）

開始標簽可以定義一些屬性，以便調(diào)整顯示的結(jié)果。這就像是你畫一幅畫可以選擇用毛筆，來畫出國畫的效果。在上面的例子中，class="your-class"就是這個標簽的一個屬性，標簽會表現(xiàn)出class="your-class"的規(guī)定的樣子。

那么class="your-class"這個屬性的完整意思是什么呢？他的意思是的 class 對應樣式表中的your-class。對，你可以把等號理解為對應。而后面的"your-class"就是我們在樣式表中規(guī)定好的一種裝飾效果。

這里出現(xiàn)了我們的第2個工具：樣式表。

樣式表是寫在 wxss 文件中的，我們來看看怎么寫：

.your-class {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: blue;
}

在開發(fā)者工具中的樣子是這樣的：

你通過理解代碼中英文的字面意思就可以了解到，我把字的 color 定義為藍色，把位置定義為 center。

最重要的，是這個樣式的名字，叫做.your-class，而標簽中的 class 屬性，正好指向這個樣式，所以中的數(shù)據(jù)會變成中間位置的藍色字。（在.your-class的最前面有一個點，那是對應中 class 屬性的特有標記，還有類似的標記^[1]，可以在以后更多的實踐中去理解)

到這里，我們的前兩個套路就已經(jīng)簡單的介紹完了?？偨Y(jié)一下：

1. 綁定數(shù)據(jù)：在 js 文件中的 Page 模塊下面定義 data 的名字，并用八字胡方法({{ }})來使用數(shù)據(jù)。
2. 顯示數(shù)據(jù)：在 wxml 中給數(shù)據(jù)加上標簽（比如 text 標簽），并且給標簽加上屬性（比如 class 屬性）。class 對應的樣式在 wxss 文件中寫好。

不過，我們這里好像缺了什么。我好像沒教大家怎么寫最后一步的 wxss。微信文檔說，wxss 和 css 大體上都是一樣的^[2]。大家可以去找找css的書，或者期待我后續(xù)的實踐教程，帶你一步一步寫一個能上線的小程序。

現(xiàn)在，如果你把這兩個套路循環(huán)用起來，已經(jīng)能解決很多問題了。想要多顯示一個數(shù)據(jù)，就先在 js文件中綁定這個數(shù)據(jù)，然后去 wxml 文件中裝飾數(shù)據(jù)。下面是綁定兩個數(shù)據(jù)的示例代碼：

Page({
  data: {
    greeting: 'Hello World',
    farewell: 'Goodbye!'
  }
  //其他內(nèi)容
})

而對應顯示這兩個數(shù)據(jù)的示例代碼是這樣的：

{{greeting}}
{{farewell}}

在開發(fā)者工具中顯示的樣子是這樣的：

大家可以看到，我在最右側(cè)的紅箭頭處加入了一行新代碼， 然后顯示出了新數(shù)據(jù)。

但是，這次不一樣的是，我用了一個叫做的標簽，而不是之前的標簽。其實 wxml 文件中可以使用很多種標簽來顯示數(shù)據(jù)，有負責顯示圖片的，有可以負責滾動效果的的，他們都被寫在微信文檔中，你在實踐的過程中可以查看。

比如，我使用了一個叫做的標簽，然后顯示出了一個圓形的圖標：

有了「綁定數(shù)據(jù)」和「顯示數(shù)據(jù)」這兩個套路，我們已經(jīng)能夠?qū)懗鲆粋€簡單的頁面了。能夠做到展示，但沒有交互，所以我們進入第三個套路：綁定交互。

綁定交互

綁定交互這個名字聽起來有沒有和之前的「綁定數(shù)據(jù)」很像？他們的操作方法也很相似。

綁定交互分為兩步：

1. 聲明：在 js 文件中聲明交互的名稱。
2. 使用：在 wxml 文件中使用這個交互。

先來看「聲明」。怎么聲明一個交互呢？（或者用微信文檔的說法，怎么來聲明一個事件呢？）

請在 js 文件中寫下這樣幾行代碼，就在我們之前綁定數(shù)據(jù)的 data 模塊下面：

     changeWord: function() {
        this.setData({
          farewell: 'Never Say Goodbye!'
        })
      }

在開發(fā)者工具中的樣子是：

這樣，我們就聲明了一個叫做changeWord的交互。這個交互的具體內(nèi)容是，改變 farewell 這個數(shù)據(jù)的內(nèi)容。原來是Goodbye!，現(xiàn)在我們要改成Never Say Goodbye!。

而這個聲明中function，this，setDate都是什么意思，我們在后面實踐中再講，大家關注的重點是這個聲明中最前面的部分，也就是這個交互的名字：changeWord。

我們已經(jīng)聲明完了這個交互，現(xiàn)在就該進入第2步——使用交互。請在 wxml 中插入這樣的代碼片段：

    <button bindtap="changeWord" type='primary' class="your-button" size='default'>改變文字button>

在開發(fā)者工具中的的樣子是這樣的：

這里的重點是bindtap="changeWord"，大家可以看到我們剛剛聲明的交互changeWord出現(xiàn)了，那前面的bingtap=是什么呢？他的意思是：把點擊事件的交互對應到changeWord。當你點一下圖中的那個綠色按鈕，我們的頁面就會把Goodbye!換為 Never Say Goodbye!

除了利用標簽的bindtap屬性來綁定交互，還可以用bindlongtap（綁定長按事件），bindtouchmove（綁定觸摸后移動事件）等等，他們都有各自的效果。具體內(nèi)容都被寫在事件相關的文檔中，你可以親自試一下。

你會發(fā)現(xiàn)他們的開頭都是 bind，就好像單詞的前綴一樣，加上tap，longtap等后綴，就能幫你綁定一個交互。（綁定事件的前綴還有另外一種，叫catch，比如catchtap，catchtouchmove等等，你可以結(jié)合文檔，試驗一下他們的效果）^[3]

到這里，我們已經(jīng)能夠簡單的綁定交互了。但綁定交互的核心目的是要改變頁面上的顯示，從而給用戶一個反饋。下面就讓我們來看看第4個套路：修改顯示。

執(zhí)行交互

就像綁定數(shù)據(jù)之后，要去顯示數(shù)據(jù)。我們綁定交互之后，也要讓交互被執(zhí)行，這樣才有意義。而交互的執(zhí)行內(nèi)容，就寫在被聲明的交互的下面：

 changeWord: function() {
    // 這里寫交互的實際內(nèi)容
  }

我們這里介紹兩種交互內(nèi)容的寫法，足夠解決很多問題了：

1. 修改頁面數(shù)據(jù)
2. 彈窗

第一種，修改頁面數(shù)據(jù)。我們在上一個套路的實例代碼中已經(jīng)見過：

     changeWord: function() {
        this.setData({
          farewell: 'Never Say Goodbye!'
        })
      }

這幾行代碼中間的部分，就是要執(zhí)行的交互內(nèi)容：

    this.setData({
      farewell: 'Never Say Goodbye!'
    })

即使你不懂得javaScript編程語言，也完全可以從英語的字面意思去理解這幾行代碼。這3行代碼是在說，我這個頁面(this)要修改數(shù)據(jù)(setData)中的farewell為 Never Say Goodbye!。

如果你想修改其他數(shù)據(jù)，比如greeting，你可以如法炮制：

     changeAnotherWord: function() {
        this.setData({
          greeting: 'Hello, again!'
        })
      }

你會發(fā)現(xiàn)這里面有很多結(jié)構(gòu)是固定的。變化的部分只有交互的名稱（變成了changeAnotherWord）和要修改的數(shù)據(jù)（變成了greeting: 'Hello, again!'）。如果你也想修改頁面上的數(shù)據(jù)，請如法炮制。

我們要介紹的第二種交互方法是彈窗，而且是微信內(nèi)建的彈窗。首先，還是要做一下綁定交互這個套路：1，在 js 文件中聲明一個交互；2，在 wxml 中使用這個交互。

聲明交互的代碼如下（在 js 文件中），我們用showConfirmation作為名稱：

     showConfirmation: function() {
        var that = this
        wx.showModal({
          title: '提示',
          content: '你確定要更改文字嗎？',
          showCancel: true,
          cancelText: '取消',
          confirmText: '確定',
          success: function (response) { 
            that.changeWord()
          }
        })
      }

在微信開發(fā)者工具中是這樣的：

先不要在乎這里面陌生的代碼，我們繼續(xù)看使用交互的部分：

    <button bindtap="showConfirmation" type='primary' class="your-button" size='default'>改變文字button>

我把上一個套路中出現(xiàn)的 button 改寫成了綁定到這個showConfirmation，在微信開發(fā)者工具中的樣子是這樣的：

寫完之后，我再去點「改變文字」的按鈕，就會出現(xiàn)對話框：

你會發(fā)現(xiàn)，所有的不一樣，都只是在 js 文件中showConfirmation的下面，其他的部分都符合我們以前的套路。那我們就看看那段陌生的代碼：

        var that = this
        wx.showModal({
          title: '提示',
          content: '你確定要更改文字嗎？',
          showCancel: true,
          cancelText: '取消',
          confirmText: '確定',
          success: function (response) { 
            that.changeWord()
          }
        })

我們從wx.showModal看起，這是一個微信內(nèi)建的代碼表達方式，從英文的字面就能理解他是什么意思：請微信（wx）顯示一下對話框（showModal）。那怎么用這個工具呢，微信的文檔里面已經(jīng)寫好了：

我們只需要像填空一樣，把制作對話框需要的 title, content, showCancel 等需要填充的地方填好就可以了。這樣，微信會幫助我們制作出一個對話框。

但在這段代碼中，有一個比較難解釋的地方，就是var that = this和that.changeWord()。你能猜到他們是聯(lián)動的，因為他們都有一個that。具體的意思是：把這個頁面存儲在那個地方（var that = this），讓那個地方的數(shù)據(jù)中的文字改變（that.changeWord()）。為了避免混亂，我們暫時解釋到這里。而且這兩行也不影響我們制作一個對話框。因為制作對話框只需要做一件事^[4]：

使用wx.showModal

跳轉(zhuǎn)

到這里，我們已經(jīng)能在一個頁面上使用4個套路了：綁定數(shù)據(jù)，顯示數(shù)據(jù)，綁定交互，修改數(shù)據(jù)。如果你的小程序比較復雜，那么，是時候跳轉(zhuǎn)到下一個頁面來開辟一片新戰(zhàn)場。

要跳轉(zhuǎn)到下一個頁面，我們只需要最后一個套路：跳轉(zhuǎn)。

跳轉(zhuǎn)本質(zhì)上也是一種交互，我們完全可以用上面提到的「綁定交互」和「執(zhí)行交互」來實現(xiàn)。再重復一遍這兩步：1，在 js 文件中聲明一個交互；2，在 wxml 中使用這個交互。

我們先在 js 文件中聲明一個名為navigateToLogs的交互：

     navigateToLogs: function() {
        wx.navigateTo({
          url: '/pages/logs/logs'
        })
      }

在開發(fā)者工具中的樣子是這樣的：

這里面有我們不太熟悉的代碼，比如wx.navigateTo，根據(jù)上一個套路的經(jīng)驗，你已經(jīng)能夠大致猜到他的意思了，對么？不過我們還是把下一步走完再說。

在 wxml 中使用這個交互：

    <button bindtap="navigateToLogs" type='default' class="your-button" size='default'>跳轉(zhuǎn)button>

在開發(fā)者工具中的樣子是這樣的：

好了，現(xiàn)在，如果我們點一下「跳轉(zhuǎn)」按鈕，他就會跳到下一頁。

已經(jīng)看完了效果，我們回來看那段不熟悉的代碼：

    wx.navigateTo({
      url: '/pages/logs/logs'
    })

這一次，我們依然可以從字面理解：請微信（wx）導航到（navigateTo）logs 路徑下的頁面（url: '/pages/logs/logs'）。其中 url 這個數(shù)據(jù)是微信要求的，在文檔中可以找到他的說明，我們依然是照著文檔來填空就可以了^[5]。

這里面有一點需要說明，新頁面的地址叫做'/pages/logs/logs'，他是從哪里來的呢？

大家看下圖紅框中的文件結(jié)構(gòu)，會發(fā)現(xiàn) logs 這個頁面的地址就是 pages 文件夾下面的 logs 文件夾下面的 logs 文件（有4個文件，但都叫 logs），用標準的格式表示，就成了我們剛剛提到的/pages/logs/logs。更進一步，按照微信的規(guī)定，我們還需要把他寫在一個叫做app.json的配置文件中，這樣微信才允許我們跳轉(zhuǎn)到那個路徑。

總結(jié)一下

好了，到這里，我們把5個套路都學完了。如果你能把他們組合起來，不斷使用，你就能制作一個用很多功能的小程序：

1. 綁定數(shù)據(jù)——在 js 文件中聲明數(shù)據(jù)名稱
2. 顯示數(shù)據(jù)——在 wxml 中寫出數(shù)據(jù)顯示的位置，并在 wxss 中寫出裝飾效果
3. 綁定交互——在 js 文件中聲明交互的名稱
4. 執(zhí)行交互——在 js 文件中支出要修改的數(shù)據(jù)或者顯示彈窗
5. 跳轉(zhuǎn)——跳轉(zhuǎn)到下一頁，開辟新的戰(zhàn)場

番外篇——調(diào)取微信數(shù)據(jù)

微信小程序其實還有一個隱含套路，叫做調(diào)用微信提供的接口。用微信官方的話講，就是使用微信的能力。如果沒有這些能力，微信小程序只能叫小程序，而不能叫「微信」小程序。

其實，我們已經(jīng)在上面見過一些微信小程序的能力了，比如顯示彈窗的wx.showModal，比如跳轉(zhuǎn)下一頁的wx.navigateTo

你已經(jīng)發(fā)現(xiàn)，他們的特點都是wx.開頭。更多的能力還有，還有獲取用戶頭像，打開掃一掃這樣的能力。他們怎么用呢？其實都是查文檔，看看這個方法需要你提供哪些數(shù)據(jù)，提供給他就好了。用兩個字總結(jié)就是：填空。

最后的最后，輕輕說一句，對于剛剛?cè)腴T的開發(fā)者，最大的坑可能是——忘記保存。因為我曾經(jīng)也是個新手，在很多領域依然是新手，甚至還沒有入門。希望這份教程能幫到你。

共勉。

---

1. 這種標記叫做選擇器，可以在這個小程序 wxss 文檔的選擇器那一節(jié)找到 ?

2. 而且是個簡版的css，不會用到復雜一點的級聯(lián)樣式 ?

3. 另外，還有兩類特殊的交互，為了避免大家混亂，我沒有講，但在我們后續(xù)的教程中會用到，感興趣的朋友可以先了解一下：一類是某些標簽特有的綁定方法，比如便簽有一個特有屬性 bindchange，可以用來綁定交互。另一類是用戶關閉和打開頁面時綁定的交互，比如onLoad，這類交互都是以 on 開頭的，代表這個頁面的事件，直接在 js 文件中聲明，不用再 wxml 中綁定到標簽。 ?

4. 微信還有2個可用彈窗類交互，大家可以對照文檔進行實驗。 ?

5. 微信出了提供wx.navigateTo這個跳轉(zhuǎn)方法，還提供了其他4個導航相關的方法，你可以在實踐中體會他們的區(qū)別。另外，微信還提供了標簽來實現(xiàn)跳轉(zhuǎn)，跟wx.navigateTo等方法實現(xiàn)同樣效果，為避免混亂，這里只留下文檔地址，不詳細舉例。 ?