小程序页面传参之事件传参

场景：
当我们在开发小程序的时候，经常会遇到此类要求：点击一个内容跳转到一个新的页面，并且新页面的内容是由点击的内容决定的。比如用户在美团上浏览商品，通常情况下我们去查看详情页面，会发现它的结构都是相同或者类似的，但是内容是由用户点击的内容决定的。比如点击黄焖鸡，进到详情页就会发现封面是黄焖鸡，这和我们点击的内容是一一对应的。这种效果在小程序开发过程中十分常见。今天我们拿一个音乐类的小程序举例子，看看页面之间的数据是如何进行关联的。

需求：
用户点击图1中的播放按钮时，跳转到图2，然后播放图1中对应列表的歌曲。
在这里插入图片描述


在本例中，如果点击图1“孤勇者”后面的播放按钮，跳转到图2，则播放“孤勇者”，且图2中的歌曲名字显示为“孤勇者”这首音乐。如果点击图1“太阳”后面的播放按钮，跳转到图2，则播放“太阳”，且图2中的歌曲名字显示为“太阳”这首音乐。

思考几个问题：
1.如何点击后跳转到新页面？
2.如何将图1中的信息传递到图2中？
3.图2中的歌曲名字如何做到和图1中一致？

简单分析下过程：
1.如何跳转？
给图1中的播放按钮绑定一个事件，在事件中使用wx.navigateTo({ url: url }) 跳转到新页面。