移动Web实战：美团外卖H5源码拆解，从Flexbox到jQuery交互

简介：美团外卖风格的移动端网页案例课，面向希望掌握HTML、CSS与jQuery综合运用的前端初学者。课程以真实外卖应用界面为原型，演示移动端页面结构、响应式布局与常用交互的开发思路。资源包为zip格式，共86个文件，以16个CSS样式、10个JavaScript脚本、4个HTML页面和29张PNG图片素材为主，整体压缩包仅213KB，便于快速下载与本地练习。内容覆盖头部导航、搜索栏、分类菜单、商品展示等模块，并结合Flexbox、媒体查询实现多屏适配；jQuery部分涉及DOM操作、触摸事件、动态加载与上拉刷新等移动端高频场景。配套源码目录清晰，包含外卖首页、菜单、订单、个人中心等页面及公共样式脚本，可对照学习项目组织方式。目前已有79人学习下载，适合前端入门阶段做移动端网页实战参考。

1. 美团外卖移动Web案例课：一套能直接跑的HTML+CSS+jQuery源码

做移动端前端的人，应该都动过模仿美团外卖的念头——搜索栏、分类导航、商家列表、购物车联动，这些模块几乎覆盖了移动Web页面会用到的全部基本功。这套【jq+css+html】移动web案例课美团外卖，就是把美团外卖的Web端界面拆成了一整套能本地直接打开的源码包，技术栈相当朴素：HTML负责骨架、CSS负责布局和适配、jQuery负责交互。它适合两类人：一类是刚学完HTML和CSS基础、想找个完整项目练手的前端新手；另一类是在公司里要快速搭一个移动端H5原型、又不想上重框架的开发者。源码拿过来改改就能复用，这一点在实际工作中非常值钱。

2. 拆解源码目录：先搞懂一个移动端页面项目的标准结构

2.1 从文件夹布局看懂开发者的组织习惯

拿到源码后第一件事不是双击index.html，而是先把目录结构过一遍。这套项目的根目录结构大致是这样的：

├── source │ ├── lib/ # 第三方库，jQuery放这里 │ ├── common/ # 公共样式与公共脚本 │ ├── index.html # 首页：搜索、轮播、分类、商家列表 │ ├── menu.html # 菜单页：商品列表与购物车 │ ├── order.html # 订单页 │ ├── my.html # 个人中心页 │ ├── config.json # 本地模拟数据 │ └── .DS_Store # macOS系统文件，无实际作用

这套结构很典型：页面文件放根目录，公共资源按类型分目录，第三方库单独隔离。和现在动辄src平铺、靠构建工具管依赖的方式相比，它少了一层构建环节，但好处也直观——直接用浏览器打开就能运行，不需要先跑npm install。页面数量少的项目用这种结构效率反而高。

2.2 每个文件的实际职责

先看index.html，这是整套案例的门面。它内部由三个纵向区块组成：顶部搜索栏、中间的轮播图与分类宫格、下方的商家信息流。用HTML语义化标签划分的话，大致对应header、section、footer三段。搜索框用的是input元素加一个submit按钮，分类导航是六个图标的宫格布局，商家列表则是反复出现的列表项。

menu.html是这个案例里交互最密集的页面。商品列表按分类分组展示，每个商品带单价和加号按钮，点击加号会触发购物车的数量变化和总价重算。这里用了大量class名来标记状态，比如选中态、禁用态，都是CSS加上jQuery的addClass/removeClass配合实现的。

common目录里通常放着两个文件：一个reset样式表，用来清掉不同浏览器自带的默认间距；另一个是公共样式表，存放按钮、卡片、图标等复用组件的样式。有色经验是：公共样式表里只放组件级样式，不写页面级样式，避免页面之间的样式互相污染。

2.3 为什么这项目用的是jQuery而不是Vue

