项目地址：https://github.com/panteng/wechat-h5-boilerplate

做一条能在朋友圈刷屏的「全屏滚动」H5，传统方式最快也要折腾一天。
今天安利一个开源项目——Wechat-H5-Boilerplate（WHB）。作者把它做成了“像写 PPT 一样写 H5”的脚手架：一行属性就能让文字滑进来，一句命令就能打包发布，所有坑位都给微信优化好了。

1. 它到底能省多少事？

2. 30 秒跑起来

# 1. 拉代码
git clone --depth=1 https://github.com/panteng/wechat-h5-boilerplate.git my-h5
cd my-h5

# 2. 装依赖（国内可用淘宝镜像）
npm install --registry=https://registry.npm.taobao.org

# 3. 开发
gulp dev      # 浏览器自动打开 http://localhost:3000

随后只要改 app/src 里的任意文件，浏览器+手机都会实时热更新。

3. 目录一眼看懂

app
├── src                 # ← 你就改这里
│   ├── images/         # 扔进 PNG/JPG，自动压缩
│   ├── javascripts/    # main.js 已帮你引入 jQuery & Swiper
│   ├── scss/           # 变量、rem 适配都写好了
│   └── index.html      # 一页一个 <div class="swiper-slide">
└── dist/               # gulp 生成的发布包，直接扔 CDN

4. 像写 PPT 一样做动效

<!-- 第 1 页 -->
<div class="swiper-slide">
  <h1 class="animated"
      data-ani-name="fadeInUp"
      data-ani-duration="0.8s"
      data-ani-delay="0.3s">标题飞入</h1>
  <img class="animated"
       data-ani-name="zoomIn"
       src="images/logo.png">
</div>

<!-- 第 2 页 … -->

所有动画名字直接用 Animate.css 官网 现成的即可。

5. 上线只要两步

gulp prod        # 生成压缩后的 bundle.min.css / bundle.min.js

把 app/dist 整个文件夹丢到服务器或腾讯 COS，得到链接后直接扔公众号菜单/朋友圈即可。

6. 微信专属优化细节

• o 自动播放音频 处理过 WeixinJSBridge 事件
• o 图片懒加载 + 压缩 节省流量
• o 1rem 三档响应式（16/22/32 px）适配 iPhone 4 ~ iPad
• o 禁止微信下拉露黑边 已内置
• o iOS 橡皮筋回弹 已处理

7. 老司机加餐技巧

• o Loading 动画
  把生成的 loading.svg 直接替换 app/src/images/loading.svg，gulp 会自动压缩。
• o 自定义字体图标
  用 icomoon.io 选图标 → 生成字体 → 覆盖 fonts/。
• o 真机同步测试
  gulp dev 启动后，控制台会出现 External: http://192.168.x.x:3000，手机连同一 WiFi 打开即可，滑动/点击多端实时同步。
• o 雪碧图
  小图标先用 CSS Sprite Generator 合并，再放进 images/，gulp 会一起优化。

结语

如果你下一次被老板/客户催着「明天上线一条 H5」，别再从零搭轮子。
把 WHB 模板 clone 下来，像做 PPT 一样堆页面、加动画，10 分钟就能交差。