2021 年度账单活动总结

年度账单为一年一次，以用户视角对在平台的一年：从购物，权益，服务等方面切入，进行全年的总结，通过这种方式让用户从账单中发掘打动内心的立意，并主动进行分享和传播。

启动页+授权

滑动引导页

结果页+分享

react + swiper + css3动画 + html2canvas

Swiper

swiper 是纯 javascript 打造的滑动特效插件，面向手机、平板电脑等移动终端，拥有丰富的 API。简单配置即可实现手机、电脑网页大部分滑动功能、焦点图、TAB、触摸导航等效果。年度账单活动采用的是react搭建页面，此次采用swiper 6.8.4：

年度账单活动只需展示动画，为了解决时间及性能使用了css3的amiton或transition制作页面动画效果，年度账单的启动页动画效果为简单重复的呼吸效果，启动页里的动效元素均可调用该动画效果：

@keyframes up {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  100% {
    transform: translateY(-10px);
    opacity: 1;
  }
}

滑动引导动页动画效果分为入场动画和出场动画，除文案为逐行展示外，页面的其他动效是根据动效元素的不同入场和出场动效都会有差别：

@keyframes font {
  0% {
    opacity: 0;
    transform: translateY(tounit(30));
  }
  5%{
    opacity: .6;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

文案的动画效果基本一致，逐行增加了延迟效果，并在动画结束使用animation-fill-mode：forwards，使元素状态停在了动画的最后一帧：

animation: font 1s linear 1.8s 1 forwards;

html2canvas

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。

html2canvas基本参数说明

setTimeout(() => {
  (window.html2canvas || html2canvas)(contaiter, {
      allowTaint: true,
      useCORS: true,
      backgroundColor: "transparent", //显示透明背景，解决元素圆角、背景色问题
      scale: scale,
      width: width
    }).then((canvas: any) => {
      const dataImg = new Image();
      dataImg.src = canvas.toDataURL("image/png");
      setCanvas(dataImg.src);
    });
  }, 1000);

2021年年度账单使用的html2canvas版本1.0.0-rc.4，是比较旧的一版，选择该版本主要原因： 在ios13下使用html2canvas的最新版本会造成截图不成功或者空白，网上查询的资料建议选择使用 1.0.0-rc.4。 虽然该版本在最新的ios15.0.1中会因截图元素含有中文造成截图空白并自动刷新的问题，这个问题可以删除样式文件中font-family调用-apple-system解决。

遇到的一些问题

1. 背景音乐重复播放 截图时，有部分系统会自动播放背景音乐，造成噪音，网上资料显示ios11会存在类似问题，但是在测试中基本ios系统都会出现这种问题，部分android也会出现这种问题，解决方法是，截图同时移除audio的autoplay属性：

   const getAudio = () => {
   if (jdMusic) {
    jdMusic.removeAttribute("autoplay");
   }
   };

2. 截图结果空白或缺少元素 会造成截图结果空白或者缺少元素，有两方面原因：

• 截图元素为加载完整，加上setTimeout延时转换成canvas，不然可能html的dom元素还没加载完;

• 使用css3属性，例如transition，会造成截图元素小概率未能截到，建议截图元素尽量少的使用css3属性。

  背景音乐使用audio标签，用户可以方便的控制音乐的播放与停止。 一般有以下几种情况，如果背景音乐在播放中需要停止，回到活动页面背景音乐继续播放：

• 离开活动页面

• 应用挂起/点击home键挂起应用/切换应用

• 来电/信息

• 手机息屏 这时候我们可以利用visibilitychange 事件，判断页面是否可见：

  document.addEventListener("visibilitychange", () => {
    if (document.hidden) {
      jdMusic.pause();
    } else {
      if (play) {
        jdMusic.play();
      } else {
        jdMusic.pause();
      }
    }
  });

  移动端适配方案目前经常使用的是rem和vw/vh两种方案，年度账单的页面元素涉及定位，因展示空间有限会造成部分机型在展示时，文案部分与其他部分重合（见下图），尤其本次增加折叠屏、ipad等大屏适配，按照以往为了显示效果一致会使用媒体选择器media解决屏幕展示不一致的问题，不但增加工作量，部分机型的展示效果也会冲突，为了解决屏幕适配，尽量减少代码量，使用了scale方案解决适配的问题。

  
  scale方案往常是解决大屏适配的方案，它的优点是在任何屏幕中页面都会等比例缩放，在任何尺寸、分辨率的屏幕上展示效果基本是一致的，后期的调试工作会减少很多。

1. 计算屏幕和设计稿的宽高比例

   const screenScale = () => {
    let width = 375;//设计稿原始尺寸
    let height = 812;
    let offsetWidth = window.innerWidth;
    let offsetHeight = window.innerHeight;
    let scaleX = offsetWidth / width;
    let scaleY = offsetHeight / height;
    let scale = Math.min(scaleX, scaleY);
    setScale({
      scale: scale,
    });
   };

2. 把这个比例设置给css的scale变量

   <div className='carSwiper'  style={{height:'812px',width:'375px', transform: `scale(${scale.scale})` }}>
   页面主体
   </div>

   这样不管手机屏幕尺寸是多少，分辨率有多高，例如三星折叠屏、小米one、iphone5、6、plus等机型，展示效果基本保持一致：三星折叠屏
   
   ipad横屏
   
   iphone5
   
   本文主要讲述了在本次开发年度账单过程中遇到的一些问题和解决的方案。希望此篇文章对大家有所帮助，欢迎大家互相交流探讨。