**
** 由于传统的的可视化编辑h5营销互动，像易企秀这种，会受到很大的限制，很有很多动画和数据的交互无法实现，所以需要用代码来实现h5营销互动。
1.需要引入第三方的动画库animate.css，提高开发动画的效率 animation的语法:
animation: name duration timing-function delay iteration-count direction;animation-name: 规定需要绑定到选择器的 keyframe 名称。。animation-duration:规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function:规定动画的速度曲线。animation-delay: 规定在动画开始之前的延迟。animation-iteration-count:规定动画应该播放的次数。（值：n次，infinite无限循环）animation-direction:规定是否应该轮流反向播放动画。简介：animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果。
npm i animate.css -S import "../src/public/css/animate.min.css";动画使用要加类名animated，动画效果是
<span class="animated" style="animation-delay: 1.7s;" :class="{ fadeInUp: show }"></span>官网：https://animate.style/
2.每次打开活动页面，需要音乐自动播放，并且右上角可以打开关闭 //–创建页面监听，等待微信端页面加载完毕 触发音频播放
document.addEventListener("DOMContentLoaded", function() { console.log("节点已加载"); function audioAutoPlay() { _this.$refs.music.play(); document.addEventListener( "WeixinJSBridgeReady", function() { _this.$refs.music.play(); console.log(_this.$refs.music.pause); if (_this.$refs.music.pause && !_this.isplay) { _this.isplay = true; } }, false ); } audioAutoPlay(); }); //--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放 function audioAutoPlay() { _this.$nextTick(function() { _this.$refs.music.play(); if (_this.$refs.music.pause && !_this.isplay) { _this.isplay = true; } document.removeEventListener("touchstart", audioAutoPlay); }); } document.addEventListener("touchstart", audioAutoPlay);3.兼容不同尺寸的屏幕，使用rem，设计稿750px宽度;
npm i postcss-px2rem -S在vue.config.js的文件下
css: { requireModuleExtension: true, // css预设器配置项 loaderOptions: { postcss: { plugins: [ require("postcss-px2rem")({ remUnit: 75, }), ], }, }, },4.兼容不同宽高比的屏幕，设计图要按最小尺寸设计iPhone5的320*568 在iphoneX是这样子的 在iphone5显示是这样子的，
明显看出，在全面屏会多出很多空余空间，所以内部的内容要加上一个div盒子，给他用position定位，顶部和底部要留白 5.由于轮播图有定制化需求，引入第三方的轮播图组件swiper,进行二次开发
npm i swiper -S官网：https://www.swiper.com.cn/api/index.html Swiper5 使用方法 1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。可下载Swiper文件或使用CDN。
<!DOCTYPE html><html><head> ... <link rel="stylesheet" href="dist/css/swiper.min.css"></head><body> ... <script src="dist/js/swiper.min.js"></script> ...</body></html>2.HTML内容。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <div class="swiper-scrollbar"></div></div>导航等组件可以放在container之外3.你可能想要给Swiper定义一个大小，当然不要也行。
.swiper-container { width: 600px; height: 300px;}4.初始化Swiper：最好是挨着标签
...<script> var mySwiper = new Swiper ('.swiper-container', { direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, // 如果需要滚动条 scrollbar: { el: '.swiper-scrollbar', }, }) </script></body>如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。
<script>window.onload = function() { ... }</script>或者这样（Jquery和Zepto）(推荐)
<script> $(document).ready(function () { ... })</script>5.完成。恭喜你，现在你的Swiper应该已经能正常切换了。 如果作为CommonJs 或ES 模块引入
//CommonJsvar Swiper = require('swiper'); var mySwiper = new Swiper('.swiper-container', { /* ... */ }); //ES import Swiper from 'swiper'; var mySwiper = new Swiper('.swiper-container', { /* ... */ });6.每个动画有先后顺序，对动画进行延迟加载,实现错位的效果 延迟用
style="animation-delay: 1.2s;" style="animation-delay: 2.2s;"7.微信自定义分享 公司框架已经封装好了分享功能，填入参数即可
const shareConfig = (shareLink) => { share( "生日快乐", "亲爱的会员，悦悦祝您生日快乐", shareLink, "http://chuantu.xyz/t6/739/1593498352x-1224475230.png" ); };