小程序界面参考图

全部来自开源小程序的 README 真实截图（不是设计站的效果图，是能跑的代码）。
已用程序逐个验真：按文件头核对格式、OpenCV 识别二维码、剔除图标与徽章 —— 55 张都是能看清界面的图。带橙色角标的是我没法百分百确定的（可能含二维码或是拼图），留给你自己判断。
点图放大，左右方向键翻页，Esc 关闭。

01_组件库示例

整套 UI 词汇表 —— 定颜色、圆角、按钮、表单风格，先看这几组

Tencent/tdesign-miniprogramgithub.com/Tencent/tdesign-miniprogram1 张

TDesign 小程序版：腾讯官方，风格现代

Tencent/tdesign-miniprogram · 06.jpeg — 06.jpeg正方形，可能是码或拼图

Tencent/weui-wxssgithub.com/Tencent/weui-wxss1 张

WeUI：微信官方设计语言原版

Tencent/weui-wxss · 02.png — 02.png

wechat-miniprogram/miniprogram-demogithub.com/wechat-miniprogram/miniprogram-demo1 张

微信官方 API 与组件示例全集

wechat-miniprogram/miniprogram-demo · 02.png — 02.png

youzan/vant-weappgithub.com/youzan/vant-weapp1 张

Vant Weapp：小程序组件库标杆，组件最全

youzan/vant-weapp · 13.png — 13.png正方形，可能是码或拼图

02_服务预约类

三端服务预约，跟你的项目结构最像 —— 重点看这几个

007gzs/meetinggithub.com/007gzs/meeting6 张

会议室预约，预约时段选择可参考

007gzs/meeting · 02.jpg — 02.jpg

007gzs/meeting · 03.png — 03.png

007gzs/meeting · 04.jpg — 04.jpg

007gzs/meeting · 05.jpg — 05.jpg

007gzs/meeting · 06.jpg — 06.jpg

007gzs/meeting · 07.png — 07.png

newboys3075426724/HomeApptgithub.com/newboys3075426724/HomeAppt11 张

上门服务预约，含服务者入驻流程

newboys3075426724/HomeAppt · 02.png — 02.png

newboys3075426724/HomeAppt · 03.png — 03.png

newboys3075426724/HomeAppt · 06.png — 06.png

newboys3075426724/HomeAppt · 07.png — 07.png

newboys3075426724/HomeAppt · 08.png — 08.png

newboys3075426724/HomeAppt · 09.png — 09.png

newboys3075426724/HomeAppt · 10.png — 10.png

newboys3075426724/HomeAppt · 11.png — 11.png

newboys3075426724/HomeAppt · 12.png — 12.png

newboys3075426724/HomeAppt · 13.png — 13.png

newboys3075426724/HomeAppt · 14.png — 14.png含二维码 15%

tanxiaohan1/WeSportHgithub.com/tanxiaohan1/WeSportH12 张

用户端 + 教练端 + 管理端，三端结构最贴近你的项目

tanxiaohan1/WeSportH · 01.png — 01.png

tanxiaohan1/WeSportH · 02.png — 02.png

tanxiaohan1/WeSportH · 05.png — 05.png

tanxiaohan1/WeSportH · 06.png — 06.png

tanxiaohan1/WeSportH · 07.png — 07.png

tanxiaohan1/WeSportH · 08.png — 08.png

tanxiaohan1/WeSportH · 09.png — 09.png

tanxiaohan1/WeSportH · 10.png — 10.png

tanxiaohan1/WeSportH · 11.png — 11.png

tanxiaohan1/WeSportH · 12.png — 12.png

tanxiaohan1/WeSportH · 13.png — 13.png

tanxiaohan1/WeSportH · 14.png — 14.png

woniudiancang/beegithub.com/woniudiancang/bee2 张

餐饮点单外卖三端，下单与订单流程可参考

woniudiancang/bee · 05.jpg — 05.jpg正方形，可能是码或拼图

woniudiancang/bee · 06.jpg — 06.jpg

03_商城下单流程

详情页 → 下单 → 支付 → 订单 → 我的，这条链路可以直接抄

EastWorld/wechat-app-mallgithub.com/EastWorld/wechat-app-mall1 张

2.1万★ 商城，下单闭环最完整

EastWorld/wechat-app-mall · 03.jpeg — 03.jpeg正方形，可能是码或拼图

UxxHans/Rainbow-Cats-Personal-WeChat-MiniProgramgithub.com/UxxHans/Rainbow-Cats-Personal-WeChat-MiniProgram1 张

任务 + 商城，个人中心做得细

UxxHans/Rainbow-Cats-Personal-WeChat-MiniProgram · 01.jpg — 01.jpg

Voyzz/Fruit-store-mpgithub.com/Voyzz/Fruit-store-mp2 张

水果商城，云开发，结构简单

Voyzz/Fruit-store-mp · 08.png — 08.png

Voyzz/Fruit-store-mp · 09.png — 09.png

hai-27/store-miniprogramgithub.com/hai-27/store-miniprogram3 张

仿小米商城，视觉规范值得看

hai-27/store-miniprogram · 03.png — 03.png

hai-27/store-miniprogram · 04.png — 04.png

hai-27/store-miniprogram · 06.png — 06.png

iamdarcy/hioshop-miniprogramgithub.com/iamdarcy/hioshop-miniprogram2 张

海风小店，开源可商用，界面干净

iamdarcy/hioshop-miniprogram · 03.jpeg — 03.jpeg正方形，可能是码或拼图

iamdarcy/hioshop-miniprogram · 04.jpeg — 04.jpeg

linlinjava/litemallgithub.com/linlinjava/litemall2 张

2万★ 商城，用户端 + 管理员端都齐

linlinjava/litemall · 01.png — 01.png

linlinjava/litemall · 02.png — 02.png

tumobi/nideshop-mini-programgithub.com/tumobi/nideshop-mini-program7 张

经典商城模板

tumobi/nideshop-mini-program · 01.webp — 01.webp

tumobi/nideshop-mini-program · 02.webp — 02.webp

tumobi/nideshop-mini-program · 03.webp — 03.webp

tumobi/nideshop-mini-program · 04.webp — 04.webp

tumobi/nideshop-mini-program · 05.webp — 05.webp

tumobi/nideshop-mini-program · 06.webp — 06.webp

tumobi/nideshop-mini-program · 07.webp — 07.webp

05_社交社区

榜单、动态、互动 —— 接单广场可以借鉴

Chef5/PopRungithub.com/Chef5/PopRun2 张

校园跑步社交，榜单与动态参考

Chef5/PopRun · 01.jpeg — 01.jpeg含二维码 26%

Chef5/PopRun · 02.jpeg — 02.jpeg

× ‹ ›