从0实现一个年度报告

每到年底各大应用都会推出自己的年终总结报告，统计出用户一年来在应用内的行为展示给用户，供用户记录、分享。

今年掘金社区推出了自己的2022掘友年度报告，这次我们仿照这个报告，从0开始自己实现一个年终总结报告页面

实现难点

1. 数据模拟

一般情况下是根据用户UID，到后端去请求相关接口获得统计数据。

例如掘金的接口为https://api.juejin.cn/event_api/v1/annual/annual_summary?aid=xxxxxx

本次后端使用NodeJS实现了一个爬虫，可以将用户数据统计完成后导出JSON格式的数据，将此数据粘贴到前端页面的输入框即可生成自己的报告

2. 屏幕适配

可以观察到，在PC端和在手机端访问年度报告展示的效果是不一样的。

本次考虑使用媒体查询来实现这个功能：

宽屏则展示背景，页面切换也使用背景中的上下切换按钮
小屏则隐藏背景，让内容填满屏幕，页面切换通过滑动事件监听

3. 动画效果

动画分为文本与背景元素的动画

背景元素的动画使用了SVG动画
- 动画中不动的部分直接使用.png图片
- 运动的部分使用SVG动画绘制，如克里克的眼睛、尾巴
文本的动画使用了CSS Animation渐显的效果
- 不同段落之间通过animation-delay属性，彼此相差1000ms

背景动画容器的四个位置：左上角 右下角 中间部分 中间（悬浮气泡）。不同位置的动画容器都采用绝对定位position: absolute;，辅以z-index实现层叠

囿于工期，本次的背景动画直接采用静态图片+CSS Animation实现上下浮动的效果

4. 音乐播放

通过Audio接口访问网络音乐链接，控制音乐相关功能

进入页面开始播放
离开页面暂停播放
支持点击按钮切换播放状态

用户数据

用户数据内容

- 用户名
- 注册时间 距今天数
- 创作相关
    - 发布文章数
    - 总阅读数 总赞数 总评论数
    - 掘力值增长 超过人数百分比
    - 最受欢迎的文章标题
- 社交相关
    - 多少位掘友看过你的文章
    - 点赞最多的掘友 评论最多的掘友
- 学习相关
    - 阅读文章数 点赞数 评论数
    - 总阅读字数
    - 最关注的技术领域TOP3
- 沸点相关
    - 发布沸点数 互动掘友数 点赞数 收赞数
    - 互动最频繁的掘友
- 深夜阅读
    - 最晚一次阅读时间
    - 阅读的文章标题
- 早起阅读
    - 最晚一次阅读时间
    - 阅读的文章标题
- 最终总结
    - 用户名
    - 获得成就 饼图

数据模拟

根据不同页面分配不同的字段与数据，我根据自己的报告模拟了以下JSON数据

json

{"pages":[{"id":0,"data":{"userName":"Ziu","enterDay":1647619200000,"tillNow":291}},{"id":1,"data":{"publishArticle":187,"getReader":78959,"getLike":393,"getComment":13,"increment":3693,"rate":0.9773,"mostPopularArticle":"深入理解浏览器缓存原理"}},{"id":2,"data":{"growFriends":2861,"mostLike":"老边","mostComment":"重载新生"}},{"id":3,"data":{"mostGoodAt":["JavaScript","Vue3","TypeScript"]}},{"id":4,"data":{"readed":1397,"like":1347,"comment":1345,"words":"244万","mostFocus":["前端","JavaScript","Vue.js"]}},{"id":5,"data":{"oftenRead":[{"name":"seloven","followed":0},{"name":"掘金酱","followed":1},{"name":"CLICK克里克","followed":1},{"name":"稀土君","followed":1},{"name":"cc123nice","followed":0}]}},{"id":6,"data":{"publishPin":395,"interact":1283,"like":705,"getLike":374,"mostInteractWith":"狗哥哥"}},{"id":7,"data":{"mostLateTime":1665768240000,"publishArticle":"深入理解浏览器缓存原理"}},{"id":8,"data":{"mostEarlyTime":1661208660000,"publishArticle":"深入理解Proxy与Reflect"}},{"id":9,"data":{"nickName":"Ziu","ability":"学习力","analysis":"滴水石穿，读百篇尽显敏而好学","medal":["与你同行","笔耕不辍","博览群文","高才掘学","前排围观"]}}]}

编码中遇到的问题

音乐自动播放的问题

之前我希望不操作DOM，而是通过new Audio()更优雅的实现音频播放。实际情况是：浏览器禁用了无用户操作的音频自动播放，要想实现自动播放有两种解决方法：

