微信小程序的推出，無疑將會(huì)在移動(dòng)互聯(lián)網(wǎng)行業(yè)里再次掀起風(fēng)浪。

有人會(huì)質(zhì)疑小程序會(huì)不會(huì)火， 會(huì)不會(huì)火我不知道， 看微信的用戶量即可明白一切。

微信小程序-參數(shù)傳遞

這里我找到兩種小程序上的參數(shù)傳遞方式，為了方便，我單獨(dú)拿出來和大家分享下.

一、通過事件進(jìn)行參數(shù)傳遞

先來看眼小程序?qū)κ录亩x：

#什么是事件?

這里是列表文本事件是視圖層到邏輯層的通訊方式。
這里是列表文本事件可以將用戶的行為反饋到邏輯層進(jìn)行處理。
這里是列表文本事件可以綁定在組件上，當(dāng)達(dá)到觸發(fā)事件，就會(huì)執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。
這里是列表文本 事件對象可以攜帶額外信息，如id, dataset, touches。

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

視圖.wxml

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

邏輯.js

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

log打印

可以看到 dataset 里面就是我們設(shè)置的data-hi="MINA"的值了?，F(xiàn)在我們來看下剛剛我們寫的， 首先 bindtap,以bind開頭的就是要給他綁定個(gè)事件，這個(gè)事件的名字就是“=”號后面的數(shù)值就是綁定的事件名稱，需要在 邏輯【js】層定義上。 然后就是傳值了，注意到的朋友可以看到 我們這里寫了data-hi 和我們平時(shí)寫js的傳值是同一個(gè)定義方法。這個(gè)data-*就對應(yīng)事件的屬性target里的dataset 值。這里我們需要調(diào)用的話就是 event.target.dataset.hi就能取到data-hi所對應(yīng)的值。

這里需要注意下 data的定義名稱： 書寫方式： 以data-開頭，多個(gè)單詞由連字符-鏈接，不能有大寫(大寫會(huì)自動(dòng)轉(zhuǎn)成小寫)如data-element-type，最終在 event.target.dataset 中會(huì)將連字符轉(zhuǎn)成駝峰e(cuò)lementType。

官方示例：

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

Page({
 bindViewTap:function(event){
  event.target.dataset.alphaBeta == 1 // - 會(huì)轉(zhuǎn)為駝峰寫法
  event.target.dataset.alphabeta == 2 // 大寫會(huì)轉(zhuǎn)為小寫
 }
})

二、navigator 跳轉(zhuǎn)url傳參

*.wxml

<view class="btn-area">
 <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳轉(zhuǎn)到新頁面</navigator>
 <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在當(dāng)前頁打開</navigator>
</view>

*.js 跳到新頁面之后在onload里面直接接收參數(shù)，接收方法也就是 options.[參數(shù)值]

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

好啦，今天就寫到這里，我順便把文檔鏈接寫上，上面寫的文檔里都有。我只是把它們搬出來了，用我的話說了一遍。 …(⊙＿⊙；)…

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

最新評論