任务：环球网-2016七夕H5页面
环境：swiper插件，gulp及相关常用工具。

适配

使用的还是lib-flexible那套解决方案，需要查看的可以点击这里

使用swiper

使用swiper页面的控制以及滑动功能就变得非常容易，可以参见Swiper中文网，其中添加给类名添加swiper-slide即可表示一页。
在Swiper实例化中，属性direction可以定义横向/竖向滑动，nextButton可以定义下一页按钮的选择器。onSlideChangeStart/onSlideChangeEnd事件中，可以定义滑动屏幕触发事件，一个表示页面变化开始，一个表示页面已经变化完成。在onSlideChangeStart中不能够出发slideTo()方法。
Swiper还有许多其他功能，可以参见Swiper中文网中API。

ES6的使用

ES6对于我这次来说主要使用是Class、let以及箭头函数等，Class和箭头函数应该属于语法糖，可以使得代码更加干净整洁。对于ES6的编译使用的是gulp-babel。

目录、git以及gulp相关

目录和之前的项目目录基本相同。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.
├── .eslintrc.json
├── .gitignore
├── dist
│   ├── css
│   ├── imgs
│   ├── js
│   └── libs
├── gulpfile.js
├── index.html
├── node_modules
├── package.json
├── psd
└── src
    ├── ES6
    ├── css
    ├── imgs
    ├── js
    ├── libs
    └── sass

dist目录存放合并、压缩的代码，用于上线使用。(自动生成)
src目录存放源文件。
node_modules目录存放用到的node工具。(自动生成)
psd目录其实存放的不仅仅是psd文件，还有项目设计的各种文件。
相比之前增加的文件：

  • .eslintrc.json：这是eslint的配置文件，用于检测代码的错误以及格式，配置项巨多，可以参看这里。

  • .gitignore：之前一直没用这个，很多功能就是一点点发现的，原谅我之前上传的代码。其中的内容就两行。但是还是很重要的，不要像我一样蠢:joy:。

    1
    2
    /node_modules/
    /psd/

  • src/ES6/：存放ES6代码。其实是为了便于学习，先将ES6编译好的代码输出到/src/js/目录下，然后再压缩到/dist/js/目录下。和/src/sass/ /src/css/文件夹一样。

git开始学习使用分支处理bug、添加尝试性功能等。

坑是用来爬的

最经典的坑——this

在使用setTimeout、setInterval调用函数的时候，this的指向会指向window。可以通过fn.bind(this)来指向想要的this，在旧版本浏览器下需要使用兼容写法。

省事也被坑——autoprefixer

autoprefixer可以根据配置自动添加浏览器前缀，但是他还有个配置项是remove，默认配置是true，表示会移除不必要的前缀。既然用了autoprefixer，肯定是不会自己再去手动写前缀的，既然是手动写了前缀，那么肯定是autoprefixer没有加上去，而项目中需要兼容的。但是这个默认配置会帮你把手动加上去的前缀移除，然后容许我哭一会:sob:。
andriod浏览器中animation以及keyframes需要添加前缀-webkit-，但是autoprefixer没有添加，不知道是不是我配置有问题。

没想到的坑——微信分享

关于微信分享的坑，其实很多公司都没有完全解决，应该是因为影响也不是特别大，就没有去研究解决。毕竟这个应该属于腾讯的问题，哪天企鹅一抽风，再调整规则，研究就白做了。
问题其实就是微信、QQ应用之间的分享，比如从微信分享到QQ好友或空间，从QQ分享到微信好友或朋友圈，分享标题、描述、图标会存在问题。 通过同时设置微信JS-SDK已经手机QQ中mqq.data.setShareInfo可以实现IOS端正常，但是安卓从微信分享到QQ貌似是有问题的。具体可以看(这里)[]。

其他

自定义单选框

自定义单选框并没有想象中的那么难，除了<input type="radio">外，还有个label标签和after伪类。
设置css[type=radio]: display: none;，对应label设置为未选中样式，添加after添加选中样式。(ps：最终因为产品经理一句话，又改用了按钮)

文字居中

要实现的效果是对话框中文字居中，对话的文字字数不固定，感觉纯粹靠着自己一点一点的调整padding，单位使用的是rem。不知道有没有更好的方法。

横屏问题

我承认我偷懒了，这里都没有解决好。因为所做H5页面不太方便适配横屏，想到的最好的解决办法是锁定竖屏，只是最后我也没能找到相关信息，更多应该还是需要看用户。

改进

需要改进的东西就太多太多了。

  • 最基本的，因为用到背景音乐，图片也比较多，应该添加加载页面。
  • 图片过多，其实有一些图片应该可以使用svg来替代，这样可以减小一部分流量，提高加载速度。
  • 动效过少，整个给我的感觉就是一大堆图片，自己都看不下去了。