H5活动页开发有关

活动页开发流程

针对各类节日各类活动，临时定稿开发的活动页，每每时间安排都比较急 ————

1. 产品定下需求方向
2. UI实现设计稿
   1. 草图和交互逻辑定稿=>多少个页面，每一个页面表达的含义以及和用户的交互逻辑;
   2. 具体到每一个页面的UI设计稿;
   3. 动效脚本稿;
3. 基于2.1和2.2 => 先后端定义接口字段;
4. 前端疯狂敲代码
5. 后端疯狂敲代码
6. 阶段开发完成，测试
7. 提bug，加新需求(设计稿和原需求的某些弊端在前端实现后会一一暴露出来，所以作改进)

8. 重复5——7，直到上线。

   前端技术选型

毫无疑问，既然是H5活动页，固然要基于html5+css3+js;通常而言，对于活动页来说，必然要具有如下功能：

页面兼容

这个放在最上面。

1. vw+vh方案能实现同比缩放，但宽高拉长可能会很引起样式的极端丑陋;有些分区较多的页面，会出现样式bug：
   如iphoneX 和iPhone5 同比缩放效果炸裂。

2. 建议使用：flex+px
   px(或者基于固定px的rem)能够确保区域的样式固定;
   弹性盒让不一样宽高的环境下，页面的分区布局获得样式保证；

3. 若是时间很是充裕： 媒体查询+多套样式
   若是时间足够宽裕且本身想锻炼下生疏已久的布局和css能力，那就开始自虐吧。

页面转场效果

产品、UI：各类花里胡哨的特效往上怼才能显示出咱们的专业。
前端：大家的心情我理解，可是这个'页面进场空中转体360并模拟赛亚人变身特效'是几个意思？

固然，通常来说不多有这么变态的需求，大可能是实现渐入渐出或者页面滑出的效果。
针对这种页面的专场需求，咱们既能够用css3的过渡或者动画本身去玩，也能够引用很是好用的开源库来实现，这里推荐使用如下种方式：

1. swiper : 一款使用量特别大的、开源的、实现滑动、触摸等功能的插件，重点是有详细的官方中文文档和demo案例，方便大复制粘贴，文档地址：swiper
2. fullpage.js + Animate.css : 做者亲测，作活动页的最佳利器，用过就知道了…

分享功能

若是你的活动页基于webApp或者web-native-app的话,常规来讲,app/m站会给你提供分享功能的api。

强登录功能

h5的活动页多数面向于登录用户(由于页面可能会展现用户的有关数据),所以在咱们的活动页脚本的开头，咱们就应该作出判断。

//基于某api或接口数据判断得出isLogin
if(!isLogin){
//重定向至登陆页
}else{
//进入咱们的loading或者动画进场;
}

动画特效

除开上面提到的Animate.css，多数状况下，咱们本身基于css3去实现就能够了。css3提供了很强大的动画功能，上手比较容易。

先后端联调

必定要把设计稿中的须要的数据弄明白，这点主要是后端的工做。
最要注意的是，不一样环境下请求接口是否兼容（app/浏览器/微信/钉钉……），毕竟咱们写的是h5，鬼知道用户用什么打开的咧。

前端开发流程

1. 强登录逻辑
2. 数据请求||数据mork
3. 搭好页面转场架子
4. 开发对应页面
5. 增长各类功能

写在最后面的必杀技

　　对于静态的页面以及内容，能够直接整个页面切图；若是有绑定事件的话，能够写透明盒子cover。

全文手打 散场丶丶