第11次课 - 动画与用户登录 - 微信小程序开发实战

1

教学目标

掌握CSS动画与wx.createAnimation
理解微信登录的整体流程
掌握openid的获取方式
能够实现用户登录与信息展示
案例：案例5-1 罗盘动画、案例5-2 用户登录

2

重点、难点与课时分配

◎

教学重点

CSS动画、wx.createAnimation、微信登录流程

△

教学难点

Animation API关键帧、登录态维护

课时分配（共 3 学时）

理论 1 学时

实践 2 学时

动画与登录流程讲解 1 学时，案例 5-1/5-2 实操 2 学时

3

课件要点

CSS动画

transition — 过渡动画(hover状态变化)

@keyframes — 关键帧动画

animation — 动画属性(name/duration/timing-function/delay)

transform — 变换(translate/rotate/scale)

小程序中CSS动画与Web一致

wx.createAnimation

wx.createAnimation({duration, timingFunction, delay})

animation.opacity() / rotate() / scale() / translate()

animation.step() — 表示一组动画完成

export() — 导出动画数据到视图

绑定: <view animation="{{animationData}}"></view>

微信登录流程

wx.login() — 获取临时登录凭证code

将code发送到开发者服务器

服务器用code换取openid和session_key

wx.getUserProfile() — 获取用户信息(头像/昵称)

自定义登录态: 3rd_session / token

案例5-1 罗盘动画 / 案例5-2 用户登录

案例5-1 罗盘动画 — wx.onCompassChange 取方位角，wx.createAnimation 旋转罗盘

案例5-2 用户登录 — wx.login 取 code，wx.getUserProfile 取头像与昵称

动画绑定：animation="{{animationData}}"，每组动画 step() 后必须 export()

登录态维护：自定义 token 存入 storage，后续请求统一携带并处理过期

综合运用动画与登录 API 完成两个教材案例

4

代码示例与讲解

CSS动画

                css-animation.wxss
                CSS动画效果
              
1/* transition 过渡动画 */
2.box {
3  width: 100rpx;
4  height: 100rpx;
5  background: #07c160;
6  transition: all 0.3s ease;
7}
8.box:active {
9  transform: scale(0.9);
10  opacity: 0.8;
11}
12
13/* @keyframes 关键帧动画 */
14@keyframes fadeIn {
15  from { opacity: 0; transform: translateY(20rpx); }
16  to { opacity: 1; transform: translateY(0); }
17}
18
19/* animation 属性 */
20.fade-in {
21  animation: fadeIn 0.5s ease-out forwards;
22}
23
24/* transform 变换 */
25.rotate { transform: rotate(45deg); }
26.scale-up { transform: scale(1.5); }
27.slide { transform: translateX(100rpx); }
28
29/* ⚠️ 小程序动画注意 */
30/* 1. 不支持 animation-name 等拆分写法，需简写 */
31/* 2. transform 需硬件加速可加 perspective */
32/* 3. transition 只能过渡数值型属性 */

小程序 CSS 动画有三种方式：transition 过渡动画，用于状态变化时的平滑过渡，如点击缩放、悬停变色；@keyframes 定义关键帧，配合 animation 属性实现循环或一次性动画；transform 变换包括 rotate 旋转、scale 缩放、translate 平移。注意小程序不支持 animation 拆分写法，必须用简写形式，transition 只能过渡数值型属性。

wx.createAnimation

                create-animation.js
                createAnimation 动画流程
              
1// 创建动画实例
2Page({
3  data: { animationData: {} },
4
5  onReady() {
6    this.animation = wx.createAnimation({
7      duration: 1000,
8      timingFunction: 'ease-in-out',
9      delay: 0,
10      transformOrigin: '50% 50% 0'
11    })
12  },
13
14  animate() {
15    // 透明度动画
16    this.animation.opacity(0.5).step()
17
18    // 旋转动画
19    this.animation.rotate(180).step({ duration: 800 })
20
21    // 缩放动画
22    this.animation.scale(1.5, 1.5).step()
23
24    // 平移动画
25    this.animation.translate(50, 0).step()
26
27    // 导出动画数据
28    this.setData({
29      animationData: this.animation.export()
30    })
31  }
32})
33
34<!-- WXML 绑定动画 -->
35<view animation="{{animationData}}">
36</view>
37
38// ⚠️ 关键要点
39// 1. 每调用 step() 表示一组动画结束
40// 2. export() 导出动画数据给 setData
41// 3. 同一 step 内多个变换会同时执行
42// 4. 不同 step 之间按顺序依次执行

