日常我們在手機app購物的時候，點擊app主頁琳瑯滿目的商品，就會跳轉到商品的具體頁面。

無論我們點擊哪個商品，跳轉到商品具體頁面的布局都是一樣的，但頁面內(nèi)的數(shù)據(jù)不一樣，比如說商品名稱，圖片等等不一樣。這就是在點擊商品的時候，在跳轉到具體頁面時候傳遞了參數(shù)，根據(jù)參數(shù)的不同，頁面的數(shù)據(jù)也不一樣。

所以我們現(xiàn)在簡單講一下在微信小程序里面，如何在跳轉時候，攜帶參數(shù)。

目錄

wmxl部分

跳轉函數(shù)

綁定的數(shù)據(jù)

?攜帶參數(shù)跳轉函數(shù)

跳轉頁面數(shù)據(jù)的接收

接收數(shù)據(jù)與數(shù)據(jù)處理

?將數(shù)據(jù)保存到data里面

wmxl部分

首先我們使用wx:for將js文件里面data里面的數(shù)據(jù)拿出來，循環(huán)遍歷來渲染頁面。

使用bindtap="gmJump"來給view添加點擊事件，名稱叫gmJump，這個函數(shù)就是寫跳轉功能的。

比如說手機淘寶app主頁，瀑布流布局配合懶加載，在下滑的時候，渲染的商品數(shù)據(jù)量也在增加，渲染的數(shù)據(jù)是比較多的，怎么才能在點擊一個商品的時候，在跳轉時候只帶這一個商品的數(shù)據(jù)進行跳轉，而不是把所有商品數(shù)據(jù)都帶著跳轉呢。

我們使用data-num="{{item}}"，將數(shù)據(jù)綁定在某個地方，至于是什么地方，我們接著看。

<view wx:for="{{dataArr}}" wx:key="index" data-num="{{item}}" bindtap="gmJump">
     //省略的dom結構，都是在根據(jù)數(shù)據(jù)渲染界面，所以省去。
</view>

跳轉函數(shù)

綁定的數(shù)據(jù)

我們跳轉函數(shù)gmJump中，我們寫一個形參，叫e。我們打印一下e，看看里面有什么。

gmJump(e){//攜帶參數(shù)跳轉
    console.log(e);
}

打印結果如下圖，這個e是一個對象，就是元素的所有信息。我們將數(shù)據(jù)就是綁給了這個元素的信息上。

?展開數(shù)據(jù)，在e.currentTarget.dataset.num里面，就是我們綁定進去的數(shù)據(jù)。所以我們可以對這部分數(shù)據(jù)進行處理。

?攜帶參數(shù)跳轉函數(shù)

首先我們把需要的數(shù)據(jù)e.currentTarget.dataset.num賦值給一個變量det。

然后使用wx.navigateTo寫跳轉，在url后面拼接數(shù)據(jù)，注意，在英文問號后面拼接名字，然后在引號外用加號拼接數(shù)據(jù)。

我們使用JSON.stringify將復雜的對象數(shù)據(jù)，轉換成字符串數(shù)據(jù)，拼接在url后面。如果我們直接拼接復雜的對象數(shù)據(jù)，會報錯。

  gmJump(e){//攜帶參數(shù)跳轉
    console.log(e);
    let det = e.currentTarget.dataset.num.attributes
    wx.navigateTo({
      url: '跳轉去的url地址?det='+JSON.stringify(det),
      success: ()=>{
        console.log("成功");
      }
    })
  },

跳轉頁面數(shù)據(jù)的接收

接收數(shù)據(jù)與數(shù)據(jù)處理

跳轉到的頁面，可以通過自身的生命周期函數(shù)onLoad（生命周期函數(shù)--監(jiān)聽頁面加載），來接收傳過來的數(shù)據(jù)。

onLoad(options) {
    let opt = JSON.parse(options.det)//傳過來的參數(shù)進行處理
    this.setData({//將傳過來的數(shù)據(jù)賦值給data里面的dataArr
      dataArr: opt,
    })
    // console.log(this.data.dataArr);
}

我們直接給onLoad函數(shù)寫一個形參options，打印一下這個options是什么。

如圖所示，這就是我們傳遞來的數(shù)據(jù)。但它是字符串形式的，我們必須將其轉成對象形式，才能對其進行操作。?所以我們使用JSON.parse()，將字符串數(shù)據(jù)轉換成對象，方便我們操作數(shù)據(jù)。

?轉換數(shù)據(jù)完成后，再打印一遍數(shù)據(jù)，看看是什么。如下數(shù)據(jù)變成了正常的對象形式，我們可以對數(shù)據(jù)進行操作了。

?將數(shù)據(jù)保存到data里面

之后我們使用this.setData，將數(shù)據(jù)保存到data里。我是定義了一個dataArr，將數(shù)據(jù)保存在這。之后在渲染頁面的時候，直接操作data里面這個數(shù)據(jù)就可以了。

 this.setData({
      dataArr: opt,
 })

至此我們完成了微信小程序里面頁面之間攜帶參數(shù)的跳轉，感謝您的閱讀。文章來源地址http://www.zghlxwxcb.cn/news/detail-490065.html

到了這里，關于微信小程序攜帶參數(shù)的頁面跳轉的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！