這篇文章主要介紹了教大家為小程序加入 JavaScript 腳本，做出動態(tài)效果，以及如何跟用戶互動。學(xué)會了腳本，就能做出復(fù)雜的頁面了。

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

前面的所有示例，小程序的頁面都是寫死的，也就是頁面內(nèi)容不會變。但是，頁面數(shù)據(jù)其實可以通過腳本傳入，通過腳本改變頁面，實現(xiàn)動態(tài)效果。

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

所謂"數(shù)據(jù)綁定"，指的是腳本里面的某些數(shù)據(jù)，會自動成為頁面可以讀取的全局變量，兩者會同步變動。也就是說，腳本里面修改這個變量的值，頁面會隨之變化；反過來，頁面上修改了這段內(nèi)容，對應(yīng)的腳本變量也會隨之變化。這也叫做 MVVM 模式。

下面看一個例子。打開home.js文件，改成下面這樣。

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

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

接著，修改home.wxml文件，加入name變量。

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

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

注意，變量名區(qū)分大小寫，name和Name是兩個不同的變量名。

開發(fā)者工具導(dǎo)入項目代碼，頁面渲染。

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

頁面和腳本對于變量name是數(shù)據(jù)綁定關(guān)系，無論哪一方改變了name的值，另一方也會自動跟著改變。后面講解到事件時，會有雙方聯(lián)動的例子。

二、全局?jǐn)?shù)據(jù)

數(shù)據(jù)綁定只對當(dāng)前頁面有效，如果某些數(shù)據(jù)要在多個頁面共享，就需要寫到全局配置對象里面。

打開app.js，改寫如下。

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

上面代碼中，App()方法的參數(shù)配置對象有一個globalData屬性，這個屬性就是我們要在多個頁面之間分享的值。事實上，配置對象的任何一個屬性都可以共享，這里起名為globalData只是為了便于識別。

然后，打開home.js，改成下面的內(nèi)容，在頁面腳本里面獲取全局對象。

const app = getApp();

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

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

最后，修改一下頁面代碼home.wxml。

<view>
  <text class="title">現(xiàn)在是 {{now}}</text>
</view>

開發(fā)者工具導(dǎo)入項目代碼，頁面渲染。

可以看到，頁面讀到了全局配置對象app.js里面的數(shù)據(jù)。

三、事件

事件是小程序跟用戶互動的主要手段。小程序通過接收各種用戶事件，執(zhí)行回調(diào)函數(shù)，做出反應(yīng)。

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

• tap：觸摸后馬上離開。
• longpress：觸摸后，超過 350ms 再離開。如果指定了該事件的回調(diào)函數(shù)并觸發(fā)了該事件，tap事件將不被觸發(fā)。
• touchstart：觸摸開始。
• touchmove：觸摸后移動。
• touchcancel：觸摸動作被打斷，如來電提醒，彈窗等。
• touchend：觸摸結(jié)束。

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

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

• capture-bind：捕獲階段觸發(fā)。
• capture-catch：捕獲階段觸發(fā)，并中斷事件，不再向下傳播，即中斷捕獲階段，并取消隨后的冒泡階段。
• bind：冒泡階段觸發(fā)。
• catch：冒泡階段觸發(fā)，并取消事件進(jìn)一步向上冒泡。

下面通過一個例子，來看如何為事件指定回調(diào)函數(shù)。打開home.wxml文件，改成下面的代碼。

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

上面代碼中，我們?yōu)轫撁婕由狭艘粋€按鈕，并為這個按鈕指定了觸摸事件（tap）的回調(diào)函數(shù)buttonHandler，bind:前綴表示這個回調(diào)函數(shù)會在冒泡階段觸發(fā)（前綴里面的冒號可以省略，即寫成bindtap也可以）。

回調(diào)函數(shù)必須在頁面腳本中定義。打開home.js文件，改成下面的代碼。

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

上面代碼中，Page()方法的參數(shù)配置對象里面，定義了buttonHandler()，這就是<button>元素的回調(diào)函數(shù)。它有幾個地方需要注意。

