工作至今,接觸過(guò)avalon,vue,微信小程序, ReactNative等多種前端技術(shù), 到最后發(fā)現(xiàn), 都少不了傳參, 接下來(lái)看看微信小程序如何實(shí)現(xiàn)傳參做下簡(jiǎn)單總結(jié)=.=

我們先來(lái)看一張圖, 這里面總結(jié)了幾種方法: 

 接下來(lái), 我就這張圖做簡(jiǎn)單說(shuō)明, 已經(jīng)明白的大佬們可以直接跳過(guò), 也還請(qǐng)多多指教~

1. navigator組件實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)時(shí)可攜帶參數(shù)

    // 假設(shè)在js文件的data數(shù)據(jù)中有申明userCode變量
   
     點(diǎn)我跳轉(zhuǎn)到home主頁(yè)
   
復(fù)制代碼

2. navigateTo()方法實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)時(shí)可攜帶參數(shù)

     let userCode = "test";
     wx.navigateTo({
       url: `../home/home?userCode=${userCode}`
     })
復(fù)制代碼

     以上兩種方法實(shí)現(xiàn)效果是一樣的: 攜帶參數(shù)并跳轉(zhuǎn)到home頁(yè)面, 那么在home頁(yè)面該如何接收傳遞過(guò)來(lái)的參數(shù)呢?
Answer: 在onLoad()方法里直接獲取即可!

   onLoad: function (options) {
     console.log("瞧一瞧你拿到的值",options);  
   }
復(fù)制代碼

3. 事件傳參
小程序可以在組件上綁定事件, 在傳遞參數(shù)的時(shí)候, 通過(guò)自定義屬性的方式, 詳細(xì)可以看下面的例子!

     //wxml
     事件傳參
     // js
     tapFn(e){
         console.log("獲取到自定義參數(shù)對(duì)象集合:", e.currentTarget.dataset);
     }
復(fù)制代碼

若將wxml中的bindtap改寫(xiě)成是catchtap, 同樣可以通過(guò)相同的js獲取到參數(shù)集合!

4. 組件傳參

     // 假設(shè)有個(gè)test自定義組件 && Tips: widget為自定義屬性名稱, 可隨意更改~
     // test組件定義處
     properties: {
         widget: {
           type: Object,
           value: {}
     }
     //組件使用處
     
復(fù)制代碼

這樣, 我們就可以通過(guò)widget自定義屬性將值傳給子組件, 供子組件進(jìn)行頁(yè)面渲染.