1. 程式人生 > >小程式開發系列(七)事件傳參

小程式開發系列(七)事件傳參

在觸發事件後,有時需要有些額外的資料,JS的寫法是直接以引數的形式傳遞。而小程式是react模式的,使用data觸發狀態變化而重新整理介面,繫結的事件裡,繫結的是函式的名稱,引數無法像一般編碼的方式直接傳入,那要怎麼辦?

小程式提供了一種方式,即daa-xxx,其中data-是標識事件觸發時會帶上這個引數,xxx是引數名。比如按鈕綁定了query事件,需要傳入一個產品的編號no作為引數,那我們在wxml中可以這樣寫:

<button type="default" bindtap="bindQuery" data-no='123456789'>查詢</button>
在對應的js中響應該事件
bindQuery:function(e)
{
    var no=e.currentTarget.dataset.no;
}
在wxml中data-xxx,xxx是什麼,在相應的事件中e.currentTarget.dataset.xxx的xxx就是什麼,兩者一一對應。這樣就在事件中傳遞引數。

如果傳遞的引數是動態的,那麼可以用動態的方式來寫,比如

<button type="default" bindtap="bindQuery" data-no='{{currentNo}}'>查詢</button>
其中currentNo,在js面中的data進行寫義,即
Page({
  data: {
    currentNo: '123456789'
  }
})
如果是來自於迴圈item的資料,可以直接傳item或item的某個欄位值,比如

(1)

JS部分的程式碼

Page({
  data: {
    list: [{name:'A',no:100001},{name:'B',no:100002}]
  }
})
WXML部分的程式碼(傳item的欄位)
<view wx:for="{{list}}">
  <button type="default" bindtap="bindQuery" data-no='{{item.no}}'>查詢{{item.name}}</button>
</view>
(2)

WXML部分的程式碼(傳item)

<view wx:for="{{list}}">
  <button type="default" bindtap="bindQuery" data-item='{{item}}'>查詢{{item.name}}</button>
</view>
JS響應bindQuery事件的部分
bindQuery:function(e)
{
    var item=e.currentTarget.dataset.item;
}
轉載請註明出處。




相關推薦

程式開發系列()事件

在觸發事件後,有時需要有些額外的資料,JS的寫法是直接以引數的形式傳遞。而小程式是react模式的,使用data觸發狀態變化而重新整理介面,繫結的事件裡,繫結的是函式的名稱,引數無法像一般編碼的方式直接傳入,那要怎麼辦? 小程式提供了一種方式,即daa-xxx,其中data

程式三個頁面之間

三個頁面的傳遞引數,這一次我想實現的事我在後臺取到的資料,展現在A頁面傳遞到B頁面展示,B傳遞到C頁面展示。 主要思路:A到B先把B頁面的值取出來並setdada出去   然後在從B傳單C。 主要程式碼: test.wxml       &nb

程式頁面跳轉、及引數獲取

//wxml <text wx:for="{{titles}}" wx:key="{{index}}" bindtap='changeClassify' data-id="{{index}}">{{item.name}}</text> //js function cha

微信程式之父子間元件

