微信小程序怎麼加入JavaScript腳本,做出動態效果

這篇文章主要介紹瞭教大傢為小程序加入 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的值,將這個值寫入網頁。

註意,變量名區分大小寫,nameName是兩個不同的變量名。

開發者工具導入項目代碼,頁面渲染。

可以看到,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)的回調函數buttonHandlerbind:前綴表示這個回調函數會在冒泡階段觸發(前綴裡面的冒號可以省略,即寫成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()去調用。

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

到此這篇關於微信小程序怎麼加入JavaScript腳本,做出動態效果的文章就介紹到這瞭,更多相關微信小程序動態效果內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: