1. 程式人生 > >微信小程式(學習二) -- setData(頁面資料重新整理)

微信小程式(學習二) -- setData(頁面資料重新整理)

微信小程式提供了將資料從邏輯層傳送到資料層的函式setData。

Page.prototype.setData() setData 用於將資料從邏輯層傳送到檢視層,同時改變對應的 this.data 的值。接受一個物件,以 key,value 的形式表示將 this.data 中的 key 對應的值改變成 value。

首先要注意的是:
1、直接修改 this.data 而不呼叫 this.setData 是無法改變頁面的狀態的,還會造成資料不一致
2、單次設定的資料不能超過1024kB,請儘量避免一次設定過多的資料。
3、不能很頻繁的呼叫this.setData,例如自己註冊一個update函式,每幀呼叫一次this.setData,可能造成應用卡頓

下面給出一個示例,並在後面講解這個示例。

<!--pages/test.wxml-->
<text>{{count}}</text>
<button bindtap='clickCount' data-msg='click'>點選計數</button>
// pages/test.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    count: 0,
  },
 /**
   * 計數
   */
  clickCount(options) {
    console.log(options);

    this
.setData({ count: this.data.count + 1 }); } })

這裡寫圖片描述
每次更改count值,就可以在頁面刷新出來了。簡單容易理解。

我們在點選的時候呼叫了clickCount(options)函式,並且將options打印出來了,如果我們要給clickCount傳遞引數怎麼辦呢,可以這樣使用:

<button bindtap='clickCount' data-msg='click'>點選計數</button>

data-(你想傳遞的引數型別)=”引數”,微信會幫你封裝資料,將你點選資訊,頁面的一些資訊傳遞到邏輯段,看下圖。
這裡寫圖片描述


msg引數在Target中
這裡寫圖片描述
使用方式:

let count = options.target.dataset.msg;

資料的使用就到這裡了。