wx.createAnimation 创建 JS 动画实例，设置 duration 时长、timingFunction 缓动函数。调用动画方法如 opacity、rotate、scale、translate 后必须调用 step() 标记一组动画结束。同一 step 内的变换同时执行，不同 step 按顺序依次执行。最后调用 export() 导出动画数据，通过 setData 绑定到 WXML 的 animation 属性上。

微信登录流程

                login-flow.js
                微信登录流程图
              
1// 微信登录完整流程
2Page({
data: { userInfo: {} },
4
// 第一步：调用 wx.login 获取 code
handleLogin() {
  wx.login({
    success: (loginRes) => {
      const code = loginRes.code
      // 第二步：将 code 发送到自己的服务器
      this.requestOpenId(code)
    }
  })
},
15
// 第二步：服务器用 code 换取 openid
requestOpenId(code) {
  wx.request({
    url: 'https://api.example.com/login',
    data: { code: code },
    success: (res) => {
      const { openid, token } = res.data
      wx.setStorageSync('token', token)
    }
  })
},
27
// 获取用户信息（需用户主动触发）
getUserInfo() {
  wx.getUserProfile({
    desc: '用于完善个人资料',
    success: (res) => {
      const { nickName, avatarUrl } = res.userInfo
      this.setData({ userInfo: res.userInfo })
      // 将用户信息发送到服务器
      this.uploadUserInfo(res.userInfo)
    }
  })
}
40})
41
42// ⚠️ 登录流程要点
43// 1. wx.login 获取的 code 有效期5分钟
44// 2. code 只能使用一次，不能复用
45// 3. getUserProfile 必须由用户点击触发
46// 4. openid 是用户唯一标识，不可直接传给前端

微信登录流程：wx.login 获取临时登录凭证 code，code 有效期5分钟且只能用一次；将 code 发送到开发者服务器，服务器用 code 加上 appid 和 appsecret 请求微信接口换取 openid 和 session_key；openid 是用户唯一标识，不能直接传给前端。获取用户信息用 wx.getUserProfile，必须由用户点击触发，desc 参数说明用途，返回昵称、头像等信息。

案例5-1罗盘动画+案例5-2用户登录

                compass-login.js
                罗盘动画 & 用户登录
              
1// 案例5-1：罗盘动画 compass.js
2Page({
data: { rotate: 0 },
4
onReady() {
  this.animation = wx.createAnimation({
    duration: 400,
    timingFunction: 'ease-out'
  })
  // 监听设备方向
  wx.onDeviceOrientationChange((res) => {
    const angle = res.alpha  // 0-360
    this.animation.rotate(-angle).step()
    this.setData({ animationData: this.animation.export() })
  })
},
17
onUnload() {
  wx.stopDeviceOrientationListening()
}
21})
22
23// 案例5-2：用户登录 login.js
24Page({
data: { hasLogin: false, userInfo: {} },
26
onLoad() {
  const token = wx.getStorageSync('token')
  if (token) this.setData({ hasLogin: true })
},
31
handleLogin() {
  wx.login({
    success: (res) => {
      this.getUserProfile(res.code)
    }
  })
},
39
getUserProfile(code) {
  wx.getUserProfile({
    desc: '用于完善会员资料',
    success: (profileRes) => {
      const { nickName, avatarUrl } = profileRes.userInfo
      // 将 code + 用户信息发送到服务器
      wx.request({
      url: 'https://api.example.com/auth/login',
      method: 'POST',
      data: { code, nickName, avatarUrl },
      success: (res) => {
        wx.setStorageSync('token', res.data.token)
        this.setData({ hasLogin: true, userInfo: profileRes.userInfo })
      }
      })
    }
  })
}
58})

案例5-1罗盘动画：用 wx.onDeviceOrientationChange 监听设备方向变化，获取 alpha 角度后通过 createAnimation 的 rotate 方法让罗盘指针反向旋转，step + export + setData 更新视图。页面卸载时停止监听。案例5-2用户登录：先 wx.login 获取 code，再 getUserProfile 获取用户信息，将 code 和用户信息一起 POST 到服务器，服务器返回 token 存入本地存储维持登录态。

5

课件预览与下载