1.建立元件 開啟微信開發者工具,建立元件,會生成四個檔案:wxml,wxss,js,json 在wxml中: <view>我是元件A</view> 在js中: Component({ behaviors: [], properti

微信程式開發系列——4.程式檢視頁面基礎知識

摘要:本文介紹了小程式的使用的前端語言,以及小程式開發過程中需要知道的頁面基礎知識。 1. 介紹 搭建後端伺服器完畢以後,我們接下來準備小程式前端頁面的基礎知識。 由於微信前後端是分離的,我們開發時一般可以使用分塊開發的模式,即前端和後端程式碼分離,使

程式開發系列(三)資料互動與渲染

微信小程式的api中提供了網路互動的api,我們只要呼叫即可和後端進行資料互動,該api為wx.request.,具體程式碼如下。 //list.js //獲取應用例項 var app = getApp() Page({ data: { list:[],

微信程式開發之圖片上+Java服務端接收 好不好使有待確認

閒言少敘直入正題存放路徑:/root/apache-tomcat-8.5.30/webapps/images/xxx.jpg前端程式碼在網上一搜一大堆,且搜出來的結果基本上是正確的,沒啥好說的,我連程式碼都不想貼(如果有時間的話明天整理下貼在文章結尾,沒時間的話就不貼了)。但是,但是,但是,靠譜的,不用改動就

程式開發之元件事件處理函式、route及setData介紹

元件事件處理函式 Page 中還可以定義元件事件處理函式。在渲染層的元件中加入事件繫結,當事件被觸發時,就會執行 Page 中定義的事件處理函式。 .wxml <view bindtap="viewTap">click me</view> .js

微信程式開發系列——3. 騰訊雲伺服器配置

摘要:本文說明了在騰訊雲伺服器上通過“微信小程式專用解決方案”搭建、部署後端伺服器及基礎服務的過程。 瞭解了基本的開發工具以後,我們開始配置伺服器相關的資訊,要完成後端伺服器的配置,整體流程是這樣的: 騰訊雲針對上述痛點,為開發者們提供了一個微信小程式的

微信程式開發系列——5.前端頁面開發

摘要:本文說明了微信前端頁面開發的基本架構,說明了組成檔案各自的詳細結構,通過這幾個檔案的協同工作,微信小程式開發框架可以實現頁面Page中檢視層和邏輯層的統一。 0. 簡介 根據之前開發者工具和開發框架簡介的內容,我們把官方demo和開發者工具安裝好以

程式開發系列(九)文件下載與預覽

在小程式中,有時資料中含有一些必要的文件需要下載,當我們與後端互動得到了文件的URL後,無法直接預覽,需要將其下載,然後再預覽。 UI程式碼如下 <view bindtap='previewFile' data-url='{{doc.Url}}'>

【微信程式開發筆記】上多個檔案超過10個

【小程式筆記】wx.uploadFile(OBJECT) 先說說遇到的問題: 小程式可通過wx.uploadFile(OBJECT)介面上傳手機檔案至伺服器,但是在文件中關於請求中有這麼一段說明: request、uploadFile、down

【微信程式開發系列文章四】模組化

微信小程式的MINA框架,其實是許多前端開發技術的組合。這篇文章中,我們來簡單地討論一下模組化。 1、模組化標準 玩前端的同學大部分都知道模組化的幾個標準,CommonJs / AMD / CMD。這裡花費一些篇幅簡單的介紹一下,比較熟悉的同學可以跳過這一部分的介紹。(1)

微信程式開發——互動響應事件

WeChat小程式交流(QQ群:769977169)效果圖xxx.wxml結構程式碼示例<view class='view'>{{clickMsg}}</view> <vi

程式開發-bindtap事件

初接觸小程式時以為bindtap事件是不能傳參的,因為嘗試用vue的事件傳參方式 結果不行,讓我也惶恐了一陣,這要是不能傳參後面那麼多for迴圈該怎麼辦<view class='show'> <text data-no='1' bindtap='to

微信程式-bindtap等事件

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

微信程式事件

點選事件傳帶引數; 在WXML檔案裡 <view bindtap='showKeliu' data-mtype="神參"> <image src='/images/tabbaricon/search_info_normal.png '&

從零開始學前端第十講--微信程式開發入門

修真院Web工程師零基礎全能課   本節課內容 微信小程式開發入門   主講人介紹 沁修,葡萄藤技術總監 專案經驗豐富,擅長H5移動專案開發。 專注技術選型、底層開發、最佳程式碼實踐規範總結與推廣。     直播

微信程式開發(5)——上多張圖片

上傳圖片的流程是:本地將圖片上傳到——》微信臨時伺服器,能夠返回臨時圖片檔案地址——》再將臨時圖片檔案地址傳輸給服務端——》服務端從微信伺服器上下載臨時圖片檔案儲存在服務端上 這個流程有點繞,花了點時間,踩了幾腳坑才成功。 1.圖片選擇框 <view class=

微信程式開發記錄(四)位址列傳之true和false的坑

先看看小程式位址列傳參的方法,如下 wxml: <view class="weui-cells weui-cells_after-title" wx:if="{{isNewUser}}"> <navigator url="../addres