微信小程式入門解讀-③

小程式加入 JavaScript 腳本，做出動态效果，以及如何跟使用者互動。學會了腳本，就能做出複雜的頁面了。

本篇的難度要大于前兩篇，如果覺得不好了解，可以先跟着例子，動手做一遍，然後再讀文字說明，可能就容易了解了

一、資料綁定

前面的所有示例，小程式的頁面都是寫死的，也就是頁面内容不會變。但是，頁面資料其實可以通過腳本傳入，通過腳本改變頁面，實作動态效果。

小程式提供了一種特别的方法，讓頁面可以更友善地使用腳本資料，叫做"資料綁定"（data binding）。

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

下面看一個例子。打開

home.js

檔案，改成下面這樣。

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

上面代碼中，

Page()

方法的配置對象有一個

data

屬性。這個屬性的值也是一個對象，有一個

name

屬性。資料綁定機制規定，

data

對象的所有屬性，自動成為目前頁面可以讀取的全局變量。也就是說，

home

頁面可以自動讀取

name

變量。

接着，修改

home.wxml

檔案，加入

name

變量。

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

上面代碼中，

name

變量寫在

{{...}}

裡面。這是小程式特有的文法，兩重大括号表示，内部不是文本，而是 JavaScript 代碼，它的執行結果會寫入頁面。是以，

{{name}}

表示讀取全局變量

name

的值，将這個值寫入網頁。

注意，變量名區分大小寫，

name

和

Name

是兩個不同的變量名。

開發者工具導入項目代碼，頁面渲染結果如下。

微信小程式入門解讀-③

可以看到，

name

變量已經自動替換成了變量值"張三"。

頁面和腳本對于變量

name

是資料綁定關系，無論哪一方改變了

name

的值，另一方也會自動跟着改變。後面講解到事件時，會有雙方關聯的例子。

二、全局資料

資料綁定隻對目前頁面有效，如果某些資料要在多個頁面共享，就需要寫到全局配置對象裡面。

打開

app.js

，改寫如下。

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

上面代碼中，

App()

方法的參數配置對象有一個

globalData

屬性，這個屬性就是我們要在多個頁面之間分享的值。事實上，配置對象的任何一個屬性都可以共享，這裡起名為

globalData

隻是為了便于識别。

然後，打開

home.js

，改成下面的内容，在頁面腳本裡面擷取全局對象。

const app = getApp();

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

上面代碼中，

getApp()

函數是小程式原生提供的函數方法，用于從頁面擷取 App 執行個體對象。拿到執行個體對象以後，就能從它上面拿到全局配置對象的

globalData

屬性，進而把

app.globalData.now

指派給頁面腳本的

now

屬性，進而通過資料綁定機制，變成頁面的全局變量

now

。

最後，修改一下頁面代碼

home.wxml

。

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

開發者工具導入項目代碼，頁面渲染結果如下。

微信小程式入門解讀-③

可以看到，頁面讀到了全局配置對象

app.js

裡面的資料。

三、事件

事件是小程式跟使用者互動的主要手段。小程式通過接收各種使用者事件，執行回調函數，做出反應。

小程式的常見事件有下面這些。

tap ：觸摸後馬上離開。

longpress ：觸摸後，超過 350ms 再離開。如果指定了該事件的回調函數并觸發了該事件， tap 事件将不被觸發。

touchstart ：觸摸開始。

touchmove ：觸摸後移動。

touchcancel ：觸摸動作被打斷，如來電提醒，彈窗等。

touchend ：觸摸結束。

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

小程式允許頁面元素，通過屬性指定各種事件的回調函數，并且還能夠指定是哪個階段觸發回調函數。具體方法是為事件屬性名加上不同的字首。小程式提供四種字首。

capture-bind ：捕獲階段觸發。

capture-catch ：捕獲階段觸發，并中斷事件，不再向下傳播，即中斷捕獲階段，并取消随後的冒泡階段。

bind ：冒泡階段觸發。

catch ：冒泡階段觸發，并取消事件進一步向上冒泡。

下面通過一個例子，來看如何為事件指定回調函數。打開

home.wxml

檔案，改成下面的代碼。

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

上面代碼中，我們為頁面加上了一個按鈕，并為這個按鈕指定了觸摸事件（

tap

）的回調函數

buttonHandler

，

bind:

字首表示這個回調函數會在冒泡階段觸發（字首裡面的冒号可以省略，即寫成

bindtap

也可以）。

回調函數必須在頁面腳本中定義。打開

home.js

檔案，改成下面的代碼。

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

上面代碼中，

Page()

方法的參數配置對象裡面，定義了

buttonHandler()

，這就是

<button>

元素的回調函數。它有幾個地方需要注意。

（1）事件回調函數的參數是事件對象

event

，可以從它上面擷取事件資訊，比如事件類型、發生時間、發生節點、目前節點等等。

