今天，接着往下(xià)講，教大家為小程序加入 JavaScript 腳本，做出動(dòng)态效果，以及如(rú)何跟用戶互動(dòng)。學會了腳本，就能做出複雜的頁面了。

本篇的難度要大于前兩篇，如(rú)果覺得不好理解，可(kě)以先跟着例子(zǐ)，動(dòng)手做一遍，然後再讀文(wén)字說明，可(kě)能就容易理解了。

一、數據綁定

前面的所有示例，小程序的頁面都是寫死的，也就是頁面内容不會變。但是，頁面數據其實可(kě)以通(tōng)過腳本傳入，通(tōng)過腳本改變頁面，實現動(dòng)态效果。

小程序提供了一種特别的方法，讓頁面可(kě)以更方便地使用腳本數據，叫做"數據綁定"（data binding）。

所謂"數據綁定"，指的是腳本裡面的某些數據，會自動(dòng)成為頁面可(kě)以讀取的全局變量，兩者會同步變動(dòng)。也就是說，腳本裡面修改這個(gè)變量的值，頁面會随之變化；反過來，頁面上修改了這段内容，對應的腳本變量也會随之變化。這也叫做 MVVM 模式。

下(xià)面看一個(gè)例子(zǐ)。打開home.js文(wén)件，改成下(xià)面這樣。

Page({
  data: {
    name: '張三'
  }
});

上面代碼中(zhōng)，Page()方法的配置對象有一個(gè)data屬性。這個(gè)屬性的值也是一個(gè)對象，有一個(gè)name屬性。數據綁定機制規定，data對象的所有屬性，自動(dòng)成為當前頁面可(kě)以讀取的全局變量。也就是說，home頁面可(kě)以自動(dòng)讀取name變量。

接着，修改home.wxml文(wén)件，加入name變量。

<view>
  <text class="title">hello {{name}}text>
view>

上面代碼中(zhōng)，name變量寫在{{...}}裡面。這是小程序特有的語法，兩重大括号表示，内部不是文(wén)本，而是 JavaScript 代碼，它的執行結果會寫入頁面。因此，{{name}}表示讀取全局變量name的值，将這個(gè)值寫入網頁。

注意，變量名區分大小寫，name和(hé)Name是兩個(gè)不同的變量名。

開發者工具導入項目代碼，頁面渲染結果如(rú)下(xià)。

可(kě)以看到，name變量已經自動(dòng)替換成了變量值"張三"。

這個(gè)示例的完整代碼，可(kě)以查看代碼倉庫。

頁面和(hé)腳本對于變量name是數據綁定關(guān)系，無論哪一方改變了name的值，另一方也會自動(dòng)跟着改變。後面講解到事件時，會有雙方聯動(dòng)的例子(zǐ)。

二、全局數據

數據綁定隻對當前頁面有效，如(rú)果某些數據要在多個(gè)頁面共享，就需要寫到全局配置對象裡面。

打開app.js，改寫如(rú)下(xià)。

App({
  globalData: {
    now: (new Date()).toLocaleString()
  }
});

上面代碼中(zhōng)，App()方法的參數配置對象有一個(gè)globalData屬性，這個(gè)屬性就是我們要在多個(gè)頁面之間分享的值。事實上，配置對象的任何一個(gè)屬性都可(kě)以共享，這裡起名為globalData隻是為了便于識别。

然後，打開home.js，改成下(xià)面的内容，在頁面腳本裡面獲取全局對象。

const app = getApp();

Page({
  data: {
    now: app.globalData.now
  }
});

上面代碼中(zhōng)，getApp()函數是小程序原生提供的函數方法，用于從頁面獲取 App 實例對象。拿到實例對象以後，就能從它上面拿到全局配置對象的globalData屬性，從而把app.globalData.now賦值給頁面腳本的now屬性，進而通(tōng)過數據綁定機制，變成頁面的全局變量now。

最後，修改一下(xià)頁面代碼home.wxml。

<view>
  <text class="title">現在是 {{now}}text>
view>

開發者工具導入項目代碼，頁面渲染結果如(rú)下(xià)。

