一、day10 - 小程序共享数据的三种方式
1、小程序里面数据共享的三种方式？分别适用于什么情况？
- 【app.js】适合放一些简单的共享数据，不存在复杂逻辑。（缺点） 不是响应式的，不好监听改变。
- 【export import】适合放一些独立的复杂逻辑模块（js里面的单例实现真简单）。（缺点）非响应式，不好监听改变。
- 【hy-event-store】存放需要进行响应式的数据，也就是数据改变了，页面也要跟着动起来。
image.png
2、思考在音乐播放项目中，哪些状态我们应该从播放页抽取出来，放到 hy-event-store 中去？
- ①歌曲相关信息：当前歌曲对象，歌词、时长
- ②是否播放的状态记录
- ③播放模式（单曲循环、随机播放、循环播放）
- ④剥离列表（列表歌曲、当前播放歌曲索引）
二、day11 - 旋转动画、动画暂停
1、实现下图 play-bar 的布局？（说下思路）
image.png
.player-bar {
position: fixed;
height: 44px;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}
.player-left, .player-right {
display: flex;
align-items: center;
}
// 头像
.player-image {
position: relative;
top: -10px;
width: 44px;
height: 44px;
border-radius: 50%;
margin-left: 10px;
margin-right: 6px;
}
2、如何实现上面的 play-bar 头像的旋转（无限旋转，可暂停，可开始）
// .wxss
.player-image {
animation: spin 5s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
// .wxml
<image class="player-image" style="animation-play-state: {{ isPlaying ? 'running': 'paused' }};" src="https://p2.music.126.net/zaLqUvz-C_H1u4n8-0MQcw==/109951166868150028.jpg"></image>
