比如點擊黃燜雞，進到詳情頁就會發(fā)現(xiàn)封面是黃燜雞，這和我們點擊的內(nèi)容是一一對應(yīng)的。

這種效果在小程序開發(fā)過程中十分常見。今天我們拿一個音樂類的小程序舉例子，看看頁面之間的數(shù)據(jù)是如何進行關(guān)聯(lián)的。

**需求：**

用戶點擊圖1中的播放按鈕時，跳轉(zhuǎn)到圖2，然后播放圖1中對應(yīng)列表的歌曲。

（圖1） （圖2）

在本例中，如果點擊圖1“孤勇者”后面的播放按鈕，跳轉(zhuǎn)到圖2，則播放“孤勇者”，且圖2中的歌曲名字顯示為“孤勇者”這首音樂。

如果點擊圖1“太陽”后面的播放按鈕，跳轉(zhuǎn)到圖2，則播放“太陽”，且圖2中的歌曲名字顯示為“太陽”這首音樂。

**思考幾個問題：**

1.如何點擊后跳轉(zhuǎn)到新頁面？

2.如何將圖1中的信息傳遞到圖2中？

3.圖2中的歌曲名字如何做到和圖1中一致？

**簡單分析下過程：**

**1.如何跳轉(zhuǎn)？**

給圖1中的播放按鈕綁定一個事件，在事件中使用wx.navigateTo({ url: url }) 跳轉(zhuǎn)到新頁面。

**2.頁面中參數(shù)如何傳遞給js？**

微信小程序提供自定義屬性，即data-*，若組件上觸發(fā)的事件，會發(fā)送給事件處理函數(shù)。

也就是說data-*自定義的內(nèi)容可以在事件執(zhí)行的時候獲取出來。然后用一個變量接收，并與需要跳轉(zhuǎn)的地址進行拼接，實現(xiàn)明文傳參。

**3.當(dāng)前Js中的參數(shù)如何傳給另一個頁面的js？**

當(dāng)前js使用wx.navigateTo({ url: url?Key=value})明文傳參，下個頁面在頁面一加載時就執(zhí)行onload：function（options）{}函數(shù)，此函數(shù)中的參數(shù)options就是用來接收所有信息的，它里面包含了傳遞過來的參數(shù)。

**4.得到前一個頁面?zhèn)鬟f的參數(shù)后，如何調(diào)用后端接口并渲染到前端頁面上？**

構(gòu)建一個歌曲詳情渲染的方法，方法中包含請求后端數(shù)據(jù)的過程，請求成功后重置data中的變量。然后在onload中調(diào)用此方法。前端頁面通過{{}}綁定data中定義的數(shù)據(jù)內(nèi)容。

代碼過程：

**1、歌曲詳情頁面：**

給播放按鈕綁定一個點擊事件，綁定的事件中需要具備兩個作用。一是接收事件傳遞的參數(shù)，二是攜帶接收到的參數(shù)跳轉(zhuǎn)到新的頁面。

```text
Songlist.Wxml

<!-- 歌曲列表 -->
<view class="musicContainer" wx:for="{{songlist}}" wx:key="songlist">
    <!-- 左邊封面 -->
    <view class="left">
        <image src="{{item.songImg}}"></image>
    </view>
    <!-- 中間歌曲信息 -->
    <view class="center">
        <view class="songName">{{item.songName}}</view>
        <view class="singerName">{{item.singerName}} · {{item.songName}}</view>
    </view>
    <!-- 右邊播放按鈕 -->
<view class="right">
 <!-- bindtap綁定點擊事件，點擊事件的名稱為gotoPlay -->
 <!-- data-id自定義一個屬性，可以跟隨事件傳遞 -->
        <image bindtap="gotoPlay" data-id="{{item.id}}" src="/images/playIcon.png"></image>
    </view>
</view>
```

**songlist.js中的初始數(shù)據(jù)**

**songlist.js中定義gotoPlay方法, 用于攜帶參數(shù)跳轉(zhuǎn)**

```text
// 監(jiān)聽播放圖標(biāo)的點擊
gotoPlay:function(even){
  // even代表執(zhí)行這個點擊事件時傳遞過來的所有信息
        var mid=even.currentTarget.dataset.id;
        // 用mid來接收data-id傳遞過來的id值;
        wx.navigateTo({
// 跳轉(zhuǎn)到新頁面。同時攜帶參數(shù)id=mid
            url: '/pages/play/play?id='+mid
        })    
    }
```

**2.播放頁面：**

**Play.wxml**

```text
<!-- 歌曲名字 -->
    <view class="songName">{{musicName}}</view>
```

**Play.js**

```text
Page({
/**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        id:"",
        musicName:"",
        musicPic:"",
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad: function (options) {
        var mid =options.id
        var index1=options.index
        // this指的是當(dāng)前對象，這里指的是play
        // console.log(options)
        this.setData({
            id:mid
        })
        // 歌曲詳情的渲染
        this.musicShow()
    },

    // 歌曲詳情渲染的方法
    musicShow(){
        var id=this.data.id
        // console.log(id)
        var that=this
        // 用that存儲當(dāng)前對象，網(wǎng)絡(luò)請求時，this指的是當(dāng)前網(wǎng)絡(luò)對象，不是當(dāng)前的play對象
        // 通過歌曲id來進行接口的數(shù)據(jù)拼接
        var url="https://music.163.com/api/song/detail/?ids=["+id+"]"
        // 網(wǎng)絡(luò)請求
        wx.request({
          url: url,
          success (res) {
            //   console.log(res)
            var name=res.data.songs[0].name
            // console.log(res.data.songs[0].id)
            var pic=res.data.songs[0].album.picUrl
            that.setData({
                "musicPic":pic,
                "musicName":name
            })
          }
        })
    }

})
```

**最終結(jié)果：**

點擊圖1中播放按鈕，跳轉(zhuǎn)到圖2播放頁，且圖2中的歌曲名稱就是圖1中的歌曲名字。

**- End -**