可(kě)以看到，頁面讀到了全局配置對象app.js裡面的數據。

這個(gè)示例的完整代碼，可(kě)以查看代碼倉庫。

三、事件

事件是小程序跟用戶互動(dòng)的主要手段。小程序通(tōng)過接收各種用戶事件，執行回調函數，做出反應。

小程序的常見事件有下(xià)面這些。

• tap：觸摸後馬上離(lí)開。
• longpress：觸摸後，超過 350ms 再離(lí)開。如(rú)果指定了該事件的回調函數并觸發了該事件，tap事件将不被觸發。
• touchstart：觸摸開始。
• touchmove：觸摸後移動(dòng)。
• touchcancel：觸摸動(dòng)作被打斷，如(rú)來電提醒，彈窗等。
• touchend：觸摸結束。

上面這些事件，在傳播上分成兩個(gè)階段：先是捕獲階段（由上層元素向下(xià)層元素傳播），然後是冒泡階段（由下(xià)層元素向上層元素傳播）。所以，同一個(gè)事件在同一個(gè)元素上面其實會觸發兩次：捕獲階段一次，冒泡階段一次。詳細的介紹，請參考我寫的事件模型解釋。

小程序允許頁面元素，通(tōng)過屬性指定各種事件的回調函數，并且還能夠指定是哪個(gè)階段觸發回調函數。具體方法是為事件屬性名加上不同的前綴。小程序提供四種前綴。

• capture-bind：捕獲階段觸發。
• capture-catch：捕獲階段觸發，并中(zhōng)斷事件，不再向下(xià)傳播，即中(zhōng)斷捕獲階段，并取消随後的冒泡階段。
• bind：冒泡階段觸發。
• catch：冒泡階段觸發，并取消事件進一步向上冒泡。

下(xià)面通(tōng)過一個(gè)例子(zǐ)，來看如(rú)何為事件指定回調函數。打開home.wxml文(wén)件，改成下(xià)面的代碼。

<view>
  <text class="title">hello {{name}}text>
  <button bind:tap="buttonHandler">點擊button>
view>

上面代碼中(zhōng)，我們為頁面加上了一個(gè)按鈕，并為這個(gè)按鈕指定了觸摸事件（tap）的回調函數buttonHandler，bind:前綴表示這個(gè)回調函數會在冒泡階段觸發（前綴裡面的冒号可(kě)以省略，即寫成bindtap也可(kě)以）。

回調函數必須在頁面腳本中(zhōng)定義。打開home.js文(wén)件，改成下(xià)面的代碼。

Page({
  data: {
    name: '張三'
  },
  buttonHandler(event) {
    this.setData({
      name: '李四'
    }),
  }
});

上面代碼中(zhōng)，Page()方法的參數配置對象裡面，定義了buttonHandler()，這就是元素的回調函數。它有幾個(gè)地方需要注意。

（1）事件回調函數的參數是事件對象event，可(kě)以從它上面獲取事件信息，比如(rú)事件類型、發生時間、發生節點、當前節點等等。

（2）事件回調函數内部的this，指向頁面實例。

（3）頁面實例的this.setData()方法，可(kě)以更改配置對象的data屬性，進而通(tōng)過數據綁定機制，導緻頁面上的全局變量發生變化。

開發者工具導入項目代碼，點擊按鈕後，頁面渲染結果如(rú)下(xià)。

可(kě)以看到，點擊按鈕以後，頁面的文(wén)字從"hello 張三"變成了"hello 李四"。

這個(gè)示例的完整代碼，可(kě)以查看代碼倉庫。

這裡要強調一下(xià)，修改頁面配置對象的data屬性時，不要直接修改this.data，這不僅無法觸發事件綁定機制去變更頁面，還會造成數據不一緻，所以一定要通(tōng)過this.setData()去修改。this.setData()是一個(gè)很重要的方法，有很多細節，詳細介紹可(kě)以讀一下(xià)官方文(wén)檔。

四、動(dòng)态提示 Toast