（1）事件回調(diào)函數(shù)的參數(shù)是事件對象event，可以從它上面獲取事件信息，比如事件類型、發(fā)生時間、發(fā)生節(jié)點、當(dāng)前節(jié)點等等。

（2）事件回調(diào)函數(shù)內(nèi)部的this，指向頁面實例。

（3）頁面實例的this.setData()方法，可以更改配置對象的data屬性，進(jìn)而通過數(shù)據(jù)綁定機(jī)制，導(dǎo)致頁面上的全局變量發(fā)生變化。

開發(fā)者工具導(dǎo)入項目代碼，點擊按鈕后，頁面渲染。

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

這個示例的完整代碼，可以查看代碼倉庫。

這里要強(qiáng)調(diào)一下，修改頁面配置對象的data屬性時，不要直接修改this.data，這不僅無法觸發(fā)事件綁定機(jī)制去變更頁面，還會造成數(shù)據(jù)不一致，所以一定要通過this.setData()去修改。this.setData()是一個很重要的方法，有很多細(xì)節(jié)，詳細(xì)介紹可以讀一下官方文檔。

四、動態(tài)提示 Toast

小程序提供了很多組件和方法，用來增強(qiáng)互動效果。比如，每次操作后，都顯示一個動態(tài)提示，告訴用戶操作的結(jié)果，這種效果叫做 Toast。

打開home.js文件，為this.setData()加上第二個參數(shù)。

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

上面代碼中，this.setData()方法加入了第二個參數(shù)，這是一個函數(shù)，它會在頁面變更完畢后（即this.setData()執(zhí)行完）自動調(diào)用。

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

開發(fā)者工具導(dǎo)入項目代碼，點擊按鈕后，頁面渲染。

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

五、對話框 Modal

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

打開home.js文件，修改如下。

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

上面代碼中，用戶點擊按鈕以后，回調(diào)函數(shù)buttonHandler()里面會調(diào)用wx.showModal()方法，顯示一個對話框。

wx.showModal()方法的參數(shù)是一個配置對象。title屬性表示對話框的標(biāo)題（本例為"操作確認(rèn)"），content屬性表示對話框的內(nèi)容（本例為"你確認(rèn)要修改嗎？"），success屬性指定對話框成功顯示后的回調(diào)函數(shù)，fail屬性指定顯示失敗時的回調(diào)函數(shù)。

success回調(diào)函數(shù)里面，需要判斷一下用戶到底點擊的是哪一個按鈕。如果參數(shù)對象的confirm屬性為true，點擊的就是"確定"按鈕，cancel屬性為true，點擊的就是"取消"按鈕。

這個例子中，用戶點擊"取消"按鈕后，對話框會消失，控制臺會輸出一行提示信息。點擊"確定"按鈕后，對話框也會消失，并且還會去調(diào)用that.setData()那些邏輯。

注意，上面代碼寫的是that.setData()，而不是this.setData()。這是因為setData()方法定義在頁面實例上面，但是由于success()回調(diào)函數(shù)不是直接定義在Page()的配置對象下面，this不會指向頁面實例，導(dǎo)致this.setData()會報錯。解決方法就是在buttonHandler()的開頭，將this賦值給變量that，然后在success()回調(diào)函數(shù)里面使用that.setData()去調(diào)用。

對于初學(xué)者來說，已經(jīng)講了很多東西，可能需要慢慢消化。如果對網(wǎng)頁開發(fā)和 JavaScript 語言不熟悉，你也許會覺得不容易完全理解，不用擔(dān)心，初學(xué)者只需要知道加入腳本的方法，以及腳本可以達(dá)到的效果就可以了，后面做到實際的項目，慢慢就會加深理解。

到此這篇關(guān)于微信小程序怎么加入JavaScript腳本，做出動態(tài)效果的文章就介紹到這了,更多相關(guān)微信小程序動態(tài)效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論