【微信小程序創(chuàng)作之路】- 小程序事件綁定、動(dòng)態(tài)提示Toast、對(duì)話框 Modal

第六章 小程序事件綁定、動(dòng)態(tài)提示Toast、對(duì)話框 Modal

前言

本章主要講解小程序事件綁定、動(dòng)態(tài)提示Toast、對(duì)話框 Modal，結(jié)合代碼示例，我們來(lái)研究一下！

一、事件是什么？

事件是視圖層到邏輯層的通訊方式。事件是小程序和用戶互動(dòng)的主要方式，通過事件將用戶在視圖層的行為，反饋到邏輯層進(jìn)行業(yè)務(wù)處理。
這里引用小白白大佬文章的圖片（渲染層======視圖層）。

二、小程序中常用事件

微信官方文檔給出的小程序常用事件------>

三、事件傳播

??????事件傳播階段
想學(xué)習(xí)事件的知識(shí)，可以看阮一峰老師的文章

當(dāng)事件發(fā)生后，會(huì)在子元素和父元素之間進(jìn)行傳播。這種傳播分為三個(gè)階段。
①第一階段：從window對(duì)象傳導(dǎo)至目標(biāo)節(jié)點(diǎn)（上層傳到底層），稱之為捕獲階段（capture phase）。
②第二階段：在目標(biāo)節(jié)點(diǎn)上觸發(fā)，稱之為目標(biāo)階段（target phase）。
③第三階段：從目標(biāo)節(jié)點(diǎn)傳導(dǎo)回window對(duì)象（從底層傳回上層），稱之為冒泡階段（bubbling phase）。

??我們通過代碼來(lái)演示
??????通過兩個(gè)元素來(lái)看觸發(fā)幾次

<div>
  <p>點(diǎn)擊</p>
</div>

如果兩個(gè)節(jié)點(diǎn)都設(shè)置click事件監(jiān)聽函數(shù)。對(duì)于<p>點(diǎn)擊，click事件會(huì)觸發(fā)四次：<div>節(jié)點(diǎn)的捕獲階段和冒泡階段各一次，<p>節(jié)點(diǎn)的目標(biāo)階段觸發(fā)了2次。
1、捕獲階段：事件從<div>向<p>傳播時(shí)，觸發(fā)<div>的click事件；
2、目標(biāo)階段：事件從<div>到達(dá)<p>時(shí)，觸發(fā)<p>的click的時(shí)間；
3、冒泡階段：事件從<p>傳回<div>時(shí)，再次觸發(fā)<div>的click事件。
注：其中<p>節(jié)點(diǎn)有兩個(gè)監(jiān)聽函數(shù)，所以他們都會(huì)因?yàn)?code>click事件觸發(fā)一次，共兩次。

事件傳播的最上層對(duì)象是window，接著依次是document、html、（document.documentElement）和body（document.body）。也就是說(shuō)，上例的事件傳播順序，在捕獲階段依次為window、document、html、body、div、p，在冒泡階段依次為p、div、body、html、document、window。

四、指定回調(diào)函數(shù)階段

小程序可以通過屬性指定各種事件的回調(diào)函數(shù)，并且可以指定在哪個(gè)階段觸發(fā)回調(diào)函數(shù)。

五、event事件對(duì)象屬性

詳細(xì)屬性列表如下：

六、target和currentTarget的區(qū)別

target：觸發(fā)事件的源頭組件。
currentTarget：當(dāng)前事件所綁定的組件

??我們通過代碼來(lái)演示
??????通過代碼來(lái)區(qū)分一下

<view >
  <text class="title">hello </text>
  <button  bindtap="buttonHandler" type="primary">按鈕</button>
</view>

js文件

buttonHandler(event) {
    console.log("event" ,event);
    console.log("源頭組件" ,event.target);
    console.log("當(dāng)前事件所綁定的組件" ,event.target);
  },

輸出結(jié)果