小程序提供了很多組件和(hé)方法，用來增強互動(dòng)效果。比如(rú)，每次操作後，都顯示一個(gè)動(dòng)态提示，告訴用戶操作的結果，這種效果叫做 Toast。

打開home.js文(wén)件，為this.setData()加上第二個(gè)參數。

Page({
  data: {
    name: '張三'
  },
  buttonHandler(event) {
    this.setData({
      name: '李四'
    }, function () {
      wx.showToast({
        title: '操作完成',
        duration: 700
      });
    }),
  }
});

上面代碼中(zhōng)，this.setData()方法加入了第二個(gè)參數，這是一個(gè)函數，它會在頁面變更完畢後（即this.setData()執行完）自動(dòng)調用。

這個(gè)參數函數内部，調用了wx.showToast()方法，wx是小程序提供的原生對象，所有客戶端 API 都定義在這個(gè)對象上面，wx.showToast()會展示微信内置的動(dòng)态提示框，它的參數對象的title屬性指定提示内容，duration屬性指定提示框的展示時間，單位為毫秒。

開發者工具導入項目代碼，點擊按鈕後，頁面渲染結果如(rú)下(xià)。

過了700毫秒，提示框就會自動(dòng)消失。

這個(gè)示例的完整代碼，可(kě)以查看代碼倉庫。

五、對話框 Modal

下(xià)面，我們再用小程序提供的wx.showModal()方法，制作一個(gè)對話框，即用戶可(kě)以選擇"确定"或"取消"。

打開home.js文(wén)件，修改如(rú)下(xià)。

Page({
  data: {
    name: '張三'
  },
  buttonHandler(event) {
    const that = this;
    wx.showModal({
      title: '操作确認',
      content: '你(nǐ)确認要修改嗎？',
      success (res) {      
        if (res.confirm) {
          that.setData({
            name: '李四'
          }, function () {
             wx.showToast({
               title: '操作完成',
               duration: 700
             });
          });
        } else if (res.cancel) {
          console.log('用戶點擊取消');
        }
      }
    });
  }
});

上面代碼中(zhōng)，用戶點擊按鈕以後，回調函數buttonHandler()裡面會調用wx.showModal()方法，顯示一個(gè)對話框，效果如(rú)下(xià)。

wx.showModal()方法的參數是一個(gè)配置對象。title屬性表示對話框的标題（本例為"操作确認"），content屬性表示對話框的内容（本例為"你(nǐ)确認要修改嗎？"），success屬性指定對話框成功顯示後的回調函數，fail屬性指定顯示失敗時的回調函數。

success回調函數裡面，需要判斷一下(xià)用戶到底點擊的是哪一個(gè)按鈕。如(rú)果參數對象的confirm屬性為true，點擊的就是"确定"按鈕，cancel屬性為true，點擊的就是"取消"按鈕。

這個(gè)例子(zǐ)中(zhōng)，用戶點擊"取消"按鈕後，對話框會消失，控制台會輸出一行提示信息。點擊"确定"按鈕後，對話框也會消失，并且還會去調用that.setData()那些邏輯。

注意，上面代碼寫的是that.setData()，而不是this.setData()。這是因為setData()方法定義在頁面實例上面，但是由于success()回調函數不是直接定義在Page()的配置對象下(xià)面，this不會指向頁面實例，導緻this.setData()會報錯。解決方法就是在buttonHandler()的開頭，将this賦值給變量that，然後在success()回調函數裡面使用that.setData()去調用。關(guān)于this更詳細的解釋，可(kě)以參考這篇教程。

這個(gè)示例的完整代碼，可(kě)以查看代碼倉庫。

今天的教程就到這裡，對于初學者來說，已經講了很多東西，可(kě)能需要慢慢消化。如(rú)果對網頁開發和(hé) JavaScript 語言不熟悉，你(nǐ)也許會覺得不容易完全理解，不用擔心，初學者隻需要知道加入腳本的方法，以及腳本可(kě)以達到的效果就可(kě)以了，後面做到實際的項目，慢慢就會加深理解。

有了腳本以後，就可(kě)以通(tōng)過小程序 API，去調用微信的各種内置能力。