h5专题学习路线

前言

学习h5专题,需要有良好的css和js基础知识。如果没有这些知识的,可以使用易企秀或者百度h5平台制作h5专题。以下是制作h5专题是需要用到的一些工具和库。

1. 前端基础知识

html教程

javascript教程

css教程

使用rem适配屏幕

html5的陀螺仪

2. 翻页

翻页插件有很多,其中最好用的是swiper。简单易用,功能强大。还有一个是iscroll,你可以了解下作为备用。

swiper

iscroll

3. 类jquery库

在h5专题中引入jquery的不多,一般都是引入zepto。zepto的用法跟jquery可以说一模一样。只是zepto比较小而已。

zepto

4. 动画

h5专题里最需要的就是动画了。用于动画的库非常多,根据我的经验最好用的是anime.js,没有之一,用了都说好。

anime.js

另一个比较常见的是animate.css

animate.css

另外就是需要自己手写动画了,常用3种,js方法 requestAnimationFrame ; css方法transitionanimation 。此外你还需要了解下transform是什么 transform

5. 游戏引擎

当h5专题动画更丰富的时候,就需要使用游戏引擎了。最简单的游戏引擎是lufylegend.js、比较复杂一点的是CreateJS EgretPixi.js 等。我个人建议createjs

6. 其他

手势:用于识别手指是捏还是平移还是旋转。推荐hammer.jsinteractjs。学习其中一个就可以了。

调试:制作h5的时候经常有些bug是只会出现在手机端的,这时候就需要涉及移动端调试了。推荐weinre

图片压缩工具tinypng

代码压缩工具fehelper

7.一些干货技术文档

什么是h5

浅析H5页面的设计思路与方法

使用rem适配屏幕

H5移动端知识点总结

移动端事件介绍

8.总结

网上其实并没有专门的制作h5的教程,因为制作h5是网页制作的一部分,如果会制作网页基本上就会制作h5.。以上是我列出来的制作h5常用的技术。使用这些技术,如果这些技术都可以掌握,基本上就可以满足日常的需求了。