简介面向微信小程序开发者的布局实战案例压缩包以完整项目演示WXML与WXSS协同搭建页面结构系统覆盖弹性盒flex布局、栅格grid布局、rpx尺寸单位适配、定位与浮动、内置组件组合以及媒体查询响应式断点等核心知识点。资源共33个文件包括20个png界面截图与图标、5个json配置、3个js逻辑脚本、3个wxss样式表及2个wxml页面模板压缩包仅79KB已有378人学习。项目目录可直接导入微信开发者工具运行配合实时编译与真机预览观察不同屏幕下的布局效果案例还涉及生命周期方法、双线程数据绑定、条件渲染与性能优化思路适合从零搭建小程序界面、理解布局原理并完成多端适配的初学者或初中级开发者可帮助打通从静态结构到动态交互的完整实现路径。 第一次用微信小程序做商城的开发者十个里有六个会死在布局阶段。左右栏挤成一团、底部按钮被手势条顶飞、同一个页面在 iPhone 和安卓上差出两个屏——这些问题大多不是逻辑问题而是对 750rpx 坐标系和 flex 收缩规则没吃透。这套“小程序布局微信案例.zip”里装的不是炫技动画而是把 flex 和 grid 用得很实际的页面骨架左右两栏、宫格导航、卡片流、吸顶头部、底部安全区适配。解压后在微信开发者工具里直接跑案例页面一个个对照着改结构就行。适合两类人后端转小程序、一个人扛全栈的以及写过 H5 但没正经端过小程序布局的前端。前者拿结构后者拿边界——rpx 换算、flex-wrap 的收缩底线、安全区那几个值案例里都是现成的。2. flex 与 grid两套主力布局方案先看懂再选型拆开这套案例出现频率最高的不是 position也不是 float而是 display:flex。小程序页面本质上是一台 750rpx 宽的舞台组件想横向排整齐flex 成本最低想做出类似宫格、日历、标签面板这种行列分明的块grid 才是更顺手的工具。两者不是替代关系一个负责“一行内怎么摆”一个负责“整个面怎么切”。很多人拿到案例先复制 wxssflex 属性全堆上去改一个小参数就乱一整套。原因是没区分主轴和交叉轴。建议先把第 2.1 节讲清楚的这组坐标系记牢再对照案例去读样式改动时心里才有数。2.1 flex 的坐标系与三个关键参数flex 的默认主轴是水平方向子元素在主轴上的排列由 justify-content 管在交叉轴上的对齐由 align-items 管。换到 column 时主轴变竖直两个属性的作用方向也跟着转。我见过不少翻车现场是把 align-items 当成“水平居中”用结果在 column 布局里上下没居中左右反而动了。属性取值作用常见场景flex-directionrow / column主轴方向默认 row操作栏用 columnjustify-contentflex-start / center / space-between主轴对齐按钮组、导航条align-itemsstretch / center / flex-end交叉轴对齐表单行、按钮同行flex-wrapnowrap / wrap是否换行标签流、动态卡片流flexgrow shrink basis子项伸缩比例内容区撑满剩余宽度这里最容易被忽略的是 flex-wrap 与 shrink 的组合。默认 nowrap 的情况下子项宁可压缩也不换行压缩比例由 shrink 决定而压缩底线受内容最小宽度限制。案例里左右两栏的代码几乎都靠下面这句话兜底/* 两栏布局左侧固定右侧自适应 */ .sidebar { width: 200rpx; flex-shrink: 0; /* 固定宽度不允许被压缩 */ } .main { flex: 1; min-width: 0; /* 允许内容区突破最小内容宽度 */ }flex: 1 是 flex-grow、flex-shrink、flex-basis 的简写相当于让内容区占满剩余空间。真正的问题出在 min-width: 0 上。如果这一行去掉内容区里只要有一串长英文、一张固定宽度图片子项的最小内容宽度会大于容器剩余宽度两栏就被撑破右边内容把左边菜单挤出屏幕。这个坑在案例包里被反复标注原因就在这里。2.2 左右两栏布局固定侧栏加自适应内容案例里同一套左右两栏在不同页面有不同变体商品列表是左侧 160rpx 分类导航、右侧商品卡片流订单页是左侧时间轴、右侧订单信息个人中心则是左侧头像、右侧账号手机号。核心结构一致只是侧栏宽度和对齐方式不同。!-- 商品分类页布局 -- view classcategory-page scroll-view classcategory-side scroll-y view classside-item active女装/view view classside-item男装/view view classside-item童装/view /scroll-view scroll-view classcategory-main scroll-y view classproduct-item商品卡片/view view classproduct-item商品卡片/view /scroll-view /view.category-page { display: flex; height: 100vh; overflow: hidden; } .category-side { width: 160rpx; flex-shrink: 0; background: #f7f7f7; } .category-main { flex: 1; min-width: 0; background: #fff; }两个 scroll-view 并排各自独立滚动这是电商分类页最常见的结构。注意一点页面最外层不是让 body 滚而是把高度固定成 100vh内部 scroll-view 各自滚动。这样右侧商品列表滚动时左侧选中态不会跟着上下跑交互上更顺手。宽度参数改起来有两个口径侧栏固定宽适合侧栏项文字短的场景侧栏用 28% 加 flex-shrink: 0适合需要跟随设计稿比例的场景。我一般优先用固定 rpx因为 750rpx 设计稿上量出来的尺寸可以直接写不用考虑百分比在小屏上的取整误差。2.3 grid 布局宫格、日历与流式场景flex 管一行内排列没问题但遇到宫格导航、月历、九宫格这类“行列都需要对齐”的区块用 grid 几行声明就能把行列全部切好比 flex 里套多层 view 干净。案例中的金刚区导航核心代码就一段.grid-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24rpx; padding: 24rpx; }repeat(4, 1fr) 把容器横向等分成 4 列每列宽度相等。gap 是列与列、行与行之间的间距不用再给每个子项单独写 margin-right 再加“最后一个去掉 margin”的补丁。宫格数量固定时这套写法几乎是标准答案。grid 和 flex 混用时需要留意一个边界grid 容器内可以继续放 flex 子项但 grid 子项默认的高度是 stretch如果你在内部 flex 里 align-items: center外层又没给 min-height区块就可能出现高度塌陷。案例里的处理方式是“外层 grid 定行高内层 flex 用 align-items: center 完成图标和文字垂直居中”。这样内外各管一层样式互不干扰。流式布局面板比如动态标签、适配不同长度的筛选条件不太适合固定 grid 列数因为项数不确定。这种情况案例里改用 flex-wrap: wrap子项宽度按内容自适应再用 margin 做间距。grid 适合“行列关系稳定”的区块flex-wrap 适合“数量不定但宽度相近”的流式场景。3. 把案例包搬到自己的工程拆解、改造与组件化下载下来的压缩包解压之后先别急着看首页。小程序的布局能力分散在 app.json、页面 wxss、自定义组件三个层级里只改某个页面文件往往解决不了全局问题。第一步应该先确认目录结构长什么样哪些文件可以在自己工程里直接复用哪些需要动手改路径。3.1 解压后先看这几个文件目录结构决定改造成本小程序布局微信案例/ ├── app.json # 页面注册和全局配置 ├── app.wxss # 全局样式布局 reset 在这里 ├── pages/ │ ├── index/ # 首页宫格导航 商品流 │ ├── category/ # 分类页左右两栏 │ └── mine/ # 个人中心上下结构 安全区 └── components/ ├── layout-row/ # 横向布局组件 └── layout-col/ # 纵向布局组件打开 app.json 可以看到页面路径和窗口导航栏的配置比如 navigationBarTitleText、navigationBarBackgroundColor这些决定了页面头部标题的颜色和文本。案例里两个页面共用一个 header 组件所以页面自己的 json 里几乎不重复设置改动集中在组件内部。解压的时候如果遇到报错先用系统自带解压试一次再换 7-Zip 试一次。网盘二次打包的 zip 偶尔带伪加密标志系统解压会卡在密码校验7-Zip 能直接忽略这个标志解开。案例包本身没有密码不需要其他操作。3.2 左右两栏的完整改造wxml、wxss、json 三件套把案例里的分类页抽出来替换成自己的菜单项和商品数据是成本最低的上手路径。下面这套是去掉业务逻辑之后的完整骨架实际开发时可以直接套用。!-- pages/category/category.wxml -- view classcategory-wrap view classcategory-side block wx:for{{sideList}} wx:keyid view classside-item {{activeId item.id ? active : }} bindtaponSideTap>/* pages/category/category.wxss */ .category-wrap { display: flex; height: 100vh; overflow: hidden; } .category-side { width: 180rpx; flex-shrink: 0; background: #f5f5f5; } .category-side .side-item { height: 96rpx; line-height: 96rpx; padding-left: 24rpx; font-size: 26rpx; color: #333; } .category-side .side-item.active { background: #fff; color: #e93b3d; font-weight: 500; } .category-main { flex: 1; min-width: 0; padding: 24rpx; box-sizing: border-box; background: #fff; }wxml 里左右两块是兄弟节点wxss 用 flex 并列。右侧 content 区保持 flex: 1min-width: 0 防止商品标题超长时把侧栏挤没。需要注意 height: 100vh 配合 overflow: hidden内部不设滚动容器时超过一屏的内容会被截断。页面 json 里不需要额外写布局代码但注册一下自定义组件名是必要的方便后续替换成组件化版本{ navigationBarTitleText: 商品分类, usingComponents: { layout-row: /components/layout-row/layout-row } }navigationBarTitleText 就是小程序头部标题的静态写法。动态改标题的场景放在第 3.4 节讲因为涉及导航栏高度计算问题。3.3 把常见布局封装成自定义组件layout-row 的设计案例里复用度最高的不是页面而是 components 下那两个布局组件。layout-row 本质上是把 flex 容器的几个关键参数抽出来变成组件属性页面里用的时候只用传值。下面这个版本是案例里 layout-row 的简化实现。// components/layout-row/layout-row.js Component({ externalClasses: [custom-class], properties: { justify: { type: String, value: flex-start }, align: { type: String, value: center }, wrap: { type: Boolean, value: false } } });!-- components/layout-row/layout-row.wxml -- view classcustom-class layout-row stylejustify-content: {{justify}}; align-items: {{align}}; {{wrap ? flex-wrap: wrap; : }} slot/slot /view/* components/layout-row/layout-row.wxss */ .layout-row { display: flex; flex-direction: row; box-sizing: border-box; width: 100%; }properties 里暴露了 justify、align、wrap 三个参数对应 flex 的 justify-content、align-items、flex-wrap。页面使用时只需要关注这三个值不需要关心内部实现。externalClasses 允许外部传入 custom-class用来覆盖背景色、内边距这类视觉属性。封装到组件这一层之后页面里的写法会变成这样layout-row justifyspace-between aligncenter custom-classheader-bar view左侧标题/view view右侧按钮/view /layout-row这样改造的收益在页面多的时候特别明显。一个项目里十几个页面都有“左边标题右边按钮”的头部条直接在组件里统一改间距或对齐方式比逐个页面改 wxss 省力得多。案例包里 layout-row 和 layout-col 都给了这套壳子新页面直接复制组件目录再改一下 usingComponents 路径就能用。3.4 导航栏与安全区头部标题和胶囊之间的布局计算默认导航栏由小程序系统渲染标题位置不需要你操心。但案例里的商城页面用了自定义导航因为导航栏背景需要和页面顶部的搜索框、插画连成一体。自定义之后头部布局就得自己算了。// 自定义导航高度计算通常在 onLoad 里执行一次 const winInfo wx.getWindowInfo(); const menuRect wx.getMenuButtonBoundingClientRect(); const statusBarHeight winInfo.statusBarHeight; const navBarHeight (menuRect.top - statusBarHeight) * 2 menuRect.height; this.setData({ statusBarHeight, navBarHeight });menuRect 是胶囊按钮的位置和尺寸信息。胶囊顶部到状态栏底部的距离是导航栏上下留白的基准乘以 2 是因为导航栏的对齐以胶囊垂直居中为锚点。最终 navBarHeight 就是自定义导航栏的总高度页面头部容器用 padding-top 撑开状态栏区域再用 height 给导航内容预留位置。如果不做这一步自定义导航在 iPhone 上可能和胶囊重叠在安卓上可能又空出一大截。头部标题写在导航容器内部用 flex 上下居中就能跟随这个高度自动适配。动态设置标题时用 wx.setNavigationBarTitle 改的是系统导航栏标题自定义导航下需要自己维护一个 data 字段把标题文本塞进头部组件的插槽里。4. 布局踩坑排查从 rpx 溢出到安全区的五个翻车现场案例代码可以直接用但真机环境里跑的页面条件比案例复杂得多。下面五条是我在拆这套案例、以及拿它改到自己项目时实际踩过的坑每条都按“现象 → 原因 → 解决”记录遇到同类问题可以直接对号入座。4.1 flex 子元素把父容器撑破长文本和图片最典型现象两栏布局里右侧内容区出现横向滚动条左边侧栏宽度被压缩文字折行。原因flex 子项默认 flex-shrink: 1会按比例收缩但收缩不能低于内容最小宽度。长英文、连续数字、固定尺寸 image 都会把这个最小宽度撑大容器装不下就开始溢出。解决给内容区加 min-width: 0给图片加 max-width: 100%。前者允许内容区忽略内容最小宽度约束后者让图片宽度跟随容器。案例代码里 .category-main 的 min-width: 0 就是专门为这条留的。4.2 底部按钮被手势条盖住安全区适配不是加 padding 就行现象iPhone X 以后机型上底部固定按钮有一截被 Home Indicator 遮挡点击区域变小。原因页面没有适配环境 safe-area-inset-bottom固定定位的元素把底部手势条区域当成了正常内容区。解决页面根容器加 padding-bottom: env(safe-area-inset-bottom)同时给固定按钮的容器加上 padding-bottom: constant(safe-area-inset-bottom) 做兼容写法。案例里底部操作栏统一用了这个方案注意要给外层容器加 box-sizing: border-box否则 padding 会撑高容器反而露出背景色差。4.3 rpx 在小屏机型上溢出750rpx 设计稿不是万能的现象同一套页面在 iPhone SE 上右侧内容被截断安卓低端机上卡片间距变大。原因rpx 以 750rpx 为基准等比缩放小屏机型实际像素不足 375px固定宽度子项的 rpx 值相加仍然等于 750但可用视觉空间因为 padding、边框的存在变得更小空间不够。解决固定宽度容器改用 min-width 和 max-width 控制弹性范围不要用死宽度。卡片栅格用 grid 的 1fr 替代固定 rpx 宽度让剩余空间自动分配。案例里的商品卡片在大屏和小屏上都用了 minmax 控制最小值而不是写死一个数值。4.4 grid 与 flex 混用时布局重叠内外层级没分清现象外层 grid 宫格正常内层 flex 里出现元素上移或重叠切换页面后又恢复。原因grid 子项默认 align-items: stretch内部 flex 容器高度没有明确设置时子项按内容高度排列下层元素覆盖到上层区域。解决grid 容器显式声明 align-items: start或给内层 flex 容器设置 min-height: 0。案例里金刚区图标的做法是把每个宫格项内部再包一层 view外层 grid 负责切块内层 view 用 flex 完成图标和文字的排列两层职责分离不互相影响高度。4.5 自定义导航在安卓机上标题偏移胶囊测量时机不对现象自定义导航在 iOS 上正常安卓机上标题偏上首次进入偶发刷新后恢复。原因wx.getMenuButtonBoundingClientRect 在页面初始化阶段可能拿到胶囊的初始位置安卓上状态栏动画未结束测量值比最终值小。解决在 onReady 或页面首次绘制完成后再测量必要时延迟 100ms 执行。案例里的处理方式是在 onShow 里重新设置一次导航高度跟随状态栏变化刷新数据缓存旧值做对比变化超过 1px 才更新避免频繁 setData。这里补充一句布局问题多为环境相关案例代码在开发者工具里显示正常并不代表真机没问题。改完任何一个布局参数都建议在开发者工具的“机型模拟”里切一遍 iPhone SE、iPhone 15 Pro、Android 常见分辨率再上真机预览。5. 一个 px 自动转 rpx 的脚本把设计稿直接变成小程序样式拿到设计稿时最耗时间的不是写 layout而是把 375 宽设计稿里的 px 一个个换算成 rpx。iPhone 逻辑宽度 375px 对应小程序 750rpx换算倍率正好是 2。这个脚本会遍历指定目录里的所有 wxss 文件把 px 值批量换算成 rpxborder、box-shadow 这类特殊属性保持 px 不动避免 1px 边框被放大后发虚。// px2rpx.js const fs require(fs); const path require(path); const rate Number(process.argv[2] || 2); const targetDir process.argv[3] || ./pages; // 这些属性里的长度值不做换算保留 px const SKIP_PROPERTIES [border, box-shadow, outline]; function convertLine(line) { if (SKIP_PROPERTIES.some((key) line.trim().startsWith(key))) { return line; } return line .replace(/(\d(?:\.\d)?)px/g, (match, value) { return ${Math.round(Number(value) * rate)}rpx; }) .replace(/(\d(?:\.\d)?)rpx/g, (match) match); } function walk(dir) { fs.readdirSync(dir, { withFileTypes: true }).forEach((entry) { const fullPath path.join(dir, entry.name); if (entry.isDirectory()) { walk(fullPath); } else if (entry.name.endsWith(.wxss)) { const source fs.readFileSync(fullPath, utf8); const converted source.split(\n).map(convertLine).join(\n); fs.writeFileSync(fullPath, converted); console.log(converted:, fullPath); } }); } walk(targetDir);rate 参数是 px 到 rpx 的倍率375 宽设计稿传 2750 宽设计稿传 1。SKIP_PROPERTIES 里列出的属性不参与换算是因为 border 1px 在真机上已经是 1 物理像素转了 rpx 反而会变粗。box-shadow 是模糊半径转了之后阴影范围可能超出设计稿预期。执行方式是在命令行里运行node px2rpx.js 2 ./pages推荐先对复制出来的案例目录跑一遍对比转换后的样式在开发者工具里是否和原设计稿一致确认无误后再往业务目录执行。脚本不做备份跑之前建议用 Git 提交一次或者把原目录复制一份留个后悔药。font-size 的换算我通常单独处理不放进批量脚本。正文字号在小屏幕上用 rpx 会偏小直接保留设计稿里的 px 值视觉更稳定。从那以后我每次拿到设计稿都会先跑一遍这个脚本再把 border 和 font-size 手工过一遍最后切机型预览。希望帮到你下载这套案例后可以先把脚本跑在它的 wxss 上看看效果再决定要不要用在自己的项目里。本文还有配套的精品资源点击获取
