首頁  >  文章  >  微信小程式  >  微信小程式 參數傳遞詳解

微信小程式 參數傳遞詳解

高洛峰
高洛峰原創
2017-01-10 10:47:381690瀏覽

微信小程式的推出,無疑將會在行動互聯網產業中再次掀起風浪。

有人會質疑小程式會不會火, 會不會火我不知道, 看微信的用戶量即可明白一切。

微信小程式-參數傳遞

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

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

先來看眼小程式對事件的定義:

#什麼是事件?

這裡是列表文​​字事件是視圖層到邏輯層的通訊方式。
這裡是列表文​​字事件可以將使用者的行為回饋到邏輯層處理。
這裡是列表文​​字事件可以綁定在元件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函數。
這裡是列表文​​字 事件物件可以攜帶額外訊息,如id, dataset, touches。

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

視圖.wxml

  Click me!

印出

可以看到dataset 裡面就是我們設定的data-hi="MINA"的值了。現在我們來看下剛剛我們寫的, 首先bindtap,以bind開頭的就是要給他綁定個事件,這個事件的名字就是「=」號後面的數值就是綁定的事件名稱,需要在邏輯【js 】層定義上。 然後就是傳值了,注意到的朋友可以看到 我們這裡寫了data-hi 和我們平常寫js的傳值是同一個定義方法。這個data-*就對應事件的屬性target裡的dataset 值。這裡我們需要呼叫的話就是 event.target.dataset.hi就能取到data-hi所對應的值。

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

微信小程序 参数传递详解官方範例:

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

   

二、navigator 跳轉url傳參

*.wxml

<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 // 大写会转为小写
 }
})

 就是options.[參數值]

<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>

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

感謝閱讀,希望能幫助大家,謝謝大家對本站的支持!

更多微信小程式 參數傳遞詳解相關文章請關注PHP中文網!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn