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

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

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

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

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

下面看一個(gè)例子。打開(kāi)home.js文件，改成下面這樣。

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

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

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

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

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

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

開(kāi)發(fā)者工具導(dǎo)入項(xiàng)目代碼，頁(yè)面渲染。

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

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

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

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

打開(kāi)app.js，改寫(xiě)如下。

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

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

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

const app = getApp();

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

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

最后，修改一下頁(yè)面代碼home.wxml。

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

開(kāi)發(fā)者工具導(dǎo)入項(xiàng)目代碼，頁(yè)面渲染。

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

三、事件

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

開(kāi)發(fā)者工具導(dǎo)入項(xiàng)目代碼，點(diǎn)擊按鈕后，頁(yè)面渲染。

可以看到，點(diǎn)擊按鈕以后，頁(yè)面的文字從"hello 張三"變成了"hello 李四"。

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

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

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

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

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

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

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

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

開(kāi)發(fā)者工具導(dǎo)入項(xiàng)目代碼，點(diǎn)擊按鈕后，頁(yè)面渲染。

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

五、對(duì)話框 Modal

下面，我們?cè)儆眯〕绦蛱峁┑?code>wx.showModal()方法，制作一個(gè)對(duì)話框，即用戶可以選擇"確定"或"取消"。

打開(kāi)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ǎn)擊取消');
        }
      }
    });
  }
});

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

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

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

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

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

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

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

最新評(píng)論