现在新项目基本都上Vue或React，但回头看这套用jQuery写的案例，价值恰恰在它的“笨功夫”上。jQuery的DOM操作直接把逻辑写在一起，没有响应式系统的黑匣子，一个click事件触发什么动作、数据怎么变更，调用链是透明的。对刚起步的开发者来说，用jQuery能真正看清“事件绑定—DOM操作—数据更新”这条链路，再换到框架时，很多概念就有了参照物。lib目录里那个jQuery库文件，直接script标签引入即可，我一般会确认一下引入顺序：必须先引jQuery，再引业务脚本，否则会报$ is not defined。

3. CSS才是重头戏：Flexbox布局、rem单位与移动端适配的关键动作

3.1 头部搜索栏背后的弹性布局

移动端页面宽度窄、元素多，最忌讳写死宽度。看这套案例里的头部搜索栏，典型实现方式是Flexbox布局：左侧一个返回箭头、中间一个flex:1的搜索框、右侧一个搜索按钮。这里有个关键点：中间的搜索框不设固定宽度，而是用flex:1吃掉剩余空间，这样在不同屏幕宽度下都能自动撑满。

.search-bar { display: flex; align-items: center; padding: 10px 12px; background-color: #ffd300; } .search-bar .input-wrapper { flex: 1; height: 34px; border-radius: 17px; background-color: #fff; display: flex; align-items: center; padding: 0 12px; } .search-bar .input-wrapper input { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; } .search-bar .btn-search { margin-left: 10px; font-size: 14px; color: #333; flex-shrink: 0; }

这段代码里的核心参数是flex: 1和flex-shrink: 0。flex: 1让输入框区域自动占据弹性空间，flex-shrink: 0则保证按钮不会被压缩变形。移动端常见的坑是搜素框input默认自带边框和背景色，这里通过border: none和background: transparent清掉了，否则写出来的搜索栏会带一条突兀的黑色边框。

3.2 字体大小与间距：rem和media query怎么配合

美团这种信息密集的页面，字体大小不能只靠一套px走天下。这套案例里我留意到用rem做的适配逻辑：根字号按屏幕宽度动态计算，然后页面里所有尺寸都用rem写。

html { font-size: 16px; } @media screen and (min-width: 375px) { html { font-size: 17px; } } @media screen and (min-width: 414px) { html { font-size: 18px; } }

// 按屏幕宽度动态设置根字号 (function (doc, win) { var docEl = doc.documentElement; var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; function setRem() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 16 * (clientWidth / 375) + 'px'; } win.addEventListener(resizeEvt, setRem, false); doc.addEventListener('DOMContentLoaded', setRem, false); })(document, window);

选375px作为基准宽度，是因为iPhone 6/7/8系列的逻辑宽度就是375px，移动端页面的设计稿也大多以这个宽度为基准。这样整套页面的尺寸比例是线性缩放的，屏幕宽度从320到414之间变化时，页面不会出现横向滚动条。这套js逻辑不是源码里带的东西，但把它补上是让rem适配真正闭环的常见做法——纯CSS的rem适配会导致屏幕变化时字号不跟着变。

3.3 商品卡片列表：一行代码解决图片和文字的对齐问题

商家列表的每个条目都是“左侧图片、右侧两行文字、右端箭头”的结构。新手写得最乱的往往是图片和文字垂直居中对齐。直接用align-items: center可以解决80%的情况，但如果右侧文字有两行，就要求左侧图片自身也垂直居中，这时我给图片一个固定的宽高，再在父容器上加align-items: center。

还有一种情况是图片高度不固定、需要等比缩放的场景。这时flex的align-self是一个好工具——给图片设置align-self: center，只让图片自己在交叉轴上居中，不影响同容器里其他元素的布局。

.shop-list .shop-item { display: flex; align-items: center; padding: 12px 15px; background: #fff; border-bottom: 1px solid #f0f0f0; } .shop-list .shop-item img { width: 60px; height: 60px; border-radius: 6px; object-fit: cover; flex-shrink: 0; } .shop-list .shop-item .info { flex: 1; margin-left: 12px; overflow: hidden; }

overflow: hidden在这段里是个隐藏的坑点。右侧文字如果不加它，商家名字超长时会顶开布局；加了之后再配合text-overflow: ellipsis、white-space: nowrap就能变成单行省略号。这套三件套在美团这类列表页面里出场率极高，值得顺手记下。

4. jQuery驱动交互：从点餐到购物车的完整链路实现

4.1 用事件委托给动态添加的商品绑定点击

menu.html里的交互集中在购物车上。但商品列表往往是通过Ajax动态渲染的，直接在每个加号按钮上bind(click)会发现新渲染的元素点不动。老手的做法是用事件委托，把监听挂到列表容器上，通过event.target判断用户点到的是不是加号按钮。

// 事件委托：容器统一监听click $('.goods-list').on('click', '.btn-add', function () { var id = $(this).data('id'); var price = parseFloat($(this).data('price')); var name = $(this).data('name'); // 读取当前购物车存储 var cart = localStorage.getItem('cart'); cart = cart ? JSON.parse(cart) : []; var exist = false; cart.forEach(function (item) { if (item.id === id) { item.count++; exist = true; } }); if (!exist) { cart.push({ id: id, name: name, price: price, count: 1 }); } localStorage.setItem('cart', JSON.stringify(cart)); renderCart(); });

>// 视图层渲染购物车 function renderCart() { var cart = localStorage.getItem('cart'); cart = cart ? JSON.parse(cart) : []; var totalCount = 0; var totalPrice = 0; var htmlStr = ''; cart.forEach(function (item) { totalCount += item.count; totalPrice += item.price * item.count; htmlStr += '<li>' + item.name + ' x ' + item.count + '</li>'; }); $('#cart-list').html(htmlStr); $('#total-price').text(totalPrice.toFixed(2)); $('#total-count').text(totalCount); } // 页面加载完成后执行一次渲染 $(function () { renderCart(); });

这段逻辑说明两个常见问题的解法：一是数据统一从localStorage读取，改数据时也统一写localStorage，保证整个项目的数据入口和出口只有一个；二是渲染时手动拼接HTML字符串而不是逐个append，原因是频繁操作DOM会引发布局抖动，先拼好再一次性赋值给innerHTML效率更高。这里用text()和html()的差异，也是一处容易踩的坑——用text()赋值带标签的内容会被当作纯文本展示，需要动态渲染HTML片段时必须用html()。

4.3 上拉加载更多与下拉刷新：触摸事件的常见写法

移动端信息流都要做“上拉加载更多”。jQuery里监听scroll事件实现分页是个常见方案，但要注意一个性能问题：scroll事件在滚动过程中会被高频触发，直接在里面写Ajax请求会导致一瞬间发好几个重复请求。

var isLoading = false; $(window).on('scroll', function () { if (isLoading) return; var scrollTop = $(window).scrollTop(); var windowHeight = $(window).height(); var docHeight = $(document).height(); // 距离底部50px时触发加载 if (scrollTop + windowHeight >= docHeight - 50) { isLoading = true; loadMore(); } }); function loadMore() { // 模拟异步加载，真实项目里替换成$.ajax即可 setTimeout(function () { var nextList = getMoreGoods(); $('.goods-list').append(nextList); isLoading = false; }, 300); }

这里关键参数是底部触发阈值50px和isLoading开关。isLoading这个布尔锁是必须的，否则滑动一次会触发多次请求；在请求完成后再释放锁，保证同一时间只有一个加载任务在跑。300ms的延迟是模拟Ajax耗时，真实项目里没有这个setTimeout，要在$.ajax的success回调里把isLoading置回false，这一点很容易被忽略。

5. 移动端常见问题排查：六个高频坑的现象、原因与解决

5.1 页面在手机上打开字小得看不见、布局全乱了

• 现象：双击放大页面才能看清，宽度超过屏幕很多，图片挤成一团。
• 原因：HTML文档缺少viewport meta标签。浏览器默认把移动端页面按980px宽度渲染，再用缩放适配屏幕，导致字体被整体缩小。
• 解决：在head里加上标准viewport，这是移动端页面的底线配置：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

5.2 点击按钮后要等300ms才有反应

• 现象：按钮点击后有明显延迟，用户连点两次会出现两个相同操作。
• 原因：移动端浏览器为了区分单击和双击缩放，在第一次点击后等待300ms才触发click事件，是历史遗留行为。
• 解决：用touchstart代替click处理关键交互，这是jQuery时代的常见做法：

$('.btn-add').on('touchend', function (e) { // 阻止click事件的二次触发 e.preventDefault(); addToCart(); });

5.3 图片在开发环境正常，打包上线后白屏

• 现象：商品图片加载不出来，控制台显示404，但图片文件明明在项目里。
• 原因：图片文件名包含中文或空格，本地开发时浏览器能自动编码，部署到Linux服务器后路径解析失败。
• 解决：项目里所有图片资源统一改成小写英文字母命名，用短横线分隔单词，和线上接口返回的资源路径保持一致。

5.4 页面间数据偶尔丢失，刷新后购物车空了

• 现象：菜单页加购完成，跳转订单页能看到数据，但杀掉重进后购物车内容丢失。
• 原因：代码用的是内存变量存储购物车数据（比如var cart = []），页面跳转导致页面对象销毁，内存数据随之清空。
• 解决：把购物车存储改到localStorage，这套案例里的数据结构已经考虑了这个方案，key命名为cart的JSON字符串，商品和数量都在里面。

5.5 加了1px边框在Retina屏上看起来像2px

• 现象：同一套按钮边框在真机上明显比设计稿粗，横屏竖屏时粗细还不一致。
• 原因：DPR（设备像素比）为2或3的屏幕上，CSS的1px对应了2到3个物理像素，视觉上边框被放粗。
• 解决：使用media query配合transform做0.5px边框：

.border-bottom-1px { position: relative; } .border-bottom-1px::after { position: absolute; left: 0; right: 0; bottom: 0; content: ''; height: 1px; background: #e5e5e5; transform: scaleY(0.5); }

5.6 上拉加载在iOS上有回弹卡顿

• 现象：iOS Safari里拉到底部后页面有橡皮筋回弹效果，加载中的loading提示闪现一下就消失。
• 原因：回弹效果掩盖了底部位置的判断，导致scroll事件里判断触底的条件先满足后又撤销。
• 解决：把触底判断改为“滚动偏移量 + 视口高度 >= 文档高度 - 30”，并且带上isLoading开关，避免重复请求：

if (scrollTop + windowHeight >= docHeight - 30 && !isLoading) { isLoading = true; loadMore(); }

6. 进阶：给案例源码做一次可上线的性能清理

6.1 页面骨架优化

这套案例源码本身偏向教学演示，距离上线还差几步常规操作。第一步是把CSS和JS压缩合并：common目录下的两个CSS文件合并成一个，lib里的jQuery和业务脚本分开引入，但业务脚本内部先压缩再引用，减少请求数的同时保证第三方库不被误改。第二步是给图片补上loading="lazy"属性，移动端首屏只加载可视区图片。第三步是用字体图标替代部分业务图标，减少额外的图片请求。

6.2 真机验证清单

6.3 建立自己的移动端模板

这套源码里最好复用的资产其实是目录结构本身。我现在的做法是，接移动端H5小项目时直接照这套结构起项目：页面文件平级放根目录、common统一管理样式变量（主色#ffd300这种全局值抽成CSS变量）、lib锁版本不随意升级。每搭一个新项目，强制自己在本地用真机走一遍第5章那张清单。现在手上有两三个项目框架性地长在了美团这个案例的骨架上，只换了皮肤和数据源。做移动Web从旧代码里挖金子的体会，比学新框架的语法要实际得多，希望帮到你。

本文还有配套的精品资源，点击获取