微信小程序案例 - 本地生活（首页） - 教程

一、前言

随着微信小程序生态的不断壮大，越来越多的生活服务类 App 开始以小程序的形式落地。本篇文章将以一个典型的“本地生活”类小程序为例，详细讲解其首页页面的开发流程和实现思路。

我们将从零开始构建一个具有如下功能模块的首页：

✅ 轮播图广告位
✅ 分类导航图标区域
✅ 热门推荐商家列表
✅ 底部 TabBar 导航栏

并通过 WXML、WXSS 和 JS 的结合使用，带你完成整个页面的搭建与数据渲染。

二、项目结构说明

? 目录结构示意：

project/
├── app.js
├── app.json
├── app.wxss
├── pages/
│   └── index/
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
└── components/
└── category/
├── category.js
├── category.json
├── category.wxml
└── category.wxss

? 本文主要聚焦于 pages/index 首页的实现。

三、首页功能模块划分

我们将首页划分为以下几个核心模块：

模块	描述
轮播图 Banner	展示广告或活动信息
分类导航区	提供美食、外卖、电影等分类入口
推荐商家列表	显示热门或附近的商家信息

四、页面结构搭建（WXML）

✅ index.wxml 结构代码：

{{item.name}}
{{item.name}}
{{item.desc}}
￥{{item.price}} 起

五、样式布局设计（WXSS）

✅ index.wxss 样式代码：

.container {
padding: 20rpx;
}
.banner image {
width: 100%;
height: 300rpx;
border-radius: 16rpx;
}
.category {
display: flex;
flex-wrap: wrap;
margin-top: 40rpx;
}
.category-item {
width: 20%;
text-align: center;
margin-bottom: 30rpx;
}
.category-item .icon {
width: 80rpx;
height: 80rpx;
margin-bottom: 10rpx;
}
.recommend .shop-card {
display: flex;
margin-bottom: 30rpx;
background-color: #f9f9f9;
border-radius: 12rpx;
overflow: hidden;
}
.shop-card .shop-img {
width: 200rpx;
height: 160rpx;
}
.shop-info {
flex: 1;
padding: 20rpx;
justify-content: space-between;
}
.shop-info .name {
font-size: 32rpx;
font-weight: bold;
}
.shop-info .desc {
color: #666;
font-size: 26rpx;
margin-top: 10rpx;
display: block;
}
.shop-info .price {
color: #ff4444;
font-size: 28rpx;
margin-top: 10rpx;
}

六、数据模拟与绑定（JS）

✅ index.js 示例代码：

Page({
data: {
banners: [
{ id: 1, imgUrl: 'https://example.com/banner1.jpg' },
{ id: 2, imgUrl: 'https://example.com/banner2.jpg' }
],
categories: [
{ id: 1, name: '美食', icon: 'https://example.com/icon_food.png' },
{ id: 2, name: '外卖', icon: 'https://example.com/icon_takeout.png' },
{ id: 3, name: '电影', icon: 'https://example.com/icon_movie.png' },
{ id: 4, name: '酒店', icon: 'https://example.com/icon_hotel.png' }
],
shops: [
{
id: 1,
name: '海底捞火锅',
desc: '正宗川味火锅，服务一流',
price: 88,
cover: 'https://example.com/shop1.jpg'
},
{
id: 2,
name: '星巴克咖啡',
desc: '现磨咖啡，环境优雅',
price: 28,
cover: 'https://example.com/shop2.jpg'
}
]
},
onCategoryTap(e) {
const categoryId = e.currentTarget.dataset.id;
wx.showToast({ title: '进入分类 ' + categoryId });
},
onShopDetail(e) {
const shopId = e.currentTarget.dataset.id;
wx.navigateTo({
url: `/pages/shop/detail?id=${shopId}`
});
}
});

七、全局配置（app.json）

为了支持底部 TabBar，我们还需要配置全局文件：

✅ app.json 示例：

{
"pages": ["pages/index/index", "pages/logs/logs"],
"window": {
"navigationBarTitleText": "本地生活",
"navigationStyle": "custom"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/icon_home.png",
"selectedIconPath": "images/icon_home_active.png"
},
{
"pagePath": "pages/category/category",
"text": "分类",
"iconPath": "images/icon_category.png",
"selectedIconPath": "images/icon_category_active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "images/icon_cart.png",
"selectedIconPath": "images/icon_cart_active.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "images/icon_user.png",
"selectedIconPath": "images/icon_user_active.png"
}
]
}
}

八、实际开发建议与最佳实践

场景	建议
组件复用	✅ 将分类、店铺卡片等封装为独立组件
图片懒加载	✅ 使用 mode="aspectFill" 并设置占位图
接口请求	✅ 后续可替换静态数据为真实接口数据
用户体验	✅ 添加 Loading 动画提升感知流畅度
性能优化	✅ 控制图片大小、避免过度嵌套
适配性	✅ 多设备测试，优先使用 rpx 单位

九、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！