微信小程序开发 day10、day11 - 小程序共享数据的三种方式、旋转动画、动画暂停

一、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