分析結(jié)果：
e.target：內(nèi)部<button>按鈕組件
e.currentTarget ：當(dāng)前的<view>組件

七、代碼示例

這里我們借用阮一峰老師的代碼示例
??我們通過代碼來(lái)演示
??????點(diǎn)擊按鈕替換名稱

contact.html

<view >
  <text class="title">hello {{name}} </text>
  <button  bindtap="buttonHandler" type="primary">按鈕</button>
</view>

contact.js

Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    name: '張三'
  },

  buttonHandler(event) {
    this.setData({
      name: '李四'
    })
  }
})

點(diǎn)擊前

點(diǎn)擊后

1.函數(shù)前綴格式

<view >
  <text class="title">hello {{name}} </text>
  <button  bindtap="buttonHandler" type="primary">按鈕</button>
</view>

上面代碼中，為按鈕指定了觸摸事件（tag）的回調(diào)函數(shù)buttonHandler，bind前綴表示這個(gè)回調(diào)函數(shù)會(huì)在冒泡階段觸發(fā)。

??????注：其實(shí)我們可以加上:把bindtap寫為bind:tap。

2.事件函數(shù)為全局?jǐn)?shù)據(jù)賦值

 buttonHandler(event) {
    this.setData({
      name: '李四'
    })
  }

上述代碼中，通過調(diào)用this.setData(dataObject)方法，可以給頁(yè)面 data 中的數(shù)據(jù)重新賦值。

??????注：修改頁(yè)面配置對(duì)象的data屬性時(shí)，不要直接修改this.data，這不僅無(wú)法觸發(fā)事件綁定機(jī)制去改變頁(yè)面，還會(huì)造成數(shù)據(jù)不一致，所以一定要通過this.setData()去修改。詳情可以參考官方文檔.

3.事件函數(shù)傳參

小程序的時(shí)間傳參比較特殊，不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)。
小程序中使用data-* 自定義屬性傳參，*代表的是參數(shù)的名字。
在js文件中通過event.target.dataset.參數(shù)名獲得參數(shù)值
??我們通過代碼來(lái)演示
??????點(diǎn)擊按鈕通過事件傳參，改變名稱

contact.html

<view >
  <text class="title">hello {{name}} </text>
  <button  bindtap="buttonHandler2" data-indo="{{3}}" type="primary">按鈕</button>
</view>

contact.js

Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    name: '張三'
  },

  buttonHandler2(event) {
    this.setData({
      name: event.target.dataset.indo
    })
  }
})

點(diǎn)擊之前

點(diǎn)擊之后

八、bindinput語(yǔ)法格式

小程序中可以通過input事件來(lái)響應(yīng)文本框的輸入事件。

??我們通過代碼來(lái)演示
??????為文本框綁定輸入事件

contact.hrml

<view >
  <text class="title" wx:for="{{items}}">
    {{index}}，{{item}}
  </text>
  <input placeholder="輸入新增內(nèi)容" bindinput="inputHandler"/>
  <button bind:tap="buttonHandler3">確定</button>
</view>

contact.js

 inputHandler(e) {
    this.setData({
      inputValue: e.detail.value || ''
    });
  },

  buttonHandler3(event){
    const newItem = this.data.inputValue.trim();
    if(!newItem) return;
    const itemArr = [...this.data.items, newItem];
    wx.setStorageSync('items', itemArr);
    this.setData({items: itemArr});
  },

    /**
   * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
   */
  onLoad(options) {
    const itemArr = wx.getStorageSync('items') || [];
    this.setData({items: itemArr});
  },

上面代碼中，輸入框監(jiān)聽函數(shù)inputHandler(e)，就是當(dāng)用戶輸入內(nèi)容時(shí)，通過事件對(duì)象event的e.detail.value方法拿到輸入的內(nèi)容。當(dāng)用戶沒有輸入時(shí)，設(shè)置為空字符串。

