信息传递——Web学习day8

项目播放功能需求展示

1、每点入该歌曲的播放页面时，播放页面的中心旋转图案与主页低透明背景图片，必须和该页播放歌曲原有图片一致。

2、每点入该歌曲的播放页面时，播放主页中心得有其歌曲对应的歌名歌星信息。

3、播放新歌曲时，自动将上一首正在播放的歌曲暂停并播放新歌曲。

信息传递问题注意点

“地址目录？id名=”+res.currentTarget.dataset.id名

？与 = 千万别忘记

 wx.navigateTo({
          url: '/pages/play/play?mid='+res.currentTarget.dataset.mid, //适用不同页面发送数据。
        })

其他功能优化

调用方法

1、进入歌曲id去请求查询音乐信息。注意中括号不可删。

2、这里用函数方法运行代码，可方法不会自动执行，必须要调用。

onLoad执行了是因为，系统后台自动调用。

所以调用方法直接写在 onLoad: function (options) { }里面

调用方法格式

this.方法名(具体的值或变量)

音乐源网址

http://music.163.com/api/song/detail/?id={id}&ids=[{id}]

定义方法

此处（）是形参

此处（）是实参

参数是12333333传给options，相当于给options赋值

（js里不需要区分类型）

即在函数调用的时候已经将mid传值给options

loadMusicInfo: function (mid){
        let t = this;
       //1. 发送请求查询音乐信息。
    
       wx.request({
         url: 'https://music.163.com/api/song/detail/?ids=['+mid+']',
         success:function (res) {//会执行，天气预报。因为她跟onLoad,是系统调用的。回调函数。 回头调用。
             console.log(res.data.songs[0]) // 怎么传递数据到前端？两种方式，1. 在data 2. 不在data  ，，，this.setData({})
             t.setData({
                song:res.data.songs[0].name,
                name:res.data.songs[0].artists[0].name,
                imgs:res.data.songs[0].album.picUrl
             })
         }
       })
    }

懒加载

lazy-load=“true”

没点开的图片不用加载，减少网页负荷

方法调用代码

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) { 
        //1. 根据mid 去请求网络https://music.163.com/api/song/detail/?ids=[1335350269]
        //这里可能有很多代码。通常抽取为一个方法。方法就是c里面的函数，方法会自动执行嘛？方法不会自动执行，必须要调用。
        // onLoad执行了是因为 系统后台自动调用。
        //调用方法格式  this.方法名(具体的值或变量)
        this.loadMusicInfo(options.mid) //传啥？  mid
        console.log(options.mid)
        if(oldMid == null){ //说明第一次进来直接播放最新音乐。
            this.playMusic(options.mid)
            oldMid = options.mid;
        }else{// 说明有歌曲在播放
            // 1. 本地点进来和在播放的是同样的歌曲，不需操作。
            //2. 本次点进来的和在播放的不是同一首，现在停止正在播放的音乐，再播放点进来的音乐。
            console.log("正在播放的音乐：" + oldMid+"最新音乐："+options.mid)
            if(oldMid!=options.mid){
                console.log("不同歌曲。。。。")
                //1. 暂停之前的
                player.stop();
                //2. 播放现在的最新的。
                this.playMusic(options.mid)
            }else{
                // 相同歌曲，有一种情况，我暂停，再点的同一首歌进来的，希望继续播放。
                if(status){  //true，在播放，不管
                
                }else{ // 说明没在播放，点击播放。
                    player.play()  //播放的方法
                    status = true;
                }
            }
        }  
        player.onPlay(function () {
            console.log("播放")
        })
        player.onPause(function () {
            console.log("暂停")
        })

播放页面功能实现

请求查询音乐信息

1、这里的mid要看做一个变量，

所以一定注意ur1后面的格式，即：

 url: 'https://music.163.com/api/song/detail/?ids=['+mid+']',

success回调函数

2、服务器返回的内容在success，数据在res里。

这里success是回调函数，接口调用成功的回调函数。

和 onLoad:function()生命周期相关方法类似，具有可自动执行的性质。

3、res储存系统自动给它调用的信息。有两种传数据方式：

一是直接在data里面写，二是写成this.setData({})

4、这里this不能用没显示紫色图标不能调用该方法，

于是在上面添加 let t = this;

loadMusicInfo: function (mid){
        let t = this;
       //1. 发送请求查询音乐信息。
    
       wx.request({
         url: 'https://music.163.com/api/song/detail/?ids=['+mid+']',
         success:function (res) {//会执行，天气预报。因为她跟onLoad,是系统调用的。回调函数。 回头调用。
             console.log(res.data.songs[0]) // 怎么传递数据到前端？两种方式，1. 在data 2. 不在data  ，，，this.setData({})
             t.setData({
                song:res.data.songs[0].name,
                name:res.data.songs[0].artists[0].name,
                imgs:res.data.songs[0].album.picUrl
             })
         }
       })
    }

其他功能优化

删除lists表

添加ids到data

 ids:[
            "1334270932", "1335350269", "1831768886", "1478246988","1416772486", "1357399690","1433562661","1830754338",
            "428390111", "96173575","1368398851","298900","1430287528","1439142552","1425814935","1401267982","1336856777"
            ,"35678899","1459950258","486188225","69846", "1826050584", "169747","1819636482","1379456709","1875208703",
            "1297743952","1857990943","1864641388", "1449559688","1496629559","864489622","1357839878","1878328446","459930484","1404885266","1346104327"
        ]

不用输入歌曲信息，直接写id，让系统自动帮忙传递信息。

使song里面的信息传到前去编历

onLoad: function (options) {
        let t = this;
        wx.request({
          url: 'https://music.163.com/api/song/detail/?ids=['+this.data.ids+']',
          success:function(res){
              console.die(res)
              t.setData({
                  list:res.data.songs
              })
          }