微信小程序-參數傳遞

#微信小程序-參數傳遞html

這裏我找到兩種小程序上的參數傳遞方式,爲了方便,我單獨拿出來和你們分享下.小程序

##1、經過事件進行參數傳遞 先來看眼小程序對事件的定義:微信小程序

#什麼是事件?

這裏是列表文本事件是視圖層到邏輯層的通信方式。
這裏是列表文本事件能夠將用戶的行爲反饋到邏輯層進行處理。
這裏是列表文本事件能夠綁定在組件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函數。
這裏是列表文本 事件對象能夠攜帶額外信息,如id, dataset, touches。

很明確的指出了是視圖層【wxml】到邏輯層【js】的通訊方式,時間對象能夠攜帶額外信息,用這個事件來傳遞參數確定沒錯了,接下來咱們就來實際看下例子:微信

視圖.wxml函數

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

邏輯.jsthis

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

log打印url

log

能夠看到 dataset 裏面就是咱們設置的data-hi="MINA"的值了。如今咱們來看下剛剛咱們寫的, 首先 bindtap,以bind開頭的就是要給他綁定個事件,這個事件的名字就是「=」號後面的數值就是綁定的事件名稱,須要在 邏輯【js】層定義上。 而後就是傳值了,注意到的朋友能夠看到 咱們這裏寫了data-hi 和咱們平時寫js的傳值是同一個定義方法。這個data-*就對應事件的屬性target裏的dataset 值。這裏咱們須要調用的話就是 event.target.dataset.hi就能取到data-hi所對應的值。debug

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

官方示例:component

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.target.dataset.alphaBeta == 1 // - 會轉爲駝峯寫法
    event.target.dataset.alphabeta == 2 // 大寫會轉爲小寫
  }
})

##2、navigator 跳轉url傳參 *.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
    })
  }
})

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

什麼是事件

navigator

相關文章
相關標籤/搜索