按鈕監(jiān)聽函數(shù)buttonHandler3(event)，當(dāng)用戶點(diǎn)擊按鈕時(shí)，它會(huì)先拿到inputValue的值，賦給newItem，再加上非空判斷。如果非空的情況下，將新的值存入data.items中，賦給itemArr。然后通過wx.setStorageSync(參數(shù)1，參數(shù)2)，參數(shù)1代表鍵名，參數(shù)2代表鍵值，將items數(shù)組存儲(chǔ)在客戶端。最后使用this.setData()方法更新全局變量。

Page()中配置對(duì)象中有一個(gè)onLoad()對(duì)象。該方法屬于頁(yè)面的生命周期方法，頁(yè)面加載后會(huì)自動(dòng)執(zhí)行該方法。它只執(zhí)行一次，用于頁(yè)面初始化。這里是通過wx.getStorageSync()方法，從客戶端取出數(shù)據(jù)，顯示到頁(yè)面上。

??????注：事件的event對(duì)象可以縮寫為e
效果：
輸入之前

輸入后點(diǎn)擊確定

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

小程序提供了很多組件和方法，滿足用戶的需求。有時(shí)候我們操作完畢后，需要一個(gè)動(dòng)態(tài)提示告訴我們執(zhí)行完畢，這種效果叫做Toast。

??我們通過代碼來(lái)演示
??????點(diǎn)擊按鈕后，提示操作完成
contact.html

<view >
  <text class="title">hello {{name}} </text>
  <button  bindtap="buttonHandler" type="primary">按鈕</button>
</view>

contact.js

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

效果：

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

十、對(duì)話框 Modal

上面的動(dòng)態(tài)提示 Toast展示點(diǎn)擊按鈕后提示“操作成功”，但是我們?nèi)粘｜c(diǎn)擊刪除按鈕時(shí)，需要我們?cè)俅未_認(rèn)，這種情況是怎么實(shí)現(xiàn)的呢?

??我們通過代碼來(lái)演示
??????點(diǎn)擊按鈕后，提示操作完成
contact.html

<view >
  <text class="title">hello {{name}} </text>
  <button  bindtap="buttonHandler" type="primary">按鈕</button>
</view>

contact.js

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

??????注：

• wx.showModal()方法的參數(shù)是一個(gè)配置對(duì)象。title表示提示框的標(biāo)題，content屬性表示提示框內(nèi)容。success屬性是提示框成功后顯示的回調(diào)函數(shù)，fail屬性時(shí)失敗時(shí)回調(diào)函數(shù)。

• success中需要判斷一下用戶點(diǎn)擊的哪個(gè)按鈕。confirm值為true表示是確定按鈕，cancel的值為true表示是取消按鈕。

• 上面代碼修改值寫的是that.setData()。如果直接寫this.setData()方法輝報(bào)錯(cuò)。這是因?yàn)?code>setData()方法定義在頁(yè)面實(shí)例上，由于success()函數(shù)不是直接定義在Page()的配置對(duì)象下，導(dǎo)致this不會(huì)指向頁(yè)面實(shí)例，就會(huì)報(bào)錯(cuò)。想了解this關(guān)鍵字的詳細(xì)解釋，可以參考阮一峰老師文章.

效果：
點(diǎn)擊前：

點(diǎn)擊后

點(diǎn)擊取消，我們發(fā)現(xiàn)內(nèi)容沒有改變，并且控制臺(tái)輸出“用戶點(diǎn)擊取消”

點(diǎn)擊確認(rèn)，名稱發(fā)生了改變，提示"操作完成"

總結(jié)

以上就是今天要講的內(nèi)容，本文僅僅簡(jiǎn)單介紹了小程序事件綁定、動(dòng)態(tài)提示Toast、對(duì)話框 Modal的使用，下一章我們將講解如果請(qǐng)求后臺(tái)獲取數(shù)據(jù)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-620559.html

到了這里，關(guān)于【微信小程序創(chuàng)作之路】- 小程序事件綁定、動(dòng)態(tài)提示Toast、對(duì)話框 Modal的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！