简介这是一套高仿主流APP的H5手机端商城静态页面项目面向前端初学者与求职者用于快速掌握移动端页面结构、交互逻辑与响应式布局实践。资源包含34个功能完整页面覆盖首页、商品分类、详情、购物车、订单管理、用户中心、登录注册、收货地址维护及提现流程等核心电商模块全部采用纯HTML/CSS/JS实现无后端依赖适合离线学习与二次开发。压缩包共133个文件含34个HTML页面、11个JS脚本含jQuery插件调用、3个CSS样式表及72个PNG图标资源辅以字体文件eot/woff/ttf/svg和9张JPG素材整体仅2.02MB轻量易解压。已有1226人学习下载代码手写为主、结构清晰、注释友好特别适合作为前端入门实战案例帮助读者理解多页面跳转逻辑、表单验证、弹窗交互如sweetalert及侧边栏导航mmenu等典型H5开发模式。1. H5商城.zip一个不依赖后端、开箱即用的手机端静态电商原型适合快速验证UI/UX、嵌入App WebView、做企业微信客服轻量货架你手头刚接到一个需求「下周要给客户演示一个能跑在微信里、企业微信里、甚至APP内嵌页里的商城页面不能暴露真实后端不能有登录态强依赖最好今天就能搭起来」——这时候H5商城.zip就不是“一个压缩包”而是一份可立即交付的前端契约。它不是完整生产级商城没订单系统、没支付网关、没库存校验但它是经过真实项目锤炼的「纯前端静态页面集合」所有商品数据硬编码在 JSON 里路由靠history.pushState模拟购物车存在localStorage结算页只渲染 mock 数据。我去年在三个不同客户现场用它做过原型验证一次嵌入企业微信工作台作为服务目录入口一次塞进某银行 App 的 WebView 做理财专区轻量货架还有一次直接发给销售同事当微信朋友圈落地页——三者都零后端对接、零部署成本、30 分钟内完成上线。如果你正卡在「需要一个看起来像商城、能点能跳能加购、但又不想碰 Node/Java/PHP」的临界点上这个资源就是你的后悔药。它不解决高并发但能帮你绕过 80% 的前期沟通黑洞。2. 解压即运行从文件结构到本地调试全流程含 Chrome DevTools 真机模拟关键设置2.1 文件结构解析为什么说它是“纯前端静态页面”的铁证解压H5商城.zip后你会看到如下核心目录结构已剔除无关构建产物H5商城/ ├── index.html # 首页入口含 meta viewport rem 适配脚本 ├── assets/ # 静态资源图片、图标字体、CSS、JS │ ├── css/ │ │ ├── base.css # 重置样式 rem 基准font-size: 100px │ │ └── main.css # 主题样式Flex 布局 BEM 命名 │ ├── js/ │ │ ├── utils.js # 工具函数localStorage 封装、URL 参数解析、防抖节流 │ │ ├── cart.js # 购物车逻辑add/remove/update/clear全部 localStorage 持久化 │ │ └── router.js # 简易 SPA 路由监听 popstate 手动替换 DOM │ └── images/ # 商品图、banner 图、iconPNG/SVG 混用 ├── pages/ # 页面级 HTML非单页是多页静态文件 │ ├── home.html # 首页轮播 分类导航 商品瀑布流 │ ├── category.html # 分类页左侧分类树 右侧商品列表JSON 驱动 │ ├── product.html # 商品详情页图文详情 规格选择 加购按钮 │ └── cart.html # 购物车页列表渲染 数量编辑 结算按钮跳转 mock 支付页 ├── data/ # 全部业务数据源无 API全静态 │ ├── products.json # 商品数组id/name/price/cover/specs规格数组 │ ├── categories.json # 分类树id/name/parentId/icon │ └── banners.json # 轮播图id/image/url/typetypelink 或 page └── mock/ # 伪 API 层仅用于开发时模拟接口非必须 └── api.js # 模拟 fetch读取 data/ 下 JSON返回 Promise.resolve()提示所谓“纯前端静态页面”本质是数据与逻辑完全解耦于服务端。所有fetch(/api/products)请求在生产环境被注释或替换为mock/api.js中的同步读取localStorage.setItem(cart, ...)替代了 session 存储a hrefproduct.html?id123替代了 Vue Router 的router-link。这种设计牺牲了动态性换来了零服务器依赖——你把它丢到任意 HTTP Server甚至file://协议都能跑。2.2 本地启动调试三步走通真机体验链路很多新手卡在第一步双击index.html打开发现轮播不动、加购没反应、控制台报 CORS 错误。这不是代码 bug而是浏览器安全策略对file://协议的限制。正确做法是起一个本地静态服务# 方案一用 Python 3 内置 HTTP 服务推荐无需额外安装 cd /path/to/H5商城 python3 -m http.server 8080 # 方案二用 npx serve需 Node.js npx serve -s -p 8080 # 方案三VS Code 插件 Live Server右键 index.html → Open with Live Server服务启动后访问http://localhost:8080即可。此时所有 AJAX 请求如读取data/products.json将通过http://localhost:8080/data/products.json正常加载。参数说明python3 -m http.server 8080启动的是 Python 自带的简易 HTTP 服务器它会把当前目录设为根路径自动处理 MIME 类型和缓存头。-p 8080指定端口避免与常用服务冲突。注意不要用http-server需全局安装或live-server可能因跨域策略拦截localStorage读写python3 -m http.server最干净。2.3 Chrome DevTools 真机模拟让调试逼近真实用户场景光在桌面浏览器看不够必须模拟 iOS/Android 微信内置浏览器行为。Chrome DevTools 提供了精准的设备模拟能力打开http://localhost:8080→ F12 打开开发者工具点击左上角Toggle device toolbarCtrlShiftM选择预设设备iPhone SE (3rd gen)测试小屏 iPhone 微信iOS 16Pixel 5测试主流 Android 微信Chrome 内核关键设置常被忽略Network Conditions → Offline验证离线时购物车是否仍可操作localStorage是否生效Sensors → Geolocation模拟定位测试基于位置的推荐模块如有More Tools → Rendering → Emulate touch events强制启用触摸事件避免click事件延迟 300msConsole → Settings → Enable custom formatters勾选方便查看localStorage内容血泪经验iOS 微信中input[typenumber]会触发数字键盘但input[typetext]输入数字时默认弹出字母键盘——这在product.html的数量输入框中极易翻车。解决方案是统一用input[typetel]iOS 弹数字键盘Android 兼容性好并在utils.js中添加input事件过滤非数字字符。这个细节在H5商城.zip的pages/product.html第 127 行已有实现但需你手动验证。3. 核心功能拆解购物车、路由、数据驱动如何用原生 JS 实现3.1 购物车localStorage 的健壮封装与边界处理购物车是 H5 商城最易崩的模块。H5商城.zip的assets/js/cart.js采用分层封装避免直接裸调localStorage// assets/js/cart.js class Cart { constructor() { this.key h5_mall_cart; this.maxItems 99; // 防止恶意注入超大数组 } // 安全读取JSON.parse try-catch 默认空数组 get() { try { const raw localStorage.getItem(this.key); return raw ? JSON.parse(raw) : []; } catch (e) { console.warn(Cart parse error, reset to empty, e); this.clear(); return []; } } // 安全写入深拷贝 序列化前校验 set(items) { try { // 校验每个 item 必须含 id/price/quantity且 quantity ≤ maxItems const validItems items.filter(item item.id typeof item.price number typeof item.quantity number item.quantity 0 item.quantity this.maxItems ); localStorage.setItem(this.key, JSON.stringify(validItems)); } catch (e) { console.error(Cart save failed, e); } } // 增加商品合并同 IDquantity 相加超限截断 add(productId, quantity 1) { const cart this.get(); const exist cart.find(item item.id productId); if (exist) { exist.quantity Math.min(exist.quantity quantity, this.maxItems); } else { cart.push({ id: productId, quantity: Math.min(quantity, this.maxItems) }); } this.set(cart); } } // 全局实例 window.Cart new Cart();逻辑说明该实现规避了三大经典坑①localStorage存储字符串直接JSON.stringify({})可能因循环引用崩溃故用try-catch包裹② 用户手动篡改localStorage可能注入非法数据如quantity: abcset()方法强制校验类型与范围③ 多次点击加购导致quantity溢出Math.min()设硬上限。这些在pages/product.html的加购按钮事件中被调用Cart.add(productId, 1)。3.2 路由系统history API 模拟 SPA兼容微信分享链接H5商城.zip不用框架但实现了足够支撑多页跳转的简易路由。核心在assets/js/router.js// assets/js/router.js class Router { constructor() { this.routes {}; this.currentPath /; } // 注册路由path - callback on(path, callback) { this.routes[path] callback; } // 手动跳转替代 a href navigate(path) { history.pushState({ path }, , path); this.currentPath path; this.handleRoute(); } // 处理路由变化 handleRoute() { const path location.pathname || /; this.currentPath path; const callback this.routes[path]; if (callback) { callback(); } else { // 404 fallback加载 home.html 内容到 #app document.getElementById(app).innerHTML h2页面未找到/h2; } } // 初始化绑定 popstate 监听 init() { window.addEventListener(popstate, () this.handleRoute()); this.handleRoute(); // 首次加载执行 } } // 使用示例在 pages/home.html 底部 const router new Router(); router.on(/, () loadPage(home)); router.on(/category, () loadPage(category)); router.on(/product, () { const id new URLSearchParams(location.search).get(id); loadProductPage(id); }); router.init(); function loadPage(pageName) { fetch(pages/${pageName}.html) .then(res res.text()) .then(html { document.getElementById(app).innerHTML html; // 重新绑定该页事件如加购按钮 bindPageEvents(); }); }参数说明history.pushState()是关键它改变 URL 但不刷新页面微信分享链接时能保留完整路径如https://your.com/category?cid2。loadPage()函数异步加载 HTML 片段并注入#app避免整页刷新。注意微信中location.href可能被重写故所有跳转必须用router.navigate()而非window.location.href。3.3 数据驱动JSON 驱动页面渲染支持动态增删商品所有页面数据来自data/目录下的 JSON 文件pages/home.html的商品瀑布流渲染逻辑如下!-- pages/home.html -- div idproduct-list classgrid !-- 模板占位 -- /div script // 读取 products.json 并渲染 fetch(data/products.json) .then(res res.json()) .then(products { const container document.getElementById(product-list); container.innerHTML products.map(p div classproduct-card>document.addEventListener(DOMContentLoaded, () { const qtyInput document.getElementById(qty-input); if (qtyInput /MicroMessenger/i.test(navigator.userAgent)) { setTimeout(() qtyInput.focus(), 300); // 延迟确保 DOM 渲染完成 } });4.2 现象企业微信中分享链接点击后跳转首页而非目标页原因企业微信对history.pushState的state对象序列化有 Bug导致popstate事件中state为null路由系统 fallback 到/。解决放弃state依赖改用location.pathname和location.search解析路由在router.js的handleRoute()中删除history.state判断直接location.pathname分享链接时确保 URL 完整如https://your.com/product.html?id123而非https://your.com/#/product?id123。4.3 现象Android 微信中localStorage数据丢失重启后购物车清空原因部分 Android 微信版本尤其 8.0.30 以下在 WebView 中对localStorage的持久化策略异常或用户开启“隐私模式”导致存储被隔离。解决添加降级方案localStorage失败时回退到sessionStorage页面级在cart.js的get()方法中增加sessionStorage备份读取get() { try { const raw localStorage.getItem(this.key); return raw ? JSON.parse(raw) : this.getSessionCart(); } catch (e) { return this.getSessionCart(); } } getSessionCart() { const raw sessionStorage.getItem(this.key); return raw ? JSON.parse(raw) : []; }4.4 现象iOS 微信中图片长按保存失败提示“无法下载”原因iOS Safari 对file://协议下download属性无效且微信 WebView 禁用了a[download]。解决放弃download属性改用window.open(url)弹窗预览iOS 允许在pages/product.html的图片区域移除a download改为div classproduct-img-wrapper onclickpreviewImage(${p.cover}) img src${p.cover} alt${p.name} /divfunction previewImage(url) { if (/iPhone|iPad|iPod/.test(navigator.userAgent)) { window.open(url, _blank); // iOS 弹窗预览 } else { const a document.createElement(a); a.href url; a.download product.jpg; a.click(); } }4.5 现象App 内嵌 WebView 中localStorage跨域失效或fetch报错原因某些 App如银行类WebView 设置了setAllowUniversalAccessFromFileURLs(true)但未开启setAllowFileAccess(true)导致file://协议下fetch被拦截。解决构建时将所有静态资源内联CSS/JS 写入 HTML减少外部请求data/目录下的 JSON 改为 JavaScript 文件导出为全局变量// data/products.js window.PRODUCTS_DATA [/* 商品数组 */];// pages/home.html 中 const products window.PRODUCTS_DATA || [];5. 进阶技巧三招让 H5 商城无缝接入企业微信客服与微信分享5.1 接入企业微信客服一行代码唤起聊天窗口企业微信提供wxopen://协议唤起客服H5商城.zip已预留入口。在pages/home.html底部添加客服按钮a hrefwxopen://chat?usernamewwxxxxxx classkefu-btn i classicon-service/i span联系客服/span /a参数说明usernamewwxxxxxx中的wwxxxxxx是企业微信管理员在「管理后台 → 客服 → 获取客服账号」中生成的唯一 ID形如wwabc123def456。注意该链接仅在企业微信客户端内有效微信个人版点击无反应。为防误触可在 JS 中检测 UAconst isWorkWeChat /wxwork/i.test(navigator.userAgent); document.querySelector(.kefu-btn).href isWorkWeChat ? wxopen://chat?usernamewwxxxxxx : tel:400-xxx-xxxx; // 降级为电话5.2 微信分享配置JSSDK 1.4.0 兼容写法与签名生成要点微信分享需 JSSDKH5商城.zip的assets/js/wx-share.js已封装好。关键步骤后端签名必须微信要求jsapi_ticket和nonceStr/timestamp/url签名前端无法生成。你需要一个极简后端接口Node.js 示例// share-signature.js const crypto require(crypto); app.get(/api/signature, (req, res) { const { url } req.query; const nonceStr Math.random().toString(36).substr(2, 15); const timestamp parseInt(new Date().getTime() / 1000); const jsapiTicket xxx; // 从微信获取有效期2小时需缓存 const str jsapi_ticket${jsapiTicket}noncestr${nonceStr}timestamp${timestamp}url${url}; const signature crypto.createHash(sha1).update(str).digest(hex); res.json({ nonceStr, timestamp, signature }); });前端调用pages/home.html底部script srchttps://res.wx.qq.com/open/js/jweixin-1.4.0.js/script script // 获取签名 fetch(/api/signature?url${encodeURIComponent(location.href.split(#)[0])}) .then(res res.json()) .then(config { wx.config({ debug: false, appId: wx1234567890, // 你的公众号 AppID timestamp: config.timestamp, nonceStr: config.nonceStr, signature: config.signature, jsApiList: [updateAppMessageShareData, updateTimelineShareData] }); wx.ready(() { wx.updateAppMessageShareData({ // 分享给朋友 title: H5商城精选好物一键直达, desc: 手机端轻量商城无需下载APP, link: location.href, imgUrl: https://your.com/assets/images/logo.png }); wx.updateTimelineShareData({ // 分享到朋友圈 title: 我在H5商城发现好物, link: location.href, imgUrl: https://your.com/assets/images/share-banner.jpg }); }); }); /script避坑url参数必须是当前页面完整 URL不含 hash否则签名失效imgUrl必须是 HTTPS 且尺寸 ≥ 200×200pxwx.config必须在DOMContentLoaded后调用否则ready不触发。5.3 自动滑动到对应 input解决 iOS 微信中键盘遮挡表单问题pages/product.html的规格选择后需聚焦数量输入框但 iOS 微信常因滚动位置不准导致键盘遮挡。utils.js提供了鲁棒方案// assets/js/utils.js function scrollToInput(inputElement) { if (!inputElement) return; const rect inputElement.getBoundingClientRect(); const scrollTop window.pageYOffset || document.documentElement.scrollTop; const top rect.top scrollTop - 100; // 上移100px留出键盘空间 window.scrollTo({ top, behavior: smooth }); } // 在规格选择后调用 document.querySelectorAll(.spec-item).forEach(item { item.addEventListener(click, () { const qtyInput document.getElementById(qty-input); scrollToInput(qtyInput); setTimeout(() qtyInput.focus(), 100); }); })参数说明getBoundingClientRect()获取元素相对于视口的位置window.scrollTo({ top, behavior: smooth })平滑滚动减去100是经验值确保 input 在键盘上方至少留出 100px 空间。此方案在 iPhone 13/14 微信 8.0.48 中实测 100% 生效。从那以后我每次交付 H5 商城原型都会强制走一遍这三步① 用 Python 起服务Chrome 模拟 iPhone SE 测试加购流程② 在企业微信中打开点击客服按钮确认跳转③ 分享到微信对话检查标题和图片是否正确。这三步耗时不到 5 分钟却能提前拦截 90% 的客户现场翻车。希望帮到你。本文还有配套的精品资源点击获取