前段时间做了个微信暑期活动的项目，期间遇到诸多难题，也踩了很多的坑，磕磕绊绊，总算是顺利上线了，在此总结下来。

  先说说这个项目的实际完成过程吧：

参与人数：2人

前端：1人

后端：1人

  1、首先讨论了活动的前端业务流程，论证了可行性，优化并修改了部分流程：移动端，三个页面，滑动翻页，前两页都只是信息展示，第三页内嵌四个独立页面，并且有交互。

  2、前期花了一周时间写出了前端页面和大部分的逻辑流程。

  3、第二周后端同事加入，花了些时间看前端代码，开始着手写后端逻辑以及和微信的交互代码

  4、第三、四周测试、完善流程，优化速度、修改bug等事项，最后上线，后期适当维护

  前端思路：滑动翻页用swiper；动效使用animate.css;第三页的交互使用vue

总结：

  1、首先是前后端对接的问题，刚开始是完全分离的，我只顾着写我的前端效果，完全没考虑如何和后端进行有效的对接，第一周也没有通后端同事沟通，比如前端最后怎么写能让后端的工作量更小、更高效，或者说前后端改如何配合才能让整个项目跑起来更流畅，效果更好等等，也就是说刚开始并没有全局观，只在干自己的一亩三分地，这为后来的工作埋下了隐患。

  2、前端选定框架的时候没有全局使用，本来可以整体都使用vue的，但刚开始考虑到只有第三个页面才会有交互，所以只在第三页使用了vue，这就导致在其它页面要控制第三页的内容就会很麻烦，甚至还要用jq对dom元素进行操作，增加了维护难度。

  3、一开始就要评估各种效果实现的难度系数，在已有的人手和水平下能否顺利实现，不行就要及时提出，找替代方法或者精简效果

  4、正式开工之前一定要把需求讨论清楚，敲定下来，至少大部分要确定下来，并形成书面材料或文档，不然后期需求会随时更改，改来改去，又没个文字记录，自己都不知道改了几版、改了哪些。

技术层面总结：

  1、页面在微信端打开后会有背景音乐，加载完成后会自动播放。但是安卓可以用audio标签的autoplay属性实现自动播放，但是苹果机默认设置是不播放音乐，必须手动交互才能播放，解决方法见我的博客《如何让苹果机自动播放背景音乐》

  2、图片的上传和压缩也是个麻烦事，需要对input标签的type=file属性很熟悉才能很好的对其操作，苹果手机拍的照片有些是竖着的，但传上去后，在页面展示的时候却变成横的了，和想要的效果相差了90度的旋转，详见《前端input图片的上传和压缩以及图片旋转90度问题解决》

  3、前端优化方面，由于图片比较多，采用了懒加载方法实现按需加载，提高加载速度，而swiper框架提供懒加载选项：

给图片添加wiper-lazy的class名，并加上data-src=‘图片链接’即可

<div class="swiper-slide page1">
    <div class="page1-top">
        <img data-src="./images/slide-1-title.png" alt="" class="swiper-lazy">
    </div>
    <div class="page1-content">
        <div class="page1-born">
            <img data-src="./images/slide-1-argly.png" alt="" class="swiper-lazy">
        </div>
        <img data-src="./images/slide-1-vs.png" alt="" class="page1-vs swiper-lazy">
        <div class="page1-beauty">
            <img data-src="./images/slide-1-preaty.png" class="page1-pic swiper-lazy" alt="">
            <img data-src="./images/slide-1-circle.png" class="page1-circle swiper-lazy" alt="">
        </div>
        <img data-src="./images/slide-1-footer.png" class="page1-footer swiper-lazy" alt="">
    </div>
</div>

<script src="./js/swiper.min.js" type="text/javascript"></script>

<script type="text/javascript">

swiper = new Swiper('.swiper-container', {
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    direction: 'vertical',
    lazyLoading: true,
    lazyLoadingOnTransitionStart: true
});

</script>