H5活動頁開發有關

活動頁開發流程

針對各類節日各類活動,臨時定稿開發的活動頁,每每時間安排都比較急 ————

  1. 產品定下需求方向
  2. UI實現設計稿
    1. 草圖和交互邏輯定稿=>多少個頁面,每一個頁面表達的含義以及和用戶的交互邏輯;
    2. 具體到每一個頁面的UI設計稿;
    3. 動效腳本稿;
  3. 基於2.1和2.2 => 先後端定義接口字段;
  4. 前端瘋狂敲代碼
  5. 後端瘋狂敲代碼
  6. 階段開發完成,測試
  7. 提bug,加新需求(設計稿和原需求的某些弊端在前端實現後會一一暴露出來,所以作改進)
  8. 重複5——7,直到上線。css

    前端技術選型

毫無疑問,既然是H5活動頁,固然要基於html5+css3+js;通常而言,對於活動頁來說,必然要具有如下功能:html

頁面兼容

這個放在最上面。前端

  1. vw+vh方案能實現同比縮放,但寬高拉長可能會很引起樣式的極端醜陋;有些分區較多的頁面,會出現樣式bug:
    如iphoneX 和iPhone5 同比縮放效果炸裂。html5

  2. 建議使用:flex+px
    px(或者基於固定px的rem)能夠確保區域的樣式固定;
    彈性盒讓不一樣寬高的環境下,頁面的分區佈局獲得樣式保證;css3

  3. 若是時間很是充裕: 媒體查詢+多套樣式
    若是時間足夠寬裕且本身想鍛鍊下生疏已久的佈局和css能力,那就開始自虐吧。web

頁面轉場效果

產品、UI:各類花裏胡哨的特效往上懟才能顯示出咱們的專業。
前端:大家的心情我理解,可是這個'頁面進場空中轉體360並模擬賽亞人變身特效'是幾個意思?後端

固然,通常來說不多有這麼變態的需求,大可能是實現漸入漸出或者頁面滑出的效果。
針對這種頁面的專場需求,咱們既能夠用css3的過渡或者動畫本身去玩,也能夠引用很是好用的開源庫來實現,這裏推薦使用如下種方式:api

  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。

全文手打 散場丶丶

相關文章
相關標籤/搜索