活动页开发流程

针对各种节日各种活动,临时定稿开发的活动页,往往时间安排都比较急 ————

  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。

全文手打 散场丶丶

H5活动页开发有关的更多相关文章

  1. h5活动页开发总结记录

    前几天在做h5活动页面的时候,有这样一个需求 上面的活动排行点击查看历史排行数据,弹出日期选择框,如下图 点击要查看的日期排行数据,这里需要对还没到的日期做处理,让用户不能选择,只可选择今天或者之前的 ...

  2. 微信硬件H5面板开发(一) ---- 调用openApi

    微信硬件平台是微信推出连接物与人,物与物的IOT解决方案.也就是说可以通过微信控制各种智能设备.比如一些蓝牙设备.空调.电视等等. 我本身不懂硬件(虽然是电子信息专业),硬件是北航的两个研究生在弄,小 ...

  3. h5直播开发之旅总结

    前言 关于直播,有很多相关技术文章,这里不多说. 作为前端,我们比较关心我们所需要的. 直播的大致流程: APP端调用摄像头 -> 拍摄视频 -> 实时上传视频 -> 服务器端获取视 ...

  4. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...

  5. 今天我看了一个H5游戏EUI的例子,我都快分不清我到底是在用什么语言编译了代码了,作为刚刚学习H5游戏开发的菜鸟只能默默的收集知识

    今天看了一个EUI的demo,也是接触H5游戏开发的第五天了,我想看看我能不能做点什么出来,哎,自己写果然还是有问题的.在看EUI哪一个demo的时候就遇见了一些摇摆不定的问题,我觉得提出来 1.to ...

  6. 最近这两天看了关于H5游戏开发的一个教程,实践很短暂,看了很多理论的东西,现在呢也只是想回忆回忆关于EUI的部分知识吧

    首先我了解了什么是Egret: Egret中文就是白鹭的意思,Egret是一套H5游戏开发的软件.(纯粹属于个人理解) 其次我对以下几款软件的相关知识做了些了解: Egret Engine(引擎),E ...

  7. H5混合开发问题总结

    1.This application is modifying the autolayout engine from a background thread, which can lead to en ...

  8. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  9. 能挣钱的微信JSSDK+H5混合开发

    H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在 ...

随机推荐

  1. JDK、JRE、JVM三者间的联系与区别

    有Java编程经验的程序员应该都知道:Java程序是运行在JVM(Java虚拟机)上的,在开发程序之前都要配置Java开发环境,其中首先要做的就是JDK的安装和配置,那么JDK.JVM.JRE到底有何 ...

  2. 配置中心框架IConfCenter

    本篇和大家分享的是一个简易配置中心框架IConfCenter,框架是利用空余时间写的,主要以配置文件+redis存储方式作为数据同步驱动,目前支持的配置文件格式有 .properties 和 .con ...

  3. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二七║ Nuxt 基础:框架初探

    缘起 哈喽大家好,又是周四了,俗话说周四来了,周末还远么哈哈,老张我也想下周请假,来个16天的大长假哟,不知道大家是怎么请假的,近来发现文章下边已经没有人评论了,赶脚比较凄凉了,大家看到的麻烦点个赞呀 ...

  4. Identity Server 4 - Hybrid Flow - Claims

    前一篇 Identity Server 4 - Hybrid Flow - MVC客户端身份验证: https://www.cnblogs.com/cgzl/p/9253667.html Claims ...

  5. 以写作为例说下IT人如何培养挣钱DNA

    洛克菲勒说:“如果把我剥得一文不名丢在沙漠的中央,只要一行驼队经过——我就可以重建整个王朝.”这话反过来可以这样说,方法不对路,也不肯干的人,哪怕给一笔财富(比如人生小目标一个亿),最好的结果是跑赢C ...

  6. qt捕获全局windows消息

    qt  如何捕获全屏的鼠标事件,这个帖子上面主要讲述了下嵌入式qt怎么抓取系统级消息,不过从这篇文章中我也看到了希望,有个回复说winEventFilter支持这种方式,然后我就顺着这个线索找到了na ...

  7. GraphQL学习过程应该是这样的

    记录一个从枯燥学习 GraphQL 的过程,到发现项目 Gitter,模仿项目 Github-Trending-API,最后做一个自己的学习项目 Github-Trending-GraphQL. 一开 ...

  8. Asp.net MVC 中 CodeFirst 开发模式实例

    昨天写的这篇博客因为下班时间到了忘记保存了,好郁闷,得重新写一遍.实习所在公司使用的是CodeFirst开发模式,最近开始参与到公司的项目里面来了,发现这个模式特别好用,建库建表改变字段属性添加删除字 ...

  9. C#实现注册表 LocalMachine 目录下CURD工具类

    [1]注册表是什么?         百度百科 https://baike.baidu.com/item/%E6%B3%A8%E5%86%8C%E8%A1%A8/101856?fr=aladdin [ ...

  10. 利用StackExchange.Redis和Log4Net构建日志队列

    简介:本文是一个简单的demo用于展示利用StackExchange.Redis和Log4Net构建日志队列,为高并发日志处理提供一些思路. 0.先下载安装Redis服务,然后再服务列表里启动服务(R ...