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

一、前言

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

九、结语

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