（2）事件回調函數内部的

this

，指向頁面執行個體。

（3）頁面執行個體的

this.setData()

方法，可以更改配置對象的

data

屬性，進而通過資料綁定機制，導緻頁面上的全局變量發生變化。

開發者工具導入項目代碼，點選按鈕後，頁面渲染結果如下。

微信小程式入門解讀-③

可以看到，點選按鈕以後，頁面的文字從"hello 張三"變成了"hello 李四"。

這裡要強調一下，修改頁面配置對象的

data

屬性時，不要直接修改

this.data

，這不僅無法觸發事件綁定機制去變更頁面，還會造成資料不一緻，是以一定要通過

this.setData()

去修改。

this.setData()

是一個很重要的方法，有很多細節，詳細介紹可以讀一下官方文檔。

四、動态提示 Toast

小程式提供了很多元件和方法，用來增強互動效果。比如，每次操作後，都顯示一個動态提示，告訴使用者操作的結果，這種效果叫做 Toast。

打開

home.js

檔案，為

this.setData()

加上第二個參數。

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

上面代碼中，

this.setData()

方法加入了第二個參數，這是一個函數，它會在頁面變更完畢後（即

this.setData()

執行完）自動調用。

這個參數函數内部，調用了

wx.showToast()

方法，

wx

是小程式提供的原生對象，所有用戶端 API 都定義在這個對象上面，

wx.showToast()

會展示微信内置的動态提示框，它的參數對象的

title

屬性指定提示内容，

duration

屬性指定提示框的展示時間，機關為毫秒。

開發者工具導入項目代碼，點選按鈕後，頁面渲染結果如下。

微信小程式入門解讀-③

過了700毫秒，提示框就會自動消失。

五、對話框 Modal

下面，我們再用小程式提供的

wx.showModal()

方法，制作一個對話框，即使用者可以選擇"确定"或"取消"。

打開

home.js

檔案，修改如下。

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

上面代碼中，使用者點選按鈕以後，回調函數

buttonHandler()

裡面會調用

wx.showModal()

方法，顯示一個對話框，效果如下。

微信小程式入門解讀-③

wx.showModal()

方法的參數是一個配置對象。

title

屬性表示對話框的标題（本例為"操作确認"），

content

屬性表示對話框的内容（本例為"你确認要修改嗎？"），

success

屬性指定對話框成功顯示後的回調函數，

fail

屬性指定顯示失敗時的回調函數。

success

回調函數裡面，需要判斷一下使用者到底點選的是哪一個按鈕。如果參數對象的

confirm

屬性為

true

，點選的就是"确定"按鈕，

cancel

屬性為

true

，點選的就是"取消"按鈕。

這個例子中，使用者點選"取消"按鈕後，對話框會消失，控制台會輸出一行提示資訊。點選"确定"按鈕後，對話框也會消失，并且還會去調用

that.setData()

那些邏輯。

注意，上面代碼寫的是

that.setData()

，而不是

this.setData()

。這是因為

setData()

方法定義在頁面執行個體上面，但是由于

success()

回調函數不是直接定義在

Page()

的配置對象下面，

this

不會指向頁面執行個體，導緻

this.setData()

會報錯。解決方法就是在

buttonHandler()

的開頭，将

this

指派給變量

that

，然後在

success()

回調函數裡面使用

that.setData()

去調用。關于

this

更詳細的解釋，可以參考這篇教程。

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

有了腳本以後，就可以通過小程式 API，去調用微信的各種内置能力。下一篇教程将重點講解如何使用小程式 API。

最後為了友善大家的溝通與交流請加QQ群： 625787746

請進QQ群交流：【IT部落格技術分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140

微信小程式入門解讀-③

一、資料綁定

二、全局資料

三、事件

四、動态提示 Toast

五、對話框 Modal

繼續閱讀

頁面傳值的方式 - 小程式篇一、跨頁面傳值二、頁面内傳值三、本地儲存四、全局的app對象

小程式回傳值

小程式url頁面傳值

微信小程式父子傳值

小程式元件傳值通訊

214情人節，使用微信小程式【信鴿相知】寫情書吧

微信小程式npm如何引用Vant Weapp

微信小程式雲開發入門(4)之資料庫的增删改查(查:含模糊查找)

簡單封裝一個微信小程式的ajax請求

微信小程式即時通訊(融雲sdk)

微信小程式的cover-image 無法覆寫的問題！注意一定是位址的問題之前試了好多次！首先要在cover-view 标簽裡面外層是 map chart，camera 等原始元件

小程式自定義button元件擷取使用者資訊（使用者授權登入）

微信小程式前端解密擷取使用者資訊

微信小程式界面開發-底部導航欄

微信小程式之底部導航欄（一）

微信小程式快速設定底部導航欄