微信网页H5可视区执行动画、帧动画停在最后一帧、iOS自动播放音频视频、React、html2canvas

最近在做一个微信网页里面的h5动画营销项目，遇到了下面几个问题，均已解决~（项目是react+umi）

动画到了可视区再执行

用的是animate.css和React_wow, React_wow依赖animate.css
https://cnpmjs.org/package/react-wow
https://daneden.github.io/animate.css/

$ npm install --save animate.css
$ npm install --save react-wow

使用：

import styles from './index.less';
import "animate.css";
import ReactWOW from 'react-wow'
...
...
render(){
    return (
            <ReactWOW animation='fadeIn'  duration='0.5s' delay='1s'>
                <div>123</div>
            </ReactWOW>
    )
}

帧动画

https://www.cnblogs.com/rqqd/p/7998886.html

如果除了使用animate.css里面的动画，还有其他动画需求，比如fadeIn进来后里面还有帧动画，怎么办呢？测试发现ReactWOW的动画只是作用于其子元素，子元素里面再嵌套一个div即可写自己的动画啦，这里用一个帧动画举例，因为下面要说帧动画停留在最后一帧的问题。

<ReactWOW animation='fadeIn'  duration='1s' delay='1s'>
        <div  style={{position: 'absolute', top: 0, right: 0, width: '48vw', height: '48vw'}} >
               <div  className={styles.animate2} />
         </div>
</ReactWOW>

.animate2 {
  background-size: 186vw 48vw ;
  background-image: url(''); 
  animation: ox2 0.5s steps(4, start) 0ms infinite normal backwards;
}
@keyframes ox2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -186vw 0;
  }
}

帧动画停在最后一帧

https://www.cnblogs.com/rqqd/p/7998886.html
有的帧动画是infinite的，所有设置start，end，backwards，forwards没啥影响，
但是有的帧动画只执行一次，并且停留在最后一帧，刚开始搜到的是说设置forwards就可以，其实不是，还与设置的stes动画有关，这里确实要设置forwards，但是ox11里面就要就不能是：

@keyframes ox11 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -280vw 0;
  }
}

而是：

.animate11 {
  background-size: 280vw 50vw ;
  background-image: url(' ');
  animation: ox11 6s steps(4, end) 1000ms 1  normal forwards;
}
@keyframes ox11 {
  0% {
    background-position: 70vw 0;
  }
  100% {
    background-position: -210vw 0;
  }
}

这样才能保证是停留在最后一帧。

微信网页ios自动播放音频、视频

安卓自动播放直接加autoplay
但是由于ios安全方面的考虑，不让自动播放媒体资源，怎么办呢？微信有办法~

componentDidMount () {
    let wx = window.wx;
    function autoPlayAudio() {
      wx.config({
        // 配置信息, 即使不正确也能使用 wx.ready
        debug: false,
        appId: '',
        timestamp: 1,
        nonceStr: '',
        signature: '',
        jsApiList: []
      });
      wx.ready(function() {
        let audio = document.getElementById('battle_bgm');
        console.log(111, audio)
        if(audio){
          document.getElementById('battle_bgm').play();
        }
      });
    }
    autoPlayAudio()
  }

这里的config错误也没关系，也会执行wx.ready的；
不过这里要注意，在wx.ready的时候要保证能拿到audio元素，我一开始加了个显示audio的判断，发现在wx.ready里面打印没拿到audio所以没播放，误以为这种方法不行。

html2canvas

对于不想细看canvas的童鞋，用html2canvas还是很方便哒~

<div id="sharePicBox" style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}
      ...// 海报内容
</div>
<div  id='container' style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}></div>

海报内的内容加载完成后执行下面方法：

generateImage = () => {
    let htmlDom = document.getElementById('sharePicBox');
    if(htmlDom){
      html2canvas( htmlDom , {
        allowTaint: false,   //允许污染
        taintTest: true,    //在渲染前测试图片(没整明白有啥用)
        useCORS: true,      //使用跨域
        background: "#fff",
      }).then(function(canvas) {
        let image = new Image();
        image.src = canvas.toDataURL("image/png");
        image.style.width = '100%';
        let container = document.getElementById('container');
        container.appendChild(image);
        let parent = htmlDom.parentElement
        if(parent){
          parent.removeChild(htmlDom);
        }
        // callBack();          //回调
      })
    }
  }

显示的海报和保存的海报不一样的需求

有时候为了大家分享海报没有广告嫌疑的顾虑，页面显示会将logo和二维码隐藏掉，但是长按保存或者长按发送会有logo和二维码，如何实现呢？先看下这张图：

image.png

这是从侧面看的页面内层级，这样看，上下两张背景图是融为一体的，其实是两张图，从而实现海报的展示和实际保存图片看起来不一致的需求。
如果还有其他元素看起来在海报上，但实际保存下来不在海报上的需求，那就好办了：

<div>用绝对定位实现看起来在海报上，其实不在生成海报的html元素里面，即 id="sharePicBox" 的div里面</div>
<div id="sharePicBox" style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}
      ...// 海报内容
</div>
<div  id='container' style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}></div>

禁止页面滑动

为了适配各种手机屏幕，可能会有一些页面在xr手机上正好，但是短手机上就多出一截能上下滑动，但下面也没什么内容，要想不让短手机上下滑，只要把在外面的div设置属性即可：

<div style={{position: 'absolute', top: 0, height: '100vh' ,width: '100vw', overflow:'hidden'}}>
  ...
</div>

分享设置（ios和安卓的不同）

这里虽然说的是分享设置，其实获取wx.config都是通用的。
ios必须是一进工程里面就要执行，而且每个页面没办法单独配置；
而安卓是每个页面都要执行一次，所以各自页面可灵活配置不同的内容。

微信开发工具没问题，但是手机上有问题，如何调试？用eruda

有时候在微信开发工具上没问题，但是到手机上就有问题，用eruda可以看一些打印和请求情况等，挺方便的。

<script src="/static/eruda.min.js" charset="utf-8"></script>
<script>eruda.init();</script>