前言

在我們項(xiàng)目的搭建時(shí)常常會(huì)用到頁面跳轉(zhuǎn)，在微信小程序中也支持多個(gè)跳轉(zhuǎn)類型。如(wx.switchTab\wx.reLauch\wx.redirectTo\wx.navigateTo\wx.navigateBack)等等，每一個(gè)路由API都是有相對應(yīng)的特定跳轉(zhuǎn)功能，在這里我就不贅述了。

這里我們項(xiàng)目的需求是：點(diǎn)擊了盒子后跳轉(zhuǎn)至詳情頁面，并且攜帶活動(dòng)的唯一的id值、用戶類型（學(xué)生或者老師）、事件類型（活動(dòng)詳情、預(yù)約詳情）。如果要實(shí)現(xiàn)該功能，我們需要傳入一個(gè)特殊參數(shù)和兩個(gè)普通參數(shù)。

現(xiàn)在我們將重點(diǎn)放在給路由傳入多個(gè)特定參數(shù)上。首先我們知道可以給路徑后攜帶一個(gè)或者多個(gè)參數(shù)，參數(shù)也有不同的類型：普通參數(shù)（給定值的參數(shù)）、特殊闡述（動(dòng)態(tài)賦予的值，如數(shù)據(jù)庫單個(gè)記錄的_id等）。給跳轉(zhuǎn)攜帶多個(gè)普通參數(shù)很簡單，但是我們該如何讓它攜帶一個(gè)特殊參數(shù)在加上若干個(gè)普通參數(shù)呢？

---

給路由攜帶多個(gè)普通參數(shù)

如傳入給定的值參數(shù)我們這里稱為普通參數(shù)如下所示。

       //跳轉(zhuǎn)到詳情頁面
       goDetail(e){
              wx.navigateTo({
              // 跳轉(zhuǎn)到詳情頁面并攜帶兩個(gè)參數(shù)id1和id2，兩個(gè)參數(shù)直接用&隔開
                url: '/pages/eventDetail/eventDetail?id1=1&id2=2'
              })
       },

在eventDetail頁面打印的結(jié)果是：

Page({
       data:{
       },
       onLoad(option){
              console.log("列表所攜帶的值",option)
? ? ? ? ? ? ? //打印結(jié)果如下圖所示
       },
})

---

給路由攜帶一個(gè)特殊參數(shù)

 <view class="mine_application_content" wx:for="{{imfor}}" >
? ? ? ?? ? ? ? <!-- data-id：給view攜帶上_id的值-->
              <view class="event" bindtap="goDetail" data-id="{{item._id}}"
                     <view>活動(dòng)名稱：{{item.a1_huodongName}}</view>
                     <view class="eventTime">活動(dòng)開始時(shí)間：{{item.a2_startTime}}</view>
              </view>
</view>

//跳轉(zhuǎn)到詳情頁面
       goDetail(e){
              wx.navigateTo({
              // 跳轉(zhuǎn)到詳情頁面并攜帶活動(dòng)id
                url: '/pages/eventDetail/eventDetail?id=' +e.currentTarget.dataset.id
              })
? ? ? ? ? ? 
       },

Page({
       data:{
       },
       onLoad(option){
              console.log("列表所攜帶的值",option.id)
              //打印結(jié)果如下圖所示
       },
})

---

給路由攜帶一個(gè)特殊參數(shù)以及兩個(gè)普通參數(shù)

  <!-- 活動(dòng)內(nèi)容 點(diǎn)擊可跳轉(zhuǎn)至詳情頁面 -->
  <view class="mine_application_content" wx:for="{{imfor}}" >
? ? ? ? ? ? <!-- 攜帶id、用戶類型、事件類型（1為活動(dòng)、2為預(yù)約）三個(gè)參數(shù)-->
          <view class="event" bindtap="goDetail" data-id="{{item._id}}" data-user="stu" data-type="1">
                 <view>活動(dòng)名稱：{{item.a1_huodongName}}</view>
                 <view class="eventTime">活動(dòng)開始時(shí)間：{{item.a2_startTime}}</view>
          </view>
</view>

注：在JS部分我們不采用使用JSON轉(zhuǎn)換的方法，而是采取先加后截的方法來獲取各個(gè)參數(shù)，這里我們將用到JS中截取字符串的方法

• string.substr( )

• string.slice( a, b)

//跳轉(zhuǎn)到詳情頁面
goDetail(e){
      wx.navigateTo({
      // 跳轉(zhuǎn)到詳情頁面并攜帶活動(dòng)id（包括記錄id+用戶類型+詳情類型）
        url: '/pages/eventDetail/eventDetail?id=' +e.currentTarget.dataset.id + e.currentTarget.dataset.user + e.currentTarget.dataset.type
      })
},

Page({
       data:{
       },
       onLoad(option){
              let that = this
              //查看傳入該頁面的參數(shù)
              console.log("列表所攜帶的值",option.id)
              // 創(chuàng)建一個(gè)變量使其等于參數(shù)
              var parameters = option.id
              //創(chuàng)建一個(gè)type變量用來存儲(chǔ)詳情的類型截取參數(shù)的最后一位，1指的是活動(dòng)，2指的是預(yù)約
              var type = parameters.substr(parameters.length-1)
              //創(chuàng)建一個(gè)user變量用來存儲(chǔ)用戶類型截取參數(shù)的最后三位
              var user = parameters.slice(-4,-1)
              this.setData({
                     user:user,
                     type:type
              })
              // 創(chuàng)建id變量來存放活動(dòng)的_id字段所需要的值
              var id = parameters.slice(0,-4)
              console.log("user是",this.data.user)
              console.log("id是",id)
              console.log("type是",this.data.type)
? ? ? ? ? ? ? //全部打印的值如下圖所示
       },
})

這樣我們就大功告成了，使用了比較簡單的方法獲取到了路由所攜帶的三個(gè)參數(shù)。

---

結(jié)語

如果有疑問歡迎大家留言討論，你如果覺得這篇文章對你有幫助可以給我一個(gè)免費(fèi)的贊嗎？我們之間的交流是我最大的動(dòng)力！文章來源地址http://www.zghlxwxcb.cn/news/detail-417128.html