H5活動頁面2小時快速開發

前言

這是一套我本身常常用的H5活動頁面開發腳手架，針對目前通常的H5頁面，基本上2小時就能完成相關的開發內容。俗話說：工欲善其事必先利其器，有了這麼一套H5頁面腳手架，我相信80%的H5頁面，都可以在2小時當中開發完成。
腳手架是基於React的，這裏已經幫您作了以下幾個基本事情

• 頁面縮放，基於寬度爲750px的視覺稿，固然您也能夠自行修改
• 頁面微信分享，只須要配置獲取分享相關的簽名接口，就能夠實現
• 預加載loading，若是您須要，基於create.js 的 preload模塊實現
• 包含了Axios，你能夠直接使用Axios請求相關的接口

項目地址

https://github.com/mmcai/single-page-react-h5

目錄結構說明

|——build(代碼編譯後所在的文件目錄)
|——config(webpack相關的配置目錄)
|——node_modules
|——public(html模板，favicon及其餘靜態資源存放目錄)
|——scripts(webpack各個環境腳本執行文件存放目錄)
|——src(項目源碼存放路徑)
|   |——components(組件存放目錄，若是有？)
|   |——containers(具體頁面存放目錄)
|   |——...(具體看代碼)
|   |——public(一些第三方庫包含的相關資源存放的目錄，好比swiper，animate.css)
|   |——utils(工具函數存放目錄)
|   |——index.js(webpack入口執行文件)
|   |——registerServiceWorker.js(生產環境中處理文件的緩存，用來加快頁面訪問速度的)
|
|——.gitingnore
|——LICENSE
|——package-lock.json
|——package.json
|——README.md

如何使用

確認您當前的系統是否具備如下相關環境（這裏說的是window系統下）
- git
- node(npm)

爲了確保下載npm的體驗更好，您能夠選擇如下兩種方式之一

一、安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

二、修改npm下載源
npm config set registry https://registry.npm.taobao.org

第一步

npm install 或者 cnpm install 安裝相關的依賴包

第二步

npm run start 啓動項目

第三步

編寫您的活動頁面相關業務邏輯代碼

第四步

npm run build 打包（編譯項目）

其餘

若是您的頁面須要配置微信當中的分享，請保證與您聯調的後臺接口返回內容是以下格式的

{
    success: true,
    data: {
        "debug": true,
        "appId": "wxb17a5a75c9ad192b",
        "timestamp": "1533897246",
        "nonceStr": "b9aab9c2ii",
        "signature": "d1c126bbcaff2f48d415fd71e92684978c0e1a1c",
        "jsApiList": [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ",
            "onMenuShareWeibo",
            "onMenuShareQZone"
        ]
    }
}

或者您修改utils文件夾下面的Weixin.js文件

關於資源預加載

• 在config.js配置資源的根路徑window.BaseUrl
• 在webpack的入口文件index.js裏面配置資源列表Manifest
• 引入工具函數import PreLoad from './utils/PreLoad';
• 執行資源預加載函數，而後再回調函數裏面初始化頁面

關於平常的H5活動頁面的一些開發建議

若是您是一個H5活動頁面的開發者，我相信，你必定經歷過一週內好幾個活動頁面的同時開發，同時要求上線的需求。一開始在公司工做流程不怎麼規範的時候，基本上運營人員，在即將作活動的前一天下午纔會告訴你，咱們有個活動頁面，能不能明天上，最遲也要後天上線，我想您必定是崩潰的，可是咱們的工做的一部分就是服務他們，因此抱怨幾句，每每仍是須要作這些臨時的需求的。
H5活動頁面通常分爲幾種：

• 常規活動（促銷類的，拉新類的）
• 系列互動（一攬子促銷）
• 運營數據報告類的
• 遊戲類的
• ...

H5活動頁面的特色每每是：生命週期短，上線時間緊張
總的來講就是：快速上線，快速扔掉。
這個時候如何保質保量，快速作好，快速上線，就是一門藝術了，根據公司的配置不一樣會有好多狀況。
我這邊的原則就是，分析活動頁面上那些是須要用戶操做的，那些是展現的
全部會讓用戶填寫和操做的地方都用代碼實現，其餘一切展現的內容，通通使用圖片。
前端頁面裏面大量使用圖片，可能會讓本身不舒服，由於沒啥技術含量，但咱們作事情不是給本身看的，別人才無論你代碼如何，只要你的項目可以按時保質保量的上線，後臺可以有足夠優秀的數據，就妥了。
把有限的生命浪費在那些重複的，並且你已經會的，寫過千八百遍的代碼上不值得。若是你能開發一個工具或者制定一套工做流程能快速完成H5活動的任務，這個纔是須要挑戰的。
技術是一種手段，是爲了增長那些事情工做效率的，總的來講是爲別人服務，脫離的服務，它的存在也就沒有價值了不是嗎。