微信小程序學習筆記二 數據綁定 + 事件綁定


微信小程序學習筆記二

1. 小程序特點概述

  1. 沒有DOM
  2. 組件化開發: 具備特定功能效果的代碼集合
  3. 體積小, 單個壓縮包體積不能大於2M, 否則無法上線
  4. 小程序的四個重要的文件
    *js
    *.wxml ---> view 結構 ---> html
    *wxss ---> view樣式 ---> css
    *.json --->view 數據 ---> json文件
  5. 小程序適配方案: rpx (responsive pixel 響應式像素單位)
    小程序適配單位 px
    規定任何屏幕下寬度為 750px
    小程序會根據屏幕的寬度不同自動計算rpx 值的大小
    Iphone6下 : 1rpx = 1物理像素 = 0.5px
    在這里插入圖片描述

2. wxml語法


2.1 數據綁定

2.1.1 初始化數據

  1. 頁面.jsdata選項中定義初始化數據
// pages/index/index.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    message:"hello world"
  },
})

在調試器中的 AppData中可以查看當前文件的數據
在這里插入圖片描述


2.1.2 使用數據

  1. 模板結構中使用雙大括號(插值表達式) {{mssage}}
  2. 注意事項: 小程序中為單項數據流 model ---> view
    在這里插入圖片描述
    點開模擬器就可以看到頁面解析后的樣子了
    在這里插入圖片描述

2.1.3 修改數據

  1. this.setData( { DATA_NAME: "NEW_VALUE"}, callback)
  2. 特點:
    2.1 同步修改: this.data值被同步修改
    2.2 異步更新: 異步將setData函數用於將數據從邏輯層發送到視圖層(異步)
// pages/index/index.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    message:"hello world"
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    console.log('頁面加載完成');

    // 修改message的狀態,語法: this.setData
    console.log(this); // this 代表當前頁面的實例對象
    this.setData({message:'new Hello World'},function () {
      console.log('數據更新完成')
    })
  }
})

在這里插入圖片描述
在這里插入圖片描述

  • 在上面代碼中我們知道了, setData修改數據的操作, 在自身所帶的鈎子函數中是同步的, 下面我們來測試一下在非自身的鈎子函數中修改數據是否同步
  • 代碼如下:
onLoad: function (options) {
	// 這里我們定義了一個定時器, 延時兩秒執行, 運行一下看在模擬器中看效果![請添加圖片描述](https://img-blog.csdnimg.cn/28b629180a6c414ab23c802cc5571b9b.gif)

    setTimeout(() => {
      this.setData({ message: 'new Hello World' }, function () {
        console.log('數據更新完成')
      })
    }, 2000);
  },

請添加圖片描述
由此我們可以得出, 小程序的數據修改,在非自身的鈎子函數中也是同步的


2.2 事件綁定

2.2.1 事件分類

事件分為冒泡事件和非冒泡事件:

  • 冒泡事件:當一個組件上的事件被觸發后,該事件會向父節點傳遞。
  • 非冒泡事件:當一個組件上的事件被觸發后,該事件不會向父節點傳遞。
    • 非冒泡事件:表單事件和自定義事件通常是非冒泡事件

事件列表

類型 觸發條件 最低版本
touchstart 手指觸摸動作開始 -
touchmove 手指觸摸后移動 -
touchcncel 手指觸摸動作被打斷,如來電提醒,彈窗等 -
touchend 手指觸摸動作結束 -
tap 手指觸摸后馬上離開 -
longpress 手指觸摸后,超過350ms再離開, 如果指定了事件回調函數並觸發了這個事件, tap事件將不被觸發 1.5.0
longtap 手指觸摸后, 超過350ms再離開 (推薦使用longpress事件代替) -
transitionend 會在 WXSS transitionwx.createAnimation動畫結束后觸發 -
animationstart 會在一個WXSS animation動畫開始時觸發 -
animationiteration 會在一個WXSS animation一次迭代結束時觸發
animationend 會在一個WXSS animation動畫完成時觸發 -
touchforcechange 在支持 3D Touch的iPhone設備, 重按時會觸發 1.9.90

2.2.2 綁定事件

  • bind綁定: 事件綁定不會阻止冒泡事件向上冒泡
    演示: 分別在 index.wxmlindex.js定義以下代碼
<view class="goStudy" bindtap="clickParent">
    <text catchtap="bindtap">{{message}}</text>
  </view>
  clickParent() {
    console.log('clickParent()');
  },
  clickChild() {
    console.log('clickChild()');
  },
  • 點擊text標簽之后我們查看調試器中信息, 可以看到外層的父元素的tap事件也被觸發了
    在這里插入圖片描述

  • catch綁定: 事件綁定可以阻止冒泡事件向上冒泡

  • 演示: 我們將index.wxml代碼修改如下

<view class="goStudy" bindtap="clickParent">
    <text catchtap="bindtap">{{message}}</text>
  </view>
  • 點擊text標簽之后我們查看調試器中信息
    在這里插入圖片描述

  • 可以看到只打印了一個clickChild(), 說明我們的默認冒泡事件被阻止了


2.2.3 向事件對象傳參

  • 在小程序開發的時候,有時候需要在點擊事件觸發之后拿到一個參數做為使用,小程序不像 Vue 可以直接點擊事件中放參數,而小程序它只能通過自定義屬性進行綁定參數使用。
  1. 語法: data-KEY=VALUE
    1.1 在index.wxml中這樣寫
 <text catchtap="clickChild" data-msg="傳遞的hello world">{{message}}</text>
  1. 獲取: event.target.dataset.key || event.currentTarget.dataset.key
 clickChild(e) {
    console.log('clickChild()');
    console.log(e.currentTarget.dataset.msg);
    let newMsg = e.currentTarget.dataset.msg;
    this.setData({message:newMsg});
  },

在這里插入圖片描述

  1. Event.targetevent.currenTarget的區別
    3.1 Event.target是觸發事件的對象, 但不一定是綁定事件的對象, 如: 事件委托, 冒泡
    3.2 currentTarget觸發事件的對象一定是綁定事件的對象, 沒有事件委托


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM