1. 程式人生 > >小程式磚塊(二)利用console.log(e)檢視和使用事件傳值

小程式磚塊(二)利用console.log(e)檢視和使用事件傳值

寫小程式時可以利用console.log(e)來檢視傳值情況並使用

xxx:function(e){
    console.log(e);
}

然後就可以在偵錯程式中看到傳值情況

下面用小程式提供的QuickStart做例子

在index.js的事件處理函式

getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

進行編譯後偵錯程式會出現

此時我們更改上面的事件處理函式

getUserInfo: function(e) {
    // console.log(e)
    console.log(e.currentTarget.offsetTop)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

編譯後偵錯程式出現了

這正是我們上面看到的offsetTop的值

總結:

①function(e)傳值

②console.log(e)檢視事件傳的值有哪些

③e.aaa呼叫值

如例子中:

①getUserInfo: function(e) {

②// console.log(e)

③console.log(e.currentTarget.offsetTop)


相關推薦

程式磚塊利用console.log(e)檢視使用事件

寫小程式時可以利用console.log(e)來檢視傳值情況並使用xxx:function(e){ console.log(e); }然後就可以在偵錯程式中看到傳值情況下面用小程式提供的QuickStart做例子在index.js的事件處理函式getUserInfo:

程式磚塊點選事件的繫結

先是小程式文件中關於事件的描述:什麼是事件事件是檢視層到邏輯層的通訊方式。事件可以將使用者的行為反饋到邏輯層進行處理。事件可以繫結在元件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函式。事件物件可以攜帶額外資訊,如 id, dataset, touches。事件的使用方

程式磚塊用wx.setStorage、wx.getStoragewx.getStorageSync進行頁面間

先是儲存wx.setStorage Page({ data: { testnum:""//設定測試引數 }, test:function(){ var Num = this.data.testnum; wx.setStorage({//儲

微信程式筆記

整理資料 第三方元件庫 ZanUI這個是老版的,新版的現在是vant-weapp,現在來看這兩個可以互補。 wux-weapp這個沒用過,但是光看效果功能比上面的多。 weui-wxss微信官方的UI庫,瞭解下就行。因為上面三個隨便選一個,基本也就用不到它了

程式磚塊 wx.navigator不能跳導航頁面

頁面跳轉api是每個小程式都必須要用到先來看看官方文件wx.navigateTo(OBJECT)保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。OBJECT 引數說明:引數型別必填說明urlString是需要跳轉的應用內非 tabBa

Java 程式練習

一、四位隨機驗證碼 package lx2; import java.util.Random; public class Demo5 { public static void main(String[] args) { char[] arr={'s','b','

微信程式開發圖片上+服務端接收

上次介紹了小程式開發中的微信登入。文章: 微信小程式開發(一) 微信登入流程, 這次介紹下小程式當中常用的圖片上傳。 前幾天做了圖片上傳功能,被坑了一下。接下來我們來看一下微信的上傳api。 這裡的filePath就是圖片的儲存路徑,型別居然是個

cocos2dx 3.1從零學習——菜單、場景切換、場景

天空 ptr select 特效 new 要點 綁定 使用 water 回想一下上一篇的內容,我們已經學會了創建一個新的場景scene,加入sprite和label到層中。掌握了定時事件schedule。我們能夠順利的寫出打飛機的主場景框架。 上一篇的內容我練習了七個新

程式篇:伺服器接收程式圖片

小程式圖片上傳,在伺服器上接收小程式上傳的圖片 前面一篇介紹了本地搭建小程式測試伺服器,但是有一定侷限性:不能上傳圖片。因為小程式上傳圖片需要驗證公用ssl證書,使用一些不正規的免費證書不能完成上傳。所以我在阿里雲上申請了一個用來測試,方法:linux伺服器配置https 。當完成這

微信程式把玩十三modal元件

modal彈出框常用在提示一些資訊比如:退出應用,清楚快取,修改資料提交時一些提示等等。 常用屬性: wxml <!--監聽button點選事件--> <button b

微信程式把玩十七audio元件

音訊播放已經封裝的很好!只需配合屬性設定即可! (method和data配合使用) 主要屬性: wxml <audio action="{{action}}"

微信程式把玩十八image元件

image元件也是一個程式不可缺少的,可以這樣說一個app中image元件隨處可以看到,一般 image有兩種載入方式第一種是網路圖片第二種是本地圖片資源,都用src屬性去指定。 重點屬性:

微信程式把玩十五loading元件

loading通常使用在請求網路資料時的一種方式,通過hidden屬性設定顯示與否 主要屬性: wxml <!----> <button type="primary"

微信程式把玩十九video元件

視訊播放元件與圖片載入元件也沒啥差別,使用起來也沒啥注意的 重要屬性: wxml <!--監聽button點選事件--> <button bindtap="liste

微信程式開發技巧總結 -- 檔案的選取、移動、上下載

微信小程式開發技巧總結(二) -- 檔案的選取、移動、上傳和下載 1.不同型別檔案的選取 1.1 常用的圖片 視訊 對於大部分開發者來說,需要上傳的檔案形式主要為圖片,微信為此提供了介面。 wx.chooseImage({ count: 1, sizeType: ['original

Android註冊程式編寫主函式部分

Android註冊程式編寫(二) (作者:Baron_wu 禁止轉載) 大家關注一下,順便點個讚唄 首先安裝外掛:butterknife 開啟file下的setting並選擇plugins(在browse): 在browserepository中搜索butterknif

Webgl顯示Revit模型——利用Three.js優化顯示效果

Webgl顯示Revit模型(一)請見: https://blog.csdn.net/niuge8905/article/details/80044802 Three.js已經算是開發webgl最常用的開源庫了。Autodesk團隊開源了一個va3c來在web端顯示revit,但是這個更

vue Esview 視覺化程式設計 程式流程

接上次: 當呼叫assemble_page的時候,呼叫mounted函式 mounted(){ this.clear() //window.location.hash = deepCopy(window.location.hash) + ’ ’ this.getControlClazze

Java遊戲DanceWithStars:修改本地文件中的圖片圖片寬高圖片型別以及將圖片設定為JButton的影象

1. 修改本地文件中的圖片(圖片寬高和圖片型別) 為了使下載的圖片素材都具有統一的width和height,需要對下載來的圖片重新處理並另存 主要思想是:構造一個BufferedImage物件,用ImageIO.read()讀入,再用ImageIO.write()重畫 程式碼如下: 1 pac

微信程式-01筆記

微信小程式和Vue有點相似。 首先下載開發工具,直接去官網找工具就可以了  然後安裝使用就可以了 點選選擇小程式,來到這裡 點選測試號小程式 ,會自動生成AppID。然後建立專案就可以了 介面就是這樣、可以選擇各種機型以及屬於你的糞×。點選編譯或者直接