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

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

**需求：**

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

（圖1） （圖2）

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

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

**思考幾個(gè)問題：**

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

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

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

**簡(jiǎn)單分析下過程：**

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

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

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

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

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

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

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

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

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

代碼過程：

**1、歌曲詳情頁(yè)面：**

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

```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綁定點(diǎn)擊事件，點(diǎn)擊事件的名稱為gotoPlay -->
 <!-- data-id自定義一個(gè)屬性，可以跟隨事件傳遞 -->
        <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)的點(diǎn)擊
gotoPlay:function(even){
  // even代表執(zhí)行這個(gè)點(diǎn)擊事件時(shí)傳遞過來的所有信息
        var mid=even.currentTarget.dataset.id;
        // 用mid來接收data-id傳遞過來的id值;
        wx.navigateTo({
// 跳轉(zhuǎn)到新頁(yè)面。同時(shí)攜帶參數(shù)id=mid
            url: '/pages/play/play?id='+mid
        })    
    }
```

**2.播放頁(yè)面：**

**Play.wxml**

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

**Play.js**

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

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

    // 歌曲詳情渲染的方法
    musicShow(){
        var id=this.data.id
        // console.log(id)
        var that=this
        // 用that存儲(chǔ)當(dāng)前對(duì)象，網(wǎng)絡(luò)請(qǐng)求時(shí)，this指的是當(dāng)前網(wǎng)絡(luò)對(duì)象，不是當(dāng)前的play對(duì)象
        // 通過歌曲id來進(jìn)行接口的數(shù)據(jù)拼接
        var url="https://music.163.com/api/song/detail/?ids=["+id+"]"
        // 網(wǎng)絡(luò)請(qǐng)求
        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é)果：**

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

**- End -**