服務項目
品牌網站建設

數字營銷

係統平台開發

數字產品

安全運維

Menu
官网开云
官网开云
微信小程序試水教程:參數傳遞
時間:2016-10-16 13:42:00


教程一:參數傳遞

這裏我找到兩(liang) 種小程序上的參數傳(chuan) 遞方式,為(wei) 了方便,我單獨拿出來和大家分享下.

一、通過事件進行參數傳遞

先來看眼小程序對事件的定義(yi) :

#什麽(me) 是事件?這裏是列表文本事件是視圖層到邏輯層的通訊方式。 這裏是列表文本事件可以將用戶的行為(wei) 反饋到邏輯層進行處理。 這裏是列表文本事件可以綁定在組件上,當達到觸發事件,就會(hui) 執行邏輯層中對應的事件處理函數。 這裏是列表文本 事件對象可以攜帶額外信息,如id, dataset, touches。

很明確的指出了是視圖層【wxml】到邏輯層【js】的通信方式,時間對象可以攜帶額外信息,用這個(ge) 事件來傳(chuan) 遞參數肯定沒錯了,接下來我們(men) 就來實際看下例子:

視圖.wxml

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>

邏輯.js

Page({ tapName: function(event) { console.log(event.target) } })

log打印

可以看到 dataset 裏麵就是我們(men) 設置的data-hi="MINA"的值了。現在我們(men) 來看下剛剛我們(men) 寫(xie) 的, 首先 bindtap,以bind開頭的就是要給他綁定個(ge) 事件,這個(ge) 事件的名字就是“=”號後麵的數值就是綁定的事件名稱,需要在 邏輯【js】層定義(yi) 上。 然後就是傳(chuan) 值了,注意到的朋友可以看到 我們(men) 這裏寫(xie) 了data-hi 和我們(men) 平時寫(xie) js的傳(chuan) 值是同一個(ge) 定義(yi) 方法。這個(ge) data-*就對應事件的屬性target裏的dataset 值。這裏我們(men) 需要調用的話就是event.target.dataset.hi就能取到data-hi所對應的值。

這裏需要注意下 data的定義(yi) 名稱: 書(shu) 寫(xie) 方式: 以data-開頭,多個(ge) 單詞由連字符-鏈接,不能有大寫(xie) (大寫(xie) 會(hui) 自動轉成小寫(xie) )如data-element-type,最終在 event.target.dataset 中會(hui) 將連字符轉成駝峰elementType。

官方示例:

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>Page({ bindViewTap:function(event){ event.target.dataset.alphaBeta == 1 // - 會(hui) 轉為(wei) 駝峰寫(xie) 法 event.target.dataset.alphabeta == 2 // 大寫(xie) 會(hui) 轉為(wei) 小寫(xie) } })

二、navigator 跳轉url傳(chuan) 參

*.wxml

<view class="btn-area"> <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳轉到新頁麵</navigator> <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在當前頁打開</navigator> </view>

*.js 跳到新頁麵之後在onload裏麵直接接收參數,接收方法也就是 options.[參數值]

Page({ onLoad: function(options) { this.setData({ title: options.title }) } })

好啦,今天就寫(xie) 到這裏,我順便把文檔鏈接寫(xie) 上,上麵寫(xie) 的文檔裏都有。我隻是把它們(men) 搬出來了,用我的話說了一遍。 …(⊙_⊙;)…

什麽(me) 是事件

navigator


Kaiyun体育官方全站入口服務SERVICE
谘詢
微信掃碼谘詢
電話谘詢
400-888-9358