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。

全文手打 散場丶丶