最近在做一个微信网页里面的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 (
123
)
}
帧动画
https://www.cnblogs.com/rqqd/p/7998886.html
如果除了使用animate.css里面的动画，还有其他动画需求，比如fadeIn进来后里面还有帧动画，怎么办呢？测试发现ReactWOW的动画只是作用于其子元素，子元素里面再嵌套一个div即可写自己的动画啦，这里用一个帧动画举例，因为下面要说帧动画停留在最后一帧的问题。
.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还是很方便哒~
海报内的内容加载完成后执行下面方法：
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
这是从侧面看的页面内层级，这样看，上下两张背景图是融为一体的，其实是两张图，从而实现海报的展示和实际保存图片看起来不一致的需求。
如果还有其他元素看起来在海报上，但实际保存下来不在海报上的需求，那就好办了：
用绝对定位实现看起来在海报上，其实不在生成海报的html元素里面，即 id="sharePicBox" 的div里面
禁止页面滑动
为了适配各种手机屏幕，可能会有一些页面在xr手机上正好，但是短手机上就多出一截能上下滑动，但下面也没什么内容，要想不让短手机上下滑，只要把在外面的div设置属性即可：
...
分享设置（ios和安卓的不同）
这里虽然说的是分享设置，其实获取wx.config都是通用的。
ios必须是一进工程里面就要执行，而且每个页面没办法单独配置；
而安卓是每个页面都要执行一次，所以各自页面可灵活配置不同的内容。
微信开发工具没问题，但是手机上有问题，如何调试？用eruda
有时候在微信开发工具上没问题，但是到手机上就有问题，用eruda可以看一些打印和请求情况等，挺方便的。
image.png