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

一、前言

随着微信小程序生态的不断壮大，越来越多的生活服务类 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` 结构代码：

html 复制代码

<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` 样式代码：

css 复制代码

.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` 示例代码：

javascript 复制代码

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` 示例：

javascript 复制代码

{
  "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` 单位

九、结语

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