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

一、前言

随着微信小程序生态的不断壮大，越来越多的生活服务类 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 首页的实现。

三、首页功能模块划分

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

四、页面结构搭建（WXML）

✅ index.wxml 结构代码：

<view class="container"><!-- 轮播图 --><swiper class="banner" indicator-dots="{{true}}" autoplay="{{true}}"><block wx:for="{{banners}}" wx:key="id"><swiper-item><image src="{{item.imgUrl}}" mode="aspectFill" /></swiper-item></block></swiper><!-- 分类导航 --><view class="category"><block wx:for="{{categories}}" wx:key="id"><view class="category-item" bindtap="onCategoryTap" data-id="{{item.id}}"><image class="icon" src="{{item.icon}}" /><text>{{item.name}}</text></view></block></view><!-- 推荐商家 --><view class="recommend"><block wx:for="{{shops}}" wx:key="id"><view class="shop-card" bindtap="onShopDetail" data-id="{{item.id}}"><image class="shop-img" src="{{item.cover}}" mode="aspectFill" /><view class="shop-info"><text class="name">{{item.name}}</text><text class="desc">{{item.desc}}</text><text class="price">￥{{item.price}} 起</text></view></view></block></view>
</view>

五、样式布局设计（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"}]}
}

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

九、结语

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