雅共店铺电商 H5 模板 | 8 页 APP 内嵌商城前端，批发分销组件开箱即用

基于 jQuery + lazyload 打造的 APP 内嵌店铺电商 H5 模板。开箱即用，替换品牌素材即可上线。

把电商 H5 嵌进 APP，最耗时的不是某个页面，而是链路：首页楼层、店铺页、商品列表、批发价格、订单、评价、分享分销——每一环都要单独设计开发。外包团队接此类项目，往往在页面还原与交互细节上反复消耗工期。

这套模板源自真实 APP 前端外包项目，把「雅共」店铺电商的完整移动链路一次交付：8 个页面覆盖从逛、选、买到评的全流程，并内置批发阶梯价、佣金展示、一键分销等分销电商特色组件。页面均为纯静态 HTML，对接后端接口即可投入生产。

模板亮点

1. 8 个页面，覆盖店铺电商全链路

APP 首页、店铺首页、店铺公司简介、全部商品、商品详情、我的订单、评价、有图评价——逛 / 选 / 买 / 评四步俱全，页面间已互相跳转链接，无需重排信息架构。

2. 分销电商特色组件

• 阶梯批发价：详情页「1 件起批 / 2-30 件 / 30 件以上」三档价格表，批发场景刚需
• 佣金体系展示：商品卡与详情页均展示「佣金 / 利润」字段，铺货分销模式一目了然
• 一键分销分享弹层：微信 / QQ 空间 / 新浪微博等渠道一键分享，配套 reveal 弹层交互
• 店铺信任体系：供货商等级、证件照片、店铺年限、店铺四维评分（商品 / 服务 / 物流）

3. 瀑布流 + 懒加载，长列表性能方案现成

首页楼层与商品列表基于 Masonry 瀑布流布局，全站图片使用 jquery.lazyload 懒加载——图片进入视口才请求，长页面首屏速度有保障，直接沿用即可。

4. 电商细节交互完整

• 触屏焦点图自动轮播（TouchSlide）、金刚区入口、底部五栏导航
• 评价页：好评率统计、印象标签热度（价格实惠 666 / 补水效果好 369…）、脱敏昵称列表
• 订单页：订单状态、卖家信息、查看物流 / 评价入口、下拉刷新反馈
• 详情页：颜色尺码选择弹层、layer loading 弹层、到底部提示

5. 移动端 H5 适配成熟

viewport 禁缩放、rem 级流式布局、橙黑电商配色，适配 APP 内嵌 WebView 与微信、手机浏览器等多种容器；单屏交互均按拇指热区设计。

技术栈

技术	版本	用途
jQuery	1.7.1	DOM 操作 / 事件
TouchSlide	1.1	触屏焦点图 / Tab 切换
jquery.lazyload	—	图片懒加载
Masonry	3.3.1	商品瀑布流布局
jquery.reveal	—	详情页选择 / 分享弹层
layer mobile	1.7	loading 弹层反馈
normalize.css	—	样式归一

项目结构

ygh5/
├── index.html            # APP 首页（轮播/金刚区/楼层瀑布流/底部导航）
├── 店铺首页.html          # 店铺首页（店铺信息 + 新品推荐，含佣金）
├── 店铺公司简介.html      # 公司简介（等级/证件/年限 + 店铺内页导航）
├── 全部商品.html          # 店铺全部商品（排序 + 瀑布流 + 佣金）
├── 雅共客户端详情页.html   # 商品详情（阶梯批发价/SKU弹层/一键分销）
├── 我的订单.html          # 订单详情（状态/卖家信息/物流评价入口）
├── 评价.html             # 商品评价（好评率/印象标签/评价列表）
├── 有图评价.html          # 有图评价（带图评价列表）
├── css/
│   ├── style.css         # 全站主样式（主题色在此修改）
│   └── normalize.css     # 样式归一
├── js/                   # jQuery / TouchSlide / lazyload / Masonry 等
├── layer/                # layer mobile 弹层组件
└── img/                  # 界面素材（图标/商品图/评分组件等）

快速开始

纯静态模板，无需构建：

# 方式一：浏览器直接打开
双击 index.html 即可预览（部分浏览器建议走本地服务器）

# 方式二：本地静态服务器（推荐）
cd ygh5
python3 -m http.server 8000
# 手机或浏览器访问 http://localhost:8000/index.html

也可使用 VS Code 的 Live Server 插件一键预览。建议切换到手机视口查看瀑布流与弹层交互。

二次开发指南

需求	操作
更换品牌	同名替换 img/ 下的 banner.png、logo、图标与商品图
修改文案 / 链接	各 HTML 内中文文案与 href 直接修改，页面互链已建好
修改主题色	修改 css/style.css 中的 #ed6d1f / #ea5520（橙色系）
对接后端接口	商品列表 / 详情 / 评价均为静态结构，按节点替换为接口渲染即可
增删页面	复制任一页面为模板，改标题与内容即可，样式全站复用

适用场景

APP 内嵌电商 H5、批发分销商城移动端、供货商铺货平台、店铺级电商前端外包、微商城 WAP 版，也可作为分销 / 佣金类电商产品原型快速验证。

从零自研 vs 使用本模板

维度	从零自研	使用本模板
交付周期	3~4 周起	1~2 天替换素材上线
页面还原度	逐页设计返工	8 页电商链路成品直接用
交互与动画	逐个开发	瀑布流/懒加载/弹层已内置
移动端适配	多容器调试	WebView / 微信已验证
维护成本	自行承担	纯静态结构，改图即迭代

在线预览

模板为纯静态页面，将整个目录上传至任意静态托管（Nginx / 阿里云 OSS / 腾讯云 COS / GitHub Pages）即可在线访问，入口为 index.html。

http://case.fedshare.cn/ygh5/