【学习打卡】第11天 浮动居中方案-通过left和top定位音乐图标，小程序音乐播放 API 介绍

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

课程章节：浮动居中方案-通过left和top定位音乐图标，小程序音乐播放 API 介绍，小试音乐播放API

主讲老师：7七月

课程内容：

今天学习的内容包括： 浮动居中方案-通过left和top定位音乐图标，小程序音乐播放 API 介绍，小试音乐播放API

设置 position: absolute 可以让图片脱离文档流。脱离文档流后可以用 left 和 top 两个属性设置位置。设置  margin-left 为图片宽度的一半。

   

以下是示例代码：

.audio {
    width: 102rpx;
    height: 110rpx;
    position: absolute;  
    left: 50%; 
    margin-left: -51rpx; 
    top: 150rpx;
}

除了这种设置写法外还有一种免去计算，更不易出错的写法：

.audio{    
    width: 102rpx;    
    height: 110rpx;    
    position: absolute;    
    left: 50%;    
    top: 150rpx;    
    transform: translate(-50%, -50%);
}

介绍了微信小程序官方内置的音乐 API，比如： 背景音频 API BackgroundAudioManager。这部分改动比较多，要用的时候可以直接去看文档。

背景音乐示例代码：

onMusic(event){        
    const mgr = wx.getBackgroundAudioManager();        
    mgr.src = postList[0].music.url;        
    mgr.title = postList[0].music.title;        
    console.log(mgr);       
},

课程收获：

今天又学习了一种新的官方内置接口， wx.getBackgroundAudioManager()。不知不觉微信小程序入门与实战这门课程的学习进度已经过半了，今天学会了调用背景音乐接口，可以把小程序当作一个迷你播放器了。

今日课程学习时间大约花费 17 分钟，明天周日接着努力。