1. 程式人生 > >微信小程式Page中data資料操作和函式呼叫

微信小程式Page中data資料操作和函式呼叫

Page() 函式用來註冊一個頁面。接受一個 object 引數,其指定頁面的初始資料、生命週期函式、事件處理函式等。

//index.js
Page({
  data: {
    text: "This is page data.",
    sliderOffset: 0,
   sliderLeft: 0,
   state:{
         genre:[],
         genre_index: 0,
         model:[],
         model_index: 0,
         terminalStatus:'',
   }
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  // Event handler.
  viewTap: function () {
    var p = this.position
    ball(p, 150)
    function ball(x, y) {
     console.log(x,y)
    }
  },
  customData: {
    hi: 'MINA'
  }
})

1、設定data資料
  setData 函式用於將資料從邏輯層傳送到檢視層,同時改變對應的 this.data 的值。
注意: 

 (1)、直接修改 this.data 無效,無法改變頁面的狀態,還會造成資料不一致。 

 (2)、單次設定的資料不能超過1024kB,請儘量避免一次設定過多的資料。
  setData() 引數格式:接受一個物件,以 key,value 的形式表示將 this.data 中的 key 對應的值改變成 value。其中 key 可以非常靈活,以資料路徑的形式給出,如 array[2].message,a.b.c.d,並且不需要在 this.data 中預先定義。
下面設定data中的text和genre_index的值

this.setData({
     'state.genre_index':1,
      text:'data value'
})
2、獲取data資料
獲取data中的text和genre_index值需要使用this
var gener_index=this.data.state.genre_index
var text=this.data.text
3、呼叫viewTap函式
在viewTap函式中呼叫內部的ball函式可以直接呼叫,如果需要在onReady函式中呼叫viewTap函式需要使用this。
onReady: function () {
    this.drawBall()
  },




相關推薦

程式Pagedata資料操作函式呼叫

Page() 函式用來註冊一個頁面。接受一個 object 引數,其指定頁面的初始資料、生命週期函式、事件處理函式等。 //index.js Page({ data: { text: "T

程式更改重新整理data 陣列結構裡的某一項資料

這是我的小程式簡單效果圖每一個panel 是一個類別  每次點選檢視更多 需要呼叫介面重新整理當前類別的資料因為這是分類是一個數據 於是我定義成一個data  陣列data: { category_list:[ { id: 1, name: '閱讀', s

程式 藍芽 長資料包 分包拆包

https://www.jianshu.com/p/de7bd0093c43 關於 微信小程式藍芽 分包傳送 及 多包傳送 不返回問題   關於分包傳送 20位元組分包,微信小程式支援多於20位元組傳送。但是低功耗藍芽傳輸可能會有問題,建議分包傳送   for

程式開發textarea文字域監聽字數限制與動態計算

微信小程式開發時常會有評論或者備註功能,都會用到文字域字元長度計算以及字元限制的功能,筆者把最簡潔易用的案例分享出來。學習之前先看微信官方API文件 https://mp.weixin.qq.com/debug/wxadoc/dev/component/textarea.html

程式雲開發之資料分頁雲函式

微信小程式雲開發之資料分頁雲函式 2018-10-06 20:23:28       微信小程式的雲開發可以自己對資料庫進行操作而不需要後臺,那麼很常見的一

程式使用api接受資料

1:首先找一個api網站 現在百度免費體驗的api還是挺多的,直接搜尋就行了 例如我用的這個聚合或者idataapi,下面我就用聚合這個舉例: 開啟聚合找一個api(這個有免費贈送100次,不用認證) 點進去,然後進行測試   選擇一個介面 然後填寫引數

程式開發的二三事之網易雲IMSDK DEMO

本文由作者鄒永勝授權網易雲社群釋出。 簡介 為了更好的展示我們即時通訊SDK強悍的能力,網易雲信IM SDK微信小程式DEMO的開發就提上了日程。用產品的話說就是: 雲信 IM 小程式 SDK 的能力演示 提供開發者小程式開發參考 換句話說就是在微信裡面通過

程式的https請求資料

不管是寫什麼專案我們都會遇到前後臺互動這種情況,小程式也不例外,今天要說的就是小程式裡面的wx:request。 wx:request發起的是一個https的網路請求,小程式請求方式method預設為get,返回資料dataType預設為json,其他屬性大家可以去小程式的

程式,開發幾個重要的知識點(加密解密,轉發,進入場景,session_key)

小程式的授權資訊:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html   小程式的系統引數和進入場景引數等:https://developers.weixin.qq.com/

程式與 Django伺服器 資料流傳遞

Django伺服器 解析小程式傳送的json二進位制字串 https://blog.csdn.net/qq_25068917/article/details/81041048 http://www.cnblogs.com/Liang-jc/p/9326680.html

程式開發的注意點

一、<view> 標籤與 <block> 標籤的區別 <view> 是一個元件,會在頁面上做渲染 <block>不是一個元件,它僅僅是一個包裝元素,只接受控制屬性,不會在頁面中做任何渲染 如下栗子,wx:else 是一個

程式獲取表單資料

最簡單的方式我們呼叫bindinput方法 當鍵盤進行輸入的時候會觸發input的事件 “` bindValue (e) { //value就是表單中的資料 let value = e.detail.value; }

程式Swiper+wx.request 資料繫結重新整理

.wxml <swiper class="swiper1" indicator-dots="{{indicatorDots}}"   autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duratio

關於程式接受後臺json資料漢字變成問號

   最近做微信小程式開發,發現後臺傳來的json資料裡面的中文全變成了“?”    如下圖:          上網找也沒找到解決方法,後來經過自己除錯半天,突然就解決了,解決方案如下圖所示:           把 請求,響應的編碼格式和型別的語句 都放在  Pri

程式wx.request後臺資料互動

From:http://blog.csdn.net/a61595579/article/details/53404451 記錄微信小程式wx.request這個api在跟後臺互動時遇上的問題。 1、根據資料,完成第一步,請求傳送,程式碼如下: [javascript] view plain 

關於程式開發的顯示個人資訊以及重置密碼功能

        最近我們學習了微信小程式中的顯示個人資訊以及重置密碼,因為是老師做好的介面,所以我們只需要搭好前臺頁面以及編寫好JS程式碼就可以了。以上是顯示個人資訊的頁面,包含了使用者的學號,姓名,系別,班級(因為是學生評教系統,所以顯示這些內容),可以通過點選重置進入到修

程式與H5相互跳轉傳遞資料

這是小程式和web-vew的H5相互傳參,H5使用小程式的微信支付的程式碼 H5部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!--<meta

程式開發的那些事

背景 定義問題 歸結模型 需求分析 軟體開發 背景 最近一段時間,做了一個送禮品的小程式。中間也遇到了一些坑,今天我把它羅列出來,並附上自己的一些看法,作為後續開發的一些參考。 送禮的業務類似於微信紅包,只不過將微信的紅包替換成了實物禮品,並且

程式分頁載入資料

在使用類似qq,微博或者新聞類等資料量大的應用經常會遇到分頁載入功能,它不僅的應用場景廣,還能挺高使用者體驗。微信小程式中也可以分頁載入資料,這篇文章就是介紹。要實現這樣的功能,一般需要在請求資料時加入當前請求頁數,以及頁的大小(每頁顯示的數量)也有一部分介面是通過請求的開始

程式開發走過的坑(二)

》》》遇到的坑 (3)註冊頁面的實現 需求:使用者點選註冊按鈕,進入註冊頁面,輸入註冊資訊,完成註冊動作。 動畫演示: 程式碼實現: register.wxml <!--註