H5活动页开发有关

产品定下需求方向

UI实现设计稿

草图和交互逻辑定稿=>多少个页面,每个页面表达的含义以及和用户的交互逻辑;

具体到每个页面的UI设计稿;

动效脚本稿;

基于2.1和2.2 => 前后端定义接口字段;

前端疯狂敲代码

后端疯狂敲代码

阶段开发完成,测试

提bug,加新需求(设计稿和原需求的某些弊端在前端实现后会一一暴露出来,因此做改进)

重复5——7,直到上线。

前端技术选型

毫无疑问,既然是H5活动页,当然要基于html5+css3+js;一般而言,对于活动页来讲,必然要具备以下功能:

页面兼容

这个放在最上面。

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

建议使用:flex+px
px(或者基于固定px的rem)可以确保区域的样式固定;
弹性盒让不同宽高的环境下,页面的分区布局得到样式保证;

如果时间非常充裕: 媒体查询+多套样式
如果时间足够宽裕且自己想锻炼下生疏已久的布局和css能力,那就开始自虐吧。

页面转场效果

产品、UI:各种花里胡哨的特效往上怼才能显示出我们的专业。
前端:你们的心情我理解,但是这个'页面进场空中转体360并模拟赛亚人变身特效'是几个意思?

当然,一般来讲很少有这么变态的需求,大多是实现渐入渐出或者页面滑出的效果。
针对这种页面的专场需求,我们既可以用css3的过渡或者动画自己去玩,也可以引用非常好用的开源库来实现,这里推荐使用以下种方式:

swiper : 一款使用量特别大的、开源的、实现滑动、触摸等功能的插件,重点是有详细的官方中文文档和demo案例,方便大复制粘贴,文档地址:swiper

fullpage.js + Animate.css : 作者亲测,做活动页的最佳利器,用过就知道了…

分享功能

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

强登陆功能

h5的活动页多数面向于登陆用户(因为页面可能会展示用户的有关数据),因此在我们的活动页脚本的开头,我们就应该做出判断。

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

除开上面提到的Animate.css,多数情况下,我们自己基于css3去实现就可以了。css3提供了很强大的动画功能,上手比较容易。

前后端联调

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

前端开发流程

强登陆逻辑

数据请求||数据mork

搭好页面转场架子

开发对应页面

增加各种功能

写在最后面的必杀技

  对于静态的页面以及内容,可以直接整个页面切图;如果有绑定事件的话,可以写透明盒子cover。

全文手打 散场丶丶

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpdzjd.html