前言
這是一套我自己經常用的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的體驗更好，您可以選擇以下兩種方式之一
1、安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2、修改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活動的任務，這個纔是需要挑戰的。
技術是一種手段，是爲了增加那些事情工作效率的，總的來說是爲別人服務，脫離的服務，它的存在也就沒有價值了不是嗎。