【学习打卡】第14天 分析一个不是问题的问题，让每篇文章音乐独立显示状态

课程名称：微信小程序入门与实战（全新版）

课程章节：分析一个不是问题的问题，让每篇文章音乐独立显示状态

主讲老师：7七月

课程内容：

今天学习的内容包括： 分析一个不是问题的问题，让每篇文章音乐独立显示状态。

 问题分析：

不同页面播放同一首音乐，我们需要在对应的页面切换对应页面的音乐。

让每篇文章音乐独立显示状态思路：

1. 一首音乐播放时让其它页面显示未播放，可以在在全局 App.js 设置一个 变量，并把值设置为 -1。

2. 在 onMusic 函数中设置此变量的值（start中 变量=this.data._pid; stop中 变量=-1）

3. 在 post.detail.js 中创建一个函数判断变量的 id 是否为当前音乐播放文章的 id 。

4. 用 isPlaying 变量精确绑定该函数并实现单独播放且不影响其它界面的音乐播放按钮。

示例代码：

// app.js
App({    
    onLaunch(){        
        console.log("开启小程序之旅")    
    },    
    gIsPlayingMusic: false,    
    gIsPlayingPostId: -1
})

// post.detail.js
onMusic(event) {        
    // 点击播放        
    if(isPlaying) {            
        // 调用所需参数            
        mgr.src = music.url;            
        mgr.title = music.title;           
        mgr.coverImgUrl = music.coverImg;           
        app.gIsPlayingMusic = true;           
        app.gIsPlayingPostId = this.data._pid;      
    } else {           
        // 暂停音乐       
        mgr.pause();     
        app.gIsPlayingMusic = false;     
        app.gIsPlayingPostId = -1;  
    }      
},

currentMusicIsPlaying() {        
    if(app.gIsPlayingMusic && app.gIsPlayingPostId === this.data._pid) {
        return true       
    }        
    return false    
},

课程收获：

今天小幅重构了之前的代码，让每篇文章的音乐可以独立显示状态，提升了用户体验。今天把第九章《音乐播放》的内容学完了。虽然打卡今天结束了，但是学习还要继续。明天学习第十章，加油。

今日课程学习时间大约花费 8 分钟。