# 扩展阅读清单：第11次课

> 对应教材：《微信小程序开发实战（第2版）》第5章
> 课程主题：动画与用户登录
> 重点：CSS动画、wx.createAnimation、微信登录流程　难点：Animation API关键帧、登录态维护

---

## 官方文档 · 动画

| 序号 | 资源 | 类型 | 说明 |
|:---:|------|:----:|------|
| 1 | [wx.createAnimation](https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html) | 文档 | 全部动画方法与 step/export 用法 |
| 2 | [MDN · CSS animation](https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation) | 文档 | @keyframes 与 animation 各子属性 |
| 3 | [MDN · CSS transition](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition) | 文档 | 状态切换动画的首选方案 |
| 4 | [MDN · CSS transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform) | 文档 | translate/rotate/scale 的性能优势 |

## 官方文档 · 登录

| 序号 | 资源 | 类型 | 说明 |
|:---:|------|:----:|------|
| 5 | [小程序登录流程时序图](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html) | 文档 | 本课最重要的一张图，务必对照理解 |
| 6 | [wx.login](https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html) | 文档 | code 的有效期与使用限制 |
| 7 | [auth.code2Session 服务端接口](https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html) | 文档 | 服务端用 code 换 openid 的接口 |
| 8 | [获取用户信息（头像昵称填写能力）](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html) | 文档 | 注意历史接口的调整，按最新方案实现 |

## 传感器

| 序号 | 资源 | 类型 | 说明 |
|:---:|------|:----:|------|
| 9 | [wx.onCompassChange 罗盘](https://developers.weixin.qq.com/miniprogram/dev/api/device/compass/wx.onCompassChange.html) | 文档 | 案例5-1 的数据来源 |

---

## 本课自查清单

看完资料后，用下面几个问题自测。答不上来的，回到对应文档再看一遍。

- [ ] 你能独立完成吗：CSS动画与wx.createAnimation
- [ ] 你能讲清楚吗：微信登录的整体流程
- [ ] 你能独立完成吗：openid的获取方式
- [ ] 你能做到吗：实现用户登录与信息展示
- [ ] 遇到「Animation 动画只播一次」时，你知道从哪里开始查吗？
- [ ] 遇到「getUserProfile 调不起来」时，你知道从哪里开始查吗？
- [ ] 遇到「把 AppSecret 写进小程序代码」时，你知道从哪里开始查吗？

---

> 说明：以上链接均为官方文档、MDN 或知名开源仓库，可长期访问。
> 视频类资源只给检索入口而不写死具体视频链接——UP 主调整内容后单条链接极易失效，按关键词自行挑选近一年内、基于当前稳定版工具的教程更可靠。