HTML标签<audio>添加autoplay属性后续播放/暂停都需要操作DOM
为界面添加监听器，监听到用户操作后手动触发audio.play()

为了保证功能实现的稳定性，我选择了前者。

// useAudio.js
import { ref } from 'vue'

const defaultURL = 'https://xxxxxxxxxxxxxxxxxxxxxxxx.mp3'

export default function useAudio(url = defaultURL) {
  const audio = new Audio(url)
  audio.loop = true

  const playStatus = ref(false)

  const play = () => {
    audio.play()
    playStatus.value = true
  }

  const pause = () => {
    audio.pause()
    playStatus.value = false
  }

  return {
    audio, play, pause, playStatus
  }
}

VNode调整样式的问题

项目使用的框架是Vue3，部分页面使用到了JSX语法，众所周知JSX语法定义的组件返回的是一个VNode树，要想统一为树上元素添加渐变的样式则需要遍历他们。

需要遍历树上所有元素，并分别为他们添加不同值的animation-delay属性：

  const children = DOM.children
  for (let i = 1; i < children.length; i++) {
    const child = children[i]
    child.props
      ? (child.props.style = { animationDelay: `${i * 1000}ms` })
      : Object.assign(child, {
          props: { style: { animationDelay: `${i * 1000}ms` } }
        })
  }

style属性并不是VNode的直接属性，而放在props上的

监听`Animation`结束事件并更新响应式变量

如果当前页所有的动画都播放完毕，则需要将播放完的事件通知给JavaScript并将状态更新到响应式的变量中

在前文遍历DOM树时，为树中最后一个动画节点添加animationend监听回调，回调函数中执行document.dispatchEvent(e)，其中e是通过const e = new CustomEvent('custom-animationend')创建的自定义事件

回调触发时，在别处的onMounted回调内监听该自定义事件的触发，并更新响应式变量

切换页面支持触控滑动滚轮键盘

由于年终总结报告需要考虑到多种终端用户的体验，所以需要对翻页操作进行更多的优化

监听页面的触控滑动事件、滚轮滚动事件，并且匹配上翻页操作

  // 监听移动端滑动事件
  let startY = 0
  let endY = 0
  document.addEventListener('touchstart', (e) => {
    startY = e.touches[0].clientY
  })
  document.addEventListener('touchend', (e) => {
    endY = e.changedTouches[0].clientY
    if (endY - startY > 50) {
      prevPage()
    } else if (endY - startY < -50) {
      nextPage()
    }
  })
  
  // 监听鼠标滚轮事件
  document.addEventListener('wheel', (e) => {
    if (e.deltaY > 0) {
      nextPage()
    } else if (e.deltaY < 0) {
      prevPage()
    }
  })

  // 监听键盘事件
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp') {
      prevPage()
    } else if (e.key === 'ArrowDown') {
      nextPage()
    }
  })

代码打包

由于最后需要将项目放到码上掘金平台运行，所以需要考虑静态资源的加载问题

这里我使用到了Vite提供的类似file-loader的功能，可以将大小在指定阈值下的图片资源直接转为行内的DataURL，配置选项是config.build.assetsInlineLimit，这样所有的图片资源都不必考虑外部引入的问题，直接内嵌进代码。

技术介绍

主界面使用的是Vue3的SFC，主要逻辑都在单文件组件中完成。通过JSX语法编写不同页面的内容，这样更方便我们为每个节点添加不同的动画。

JSX编写的组件通过全局注册后，在SFC中通过<Component>动态加载。

图片资源方面，使用到了雪碧图，部署后可以降低客户端发起HTTP请求频次，提高性能

代码复用方面，样式代码都抽离为单个的xxxx.less文件，哪里用到了直接导入即可

使用到了Pinia状态管理库，将switching pageId audioStatus等全局状态放到其中管理非常方便，避免了provide和inject的繁琐

功能介绍

支持PC端/移动端展示不同样式
- PC端左侧有控制栏支持控制音乐播放切换页面
- 移动端右上角控制音乐滑动切换页面
页面之间切换有动态效果文字逐行展示
左上角、右下角会出现矢量动图

Demo展示

Demo(Vercel)

jcode

从0实现一个年度报告 ​

实现难点 ​

1. 数据模拟 ​

2. 屏幕适配 ​

3. 动画效果 ​

4. 音乐播放 ​

用户数据 ​

用户数据内容 ​

数据模拟 ​

编码中遇到的问题 ​

音乐自动播放的问题 ​

VNode调整样式的问题 ​

监听Animation结束事件并更新响应式变量 ​

切换页面支持触控滑动滚轮键盘 ​

代码打包 ​

技术介绍 ​

功能介绍 ​

Demo展示 ​