當我們在開發小程序的時候，經常會遇到此類要求：點擊一個內容跳轉到一個新的頁面，并且新頁面的內容是由點擊的內容決定的。

 比如用戶在美團上瀏覽商品，通常情況下我們去查看詳情頁面，會發現它的結構都是相同或者類似的，但是內容是由用戶點擊的內容決定的。

比如點擊黃燜雞，進到詳情頁就會發現封面是黃燜雞，這和我們點擊的內容是一一對應的。

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

**需求：**

用戶點擊圖1中的播放按鈕時，跳轉到圖2，然后播放圖1中對應列表的歌曲。

（圖1） （圖2）

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

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

**思考幾個問題：**

1.如何點擊后跳轉到新頁面？

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

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

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

**1.如何跳轉？**

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

**2.頁面中參數如何傳遞給js？**

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

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

**3.當前Js中的參數如何傳給另一個頁面的js？**

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

**4.得到前一個頁面傳遞的參數后，如何調用后端接口并渲染到前端頁面上？**

構建一個歌曲詳情渲染的方法，方法中包含請求后端數據的過程，請求成功后重置data中的變量。然后在onload中調用此方法。前端頁面通過{{}}綁定data中定義的數據內容。

代碼過程：

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

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

```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中的初始數據**

```text
data: {
        songlist:[
         
            {
                "id":"1901371647",
                "songImg":"                "songName":"孤勇者",
                "singerName":"陳奕迅"
            }
]
}
```

更多關于web培訓的問題，歡迎咨詢千鋒教育在線名師。千鋒教育擁有多年IT培訓服務經驗，采用全程面授高品質、高體驗培養模式，擁有國內一體化教學管理及學員服務，助力更多學員實現高薪夢想。