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的体验更好，您可以选择以下两种方式之一 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活动的任务，这个才是需要挑战的。
技术是一种手段，是为了增加那些事情工作效率的，总的来说是为别人服务，脱离的服务，它的存在也就没有价值了不是吗。