最近在做一個(gè)微信網(wǎng)頁里面的h5動(dòng)畫營銷項(xiàng)目道偷，遇到了下面幾個(gè)問題，均已解決~（項(xiàng)目是react+umi）
動(dòng)畫到了可視區(qū)再執(zhí)行
用的是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>
)
}
幀動(dòng)畫
https://www.cnblogs.com/rqqd/p/7998886.html
如果除了使用animate.css里面的動(dòng)畫记劈，還有其他動(dòng)畫需求勺鸦，比如fadeIn進(jìn)來后里面還有幀動(dòng)畫，怎么辦呢抠蚣？測(cè)試發(fā)現(xiàn)ReactWOW的動(dòng)畫只是作用于其子元素祝旷，子元素里面再嵌套一個(gè)div即可寫自己的動(dòng)畫啦，這里用一個(gè)幀動(dòng)畫舉例嘶窄，因?yàn)橄旅嬉f幀動(dòng)畫停留在最后一幀的問題怀跛。
<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;
}
}
幀動(dòng)畫停在最后一幀
https://www.cnblogs.com/rqqd/p/7998886.html
有的幀動(dòng)畫是infinite的，所有設(shè)置start柄冲，end吻谋，backwards，forwards沒啥影響现横，
但是有的幀動(dòng)畫只執(zhí)行一次漓拾，并且停留在最后一幀阁最，剛開始搜到的是說設(shè)置forwards就可以，其實(shí)不是骇两，還與設(shè)置的stes動(dòng)畫有關(guān)速种，這里確實(shí)要設(shè)置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;
}
}
這樣才能保證是停留在最后一幀低千。
微信網(wǎng)頁ios自動(dòng)播放音頻配阵、視頻
安卓自動(dòng)播放直接加autoplay
但是由于ios安全方面的考慮，不讓自動(dòng)播放媒體資源示血，怎么辦呢棋傍？微信有辦法~
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錯(cuò)誤也沒關(guān)系，也會(huì)執(zhí)行wx.ready的难审；
不過這里要注意瘫拣，在wx.ready的時(shí)候要保證能拿到audio元素，我一開始加了個(gè)顯示audio的判斷告喊，發(fā)現(xiàn)在wx.ready里面打印沒拿到audio所以沒播放麸拄，誤以為這種方法不行。
html2canvas
對(duì)于不想細(xì)看canvas的童鞋黔姜，用html2canvas還是很方便噠~
<div id="sharePicBox" style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}
...// 海報(bào)內(nèi)容
</div>
<div id='container' style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}></div>
海報(bào)內(nèi)的內(nèi)容加載完成后執(zhí)行下面方法：
generateImage = () => {
let htmlDom = document.getElementById('sharePicBox');
if(htmlDom){
html2canvas( htmlDom , {
allowTaint: false, //允許污染
taintTest: true, //在渲染前測(cè)試圖片(沒整明白有啥用)
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(); //回調(diào)
})
}
}
顯示的海報(bào)和保存的海報(bào)不一樣的需求
有時(shí)候?yàn)榱舜蠹曳窒砗?bào)沒有廣告嫌疑的顧慮感帅，頁面顯示會(huì)將logo和二維碼隱藏掉，但是長(zhǎng)按保存或者長(zhǎng)按發(fā)送會(huì)有l(wèi)ogo和二維碼地淀，如何實(shí)現(xiàn)呢？先看下這張圖：
這是從側(cè)面看的頁面內(nèi)層級(jí)岖是，這樣看帮毁，上下兩張背景圖是融為一體的，其實(shí)是兩張圖豺撑，從而實(shí)現(xiàn)海報(bào)的展示和實(shí)際保存圖片看起來不一致的需求烈疚。
如果還有其他元素看起來在海報(bào)上，但實(shí)際保存下來不在海報(bào)上的需求聪轿，那就好辦了：
<div>用絕對(duì)定位實(shí)現(xiàn)看起來在海報(bào)上爷肝，其實(shí)不在生成海報(bào)的html元素里面，即 id="sharePicBox" 的div里面</div>
<div id="sharePicBox" style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}
...// 海報(bào)內(nèi)容
</div>
<div id='container' style={{position: 'absolute', width: '75vw', left: '12.5vw', top: '13vw', textAlign: 'center', height: '129.5vw'}}></div>
禁止頁面滑動(dòng)
為了適配各種手機(jī)屏幕陆错，可能會(huì)有一些頁面在xr手機(jī)上正好灯抛，但是短手機(jī)上就多出一截能上下滑動(dòng)，但下面也沒什么內(nèi)容音瓷，要想不讓短手機(jī)上下滑对嚼，只要把在外面的div設(shè)置屬性即可：
<div style={{position: 'absolute', top: 0, height: '100vh' ,width: '100vw', overflow:'hidden'}}>
...
</div>
分享設(shè)置（ios和安卓的不同）
這里雖然說的是分享設(shè)置，其實(shí)獲取wx.config都是通用的绳慎。
ios必須是一進(jìn)工程里面就要執(zhí)行纵竖，而且每個(gè)頁面沒辦法單獨(dú)配置漠烧；
而安卓是每個(gè)頁面都要執(zhí)行一次，所以各自頁面可靈活配置不同的內(nèi)容靡砌。
微信開發(fā)工具沒問題已脓，但是手機(jī)上有問題，如何調(diào)試通殃？用eruda
有時(shí)候在微信開發(fā)工具上沒問題度液，但是到手機(jī)上就有問題，用eruda可以看一些打印和請(qǐng)求情況等邓了，挺方便的恨诱。
<script src="/static/eruda.min.js" charset="utf-8"></script>
<script>eruda.init();</script>
