简介一款参照米家APP布局与样式开发的智能家居微信小程序源码包面向学习微信小程序、物联网前端以及智能家居UI设计的开发者。项目覆盖微信小程序完整技术链路WXML/WXSS结构样式、JavaScript业务逻辑以及wx.request、WebSocket等API交互同时涉及MQTT/CoAP等物联网通信协议、本地缓存与云端数据库、权限管理和CSS3动画等知识点适合作为从零搭建智能家居控制端的练手项目。压缩包为ZIP格式大小2.67MB内含项目文件及配置信息具体文件清单需解压查看。资源发布后已有668人学习对希望在移动端复刻米家风格交互、理解设备状态同步与事件监听机制的读者具有明确参考价值。1. 从米家到智能家居微信小程序复刻布局之前先复刻信息密度大多数团队拿到参照米家APP写一套智能家居小程序这类需求第一反应是找一张米家首页截图然后把色值、圆角、图标抄一遍。这个做法方向对但漏掉了最关键的一层米家真正让人用着顺手的点不在单个像素而在信息密度的层级控制。它把设备状态、房间维度、快捷操作三种信息通过统一的卡片语言压进同一屏,用户不需要思考就能找到入口。这也是本文要拆的问题当手里只有一份smart-home-master.zip这类工程模板时如何从布局坐标系、组件状态、数据流三个层面把米家的顺手感复刻出来而不是只抄个皮。下面按设计基线 → 首页搭建 → 控制面板与状态同步 → 加载性能这条线推进中间穿插可落地的微信小程序代码和参数说明适合已经能跑通基础小程序、但想把界面和数据交互做扎实的开发者在现有工程里直接改造。2. 布局坐标系用 Flex 与间距规范搭出米家式首页骨架2.1 米家首页的视觉层级拆解灰白底、卡片块、纵向节奏米家首页看着干净核心不是白色用得多而是同一层级的视觉元素重量完全一致。设备卡片统一圆角(约16rpx到24rpx)、统一阴影(通常用#E0E0E0左右的浅投影)、统一内边距(约24rpx到32rpx)。在同一视觉重量下眼睛会自然按从左到右、从上到下的Z字形扫视这就是布局的底层逻辑。微信小程序里实现这套体系的成本很低Flex 布局天然适合卡片流加上rpx单位做等比例缩放就能在不同屏幕宽度下保持比例一致。相比 H5 的vw/vhrpx在微信里按 750 设计稿宽度换算正好对应米家这类以 iPhone 宽度为基准的设计稿。2.2 用 Flex 网格排布房间与常用设备入口首页顶部通常会放房间切换和常用设备两个横向区域。房间切换用横向滚动常用设备用 4 列网格。这里的核心参数是flex-wrap: wrap与justify-content: space-between。space-between 在最后一行不满 4 个时会出现向左靠齐的问题所以更稳的做法是给每个卡片一个固定比例宽度例如width: 23%并允许margin-right留出间隙。!-- pages/home/index.wxml -- view classdevice-grid block wx:for{{deviceList}} wx:keyid view classdevice-card {{item.status online ? device-card--online : device-card--offline}} bindtaphandleDeviceTap>/* pages/home/index.wxss */ .device-grid { display: flex; flex-wrap: wrap; margin: 24rpx 0; } .device-card { width: 23%; margin: 0 1% 20rpx 1%; background: #F9F9F9; border-radius: 20rpx; padding: 24rpx 0; display: flex; flex-direction: column; align-items: center; transition: transform 0.2s ease; } .device-card--online { background: #FFFFFF; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04); } .device-card--offline { opacity: 0.5; }这里width: 23%是为了在 4 列布局下留出 1% 的左右间隙加上外层容器的padding最终呈现的间距约等于设计稿的 20rpx。bindtap绑定设备点击事件>scroll-view scroll-x enhanced show-scrollbar{{false}} stylewhite-space: nowrap; view classscene-list view classscene-item wx:for{{sceneList}} wx:keysceneId bindtaphandleSceneTap text classscene-item__name{{item.sceneName}}/text text classscene-item__desc{{item.tip}}/text /view /view /scroll-viewenhanced属性是微信基础库 2.11.0 之后的特性它允许在 iOS 上使用原生滚动减少白屏卡顿。show-scrollbar{{false}}用来隐藏滚动条视觉上更接近米家无痕横向滑动的手感。注意如果 scoll-view 内部要放image组件建议给图片显式设置width高度否则图片加载前横向滚动长度会计算不准。3. 组件状态与数据流让设备卡片拥有在线/离线/控制中三种状态3.1 设备状态机的数据设计而不是一堆布尔变量很多小程序写着写着设备状态就变成isOnline: true、isLocked: false这样的平铺布尔值。设备一多判断逻辑散落在模板和事件处理函数里加一个新状态要改七八处。参照米家的交互一个设备卡片至少要表达在线、离线、控制中(指令下发后等待回执)。用一个status字段统一管理模板里只根据 status 渲染样式逻辑里只通过changeDeviceStatus方法改变状态值。// pages/home/index.js Page({ data: { deviceList: [ { id: ac-001, name: 客厅空调, status: online, icon: /assets/ac.png }, { id: light-002, name: 卧室灯, status: offline, icon: /assets/light.png }, { id: tv-003, name: 电视, status: online, icon: /assets/tv.png }, ], }, handleDeviceTap(e) { const deviceId e.currentTarget.dataset.id; const targetDevice this.data.deviceList.find(item item.id deviceId); if (targetDevice targetDevice.status offline) { wx.showToast({ title: 设备离线请检查网络, icon: none }); return; } // 跳转设备详情或控制面板 wx.navigateTo({ url: /pages/device/control?deviceId${deviceId} }); }, });find方法在数据量小(家庭场景一般不会超过几十个设备)时性能足够不需要额外引入key索引。wx.showToast的icon: none是纯文本提示避免离线时弹一个红色错误图标给用户造成系统崩了的错觉。3.2 wx:if 与 hidden 的选择渲染开销和状态切换频率设备列表里每个卡片有在线/离线两种表现有人直接用wx:if动态切换。wx:if会真正销毁和重建节点频繁切换时会产生布局抖动。对于状态切换频率较高的设备(例如插座、灯)用hidden属性更好它只是切换display: none节点保留在渲染树里。但在首次加载页面的场景下wx:if反而能减少无效渲染。一个折中方案是列表首屏用wx:if判断是否有数据卡片内部的状态切换用hidden或纯 class 切换。这个思路对应到代码里就是外层wx:if{{deviceList.length 0}}内层卡片样式通过device-card--online这样的 class 切换。3.2.1 控制指令下发与本地状态乐观更新米家的控制体验是点了立刻有反应。但这个反应不是真实设备状态而是前端把界面先切到目标状态等设备回执后再校正。这种模式叫乐观更新(Optimistic Update)在智能家居小程序里几乎是必备手段。toggleDevice(e) { const { id, targetState } e.currentTarget.dataset; // 1. 本地状态先行 this.setData({ [deviceList[${this.getDeviceIndex(id)}].status]: controlling, }); // 2. 发送指令到后端/硬件网关 wx.request({ url: https://api.example.com/device/control, method: POST, data: { deviceId: id, targetState }, success: (res) { if (res.data.success) { this.updateDeviceStatus(id, online); } else { this.updateDeviceStatus(id, offline); wx.showToast({ title: 控制失败, icon: none }); } }, fail: () { this.updateDeviceStatus(id, offline); }, }); }setData里使用deviceList[${index}].status这种路径写法时路径字符串会由微信自己解析不要自己拼数组再整体赋值那样会触发整个列表重渲染。如果设备数量超过 20 个建议给每个设备独立设置一个setData路径而不是deviceList整体替换。这个方案在硬件回执慢的场景下很管用但要注意加一个超时兜底比如 8 秒后如果还没收到回执强制把状态改回离线。3.3 房间与设备分组的 tab 切换米家APP底部的设备和场景两个标签页本质是同一份设备数据的不同聚合维度。小程序里实现起来有两种路径一种是用微信原生的swiperscroll-view另一种是tabBar页面。米家的设备列表通常是顶部一个横向 tab 切房间这用自定义组件或页面内scroll-view实现更灵活。view classroom-tabs scroll-view scroll-x enhanced show-scrollbar{{false}} view classroom-tab {{currentRoom item.name ? room-tab--active : }} wx:for{{roomList}} wx:keyname bindtapswitchRoom>// pages/device/control.js Page({ onLoad(options) { this.deviceId options.deviceId; const deviceInfo this.findDeviceById(this.deviceId); this.setData({ device: deviceInfo, brightness: deviceInfo.brightness || 70, }); }, findDeviceById(id) { const globalDevices getApp().globalData.deviceList || []; return globalDevices.find(item item.id id) || {}; }, });findDeviceById是同步查找前提是globalData.deviceList已经在启动时加载完毕。如果控制面板页可能被分享给其他人打开这里要加一个查不到就重新拉取的兜底逻辑否则分享场景下页面会白屏。4.2 slider 亮度/温度调节与节流控制米家的灯光和空调面板都有滑杆调节微信小程序用slider组件实现。slider的bindchanging事件在手指滑动时高频触发如果每次触发都发请求到后端网关和硬件都受不了。常规做法是changing时只更新本地 UIchange(松手)时才发控制指令。slider min0 max100 step1 value{{brightness}} activeColor#007AFF block-size24 bindchangingonBrightnessChanging bindchangeonBrightnessChange /onBrightnessChanging(e) { this.setData({ brightness: e.detail.value }); }, onBrightnessChange(e) { const brightness e.detail.value; wx.request({ url: https://api.example.com/device/brightness, method: POST, data: { deviceId: this.deviceId, brightness }, }); },block-size决定滑杆圆点的大小米家用的是偏大的圆点(约 28rpx)因为手指操作需要足够大的触摸面积。step1是精度控制灯光亮度用 1% 的步进足够温度调节通常用 0.5 或 1 的步进。4.3 状态回显WebSocket 还是定时轮询4.3.1 两者的取舍家庭局域网内的设备状态变化通常来自两个方向用户主动控制、设备自身状态变化(比如空调达到设定温度后压缩机停机)。后者不会主动通知前端所以需要一种推送机制。局域网环境下首选 WebSocket 连接网关或设备固件。但如果网关不支持 WebSocket退而求其次用setInterval定时轮询。轮询间隔推荐 3 到 5 秒太短会加大网关压力太长则状态刷新有明显延迟。4.3.2 轮询代码的注意事项startPolling(deviceId) { this.pollTimer setInterval(() { wx.request({ url: https://api.example.com/device/state?deviceId${deviceId}, success: (res) { if (res.data.state ! this.data.device.status) { this.setData({ device.status: res.data.state, }); } }, }); }, 3000); }, onUnload() { if (this.pollTimer) { clearInterval(this.pollTimer); } },onUnload里必须清理定时器。小程序页面栈不销毁定时器就会一直挂在后台消耗电量且产生无意义的请求。加一个if (this.pollTimer)是为了避免极端情况下clearInterval传入了undefined导致报错。5. 上线前用骨架屏与微信小程序分包把首屏载荷压下去5.1 开发版与真机的感官差异在于骨架屏开发工具里页面几乎秒开真机上却经常白屏 1 到 2 秒。原因无非是首页 WXML 节点多、图片资源大、网络慢。米家的做法是骨架屏在数据加载完成前先用灰色色块按最终布局占位让用户感觉页面结构已经出来了。微信小程序实现骨架屏有两个主流路径一是手写wx:if控制灰色占位块二是使用第三方组件。手写方式对老工程侵入最小。view classskeleton wx:if{{loading}} view classskeleton__room-bar/view view classskeleton__grid view classskeleton__card wx:for{{[1, 2, 3, 4]}} wx:key*this/view /view /view view classdevice-grid wx:else !-- 正常设备列表 -- /view.skeleton__card { width: 23%; height: 200rpx; margin: 0 1% 20rpx 1%; border-radius: 20rpx; background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; } keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }wx:key*this用于循环渲染纯数字数组时的 key 值*this表示使用每一项自身作为 key。骨架屏动画用background-size: 400%拉起一个横向移动的光影效果这是目前成本最低的 loading 动效。5.2 分包加载控制面板与设置页不拖累首页智能家居小程序的首页是流量入口其他页面(设备设置、固件升级、历史记录)使用频率低。微信小程序的主包有 2MB 大小限制(截至基础库 2.x 时代后续优化到更大但保守按 2MB 控制没坏处)把低频页面挂进subpackages是官方推荐做法。{ pages: [ pages/home/index, pages/device/control ], subpackages: [ { root: pages/settings, pages: [ device-setting, firmware-update, history-log ] } ] }root字段定义分包根目录分包内的页面路径以root为前缀。这样首页只打包必须的pages/home和pages/device其余页面在用户真正访问时才下载。注意跳转分包页面时wx.navigateTo的 URL 要写全路径例如/pages/settings/device-setting?deviceIdx。5.3 收尾检查表从页面栈到分享链路快上线时可以按这个清单过一遍工程首页onShow里是否需要刷新设备状态wx.navigateTo的页面层级不要超过 10 层设备控制面板和设置之间建议用wx.redirectTo避免栈堆积分享功能若需要携带设备 ID放进onShareAppMessage的path参数里。这套方案不依赖任何私有组件库手写在任意原生小程序工程里都能落地后续接真实硬件网关时只需要把wx.request的 URL 替换成内网网关地址即可。本文还有配套的精品资源点击获取