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

一、前言：为什么选择"本地生活"作为入门案例？

"本地生活"类小程序（如美团、大众点评）是综合性极强的典型场景，涵盖：

轮播广告
搜索栏
分类导航（图标网格）
商品/服务列表
下拉刷新 & 上拉加载

通过实现一个简化版首页，你能快速掌握：

✅ WXML 布局语法

✅ WXSS 样式编写

✅ 组件使用（swiper、scroll-view 等）

✅ 页面生命周期与数据绑定

本文将带你从零搭建一个高仿本地生活首页，代码可直接用于学习或项目原型！

二、最终效果预览

功能模块：

顶部搜索栏
轮播图（banner）
分类导航（8个常用服务图标）
推荐服务列表（带图片、标题、评分、价格）

三、项目结构初始化

在微信开发者工具中新建项目，目录结构如下：

复制代码

local-life/
├── pages/
│   └── index/
│       ├── index.js
│       ├── index.json
│       ├── index.wxml
│       └── index.wxss
├── app.js
├── app.json
├── app.wxss
└── images/          # 存放图标和 banner 图片

四、页面配置（index.json）

javascript 复制代码

{
  "navigationBarTitleText": "本地生活",
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "dark"
}

✅ 开启下拉刷新，提升用户体验。

五、核心逻辑：index.js（数据驱动）

javascript 复制代码

// pages/index/index.js
Page({
  data: {
    // 轮播图数据
    banners: [
      '/images/banner1.jpg',
      '/images/banner2.jpg',
      '/images/banner3.jpg'
    ],
    
    // 分类导航
    categories: [
      { icon: '/images/icon_food.png', name: '美食' },
      { icon: '/images/icon_hotel.png', name: '酒店' },
      { icon: '/images/icon_movie.png', name: '电影' },
      { icon: '/images/icon_ktv.png', name: 'KTV' },
      { icon: '/images/icon_takeout.png', name: '外卖' },
      { icon: '/images/icon_travel.png', name: '旅游' },
      { icon: '/images/icon_beauty.png', name: '美容' },
      { icon: '/images/icon_sports.png', name: '健身' }
    ],

    // 推荐服务列表
    services: [
      {
        id: 1,
        image: '/images/service1.jpg',
        title: '【五星级】香格里拉酒店',
        rating: 4.8,
        sales: '已售 2345',
        price: 599,
        originalPrice: 899
      },
      {
        id: 2,
        image: '/images/service2.jpg',
        title: '海底捞火锅 2人套餐',
        rating: 4.9,
        sales: '已售 8921',
        price: 198,
        originalPrice: 298
      }
      // 可继续添加 mock 数据
    ]
  },

  // 下拉刷新
  onPullDownRefresh() {
    console.log('下拉刷新');
    // 模拟请求新数据
    setTimeout(() => {
      wx.stopPullDownRefresh();
    }, 1000);
  },

  // 跳转详情页（预留）
  goToDetail(e) {
    const id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: `/pages/detail/detail?id=${id}`
    });
  }
});

💡 提示：图片资源需提前放入 images 文件夹。

六、页面结构：index.wxml

javascript 复制代码

<!-- pages/index/index.wxml -->
<view class="container">
  <!-- 搜索栏 -->
  <view class="search-bar">
    <view class="search-input">🔍 搜索商家、商品、服务</view>
  </view>

  <!-- 轮播图 -->
  <swiper 
    class="banner-swiper" 
    indicator-dots 
    autoplay 
    interval="3000" 
    circular>
    <block wx:for="{{banners}}" wx:key="index">
      <swiper-item>
        <image src="{{item}}" class="banner-img" mode="aspectFill" />
      </swiper-item>
    </block>
  </swiper>

  <!-- 分类导航 -->
  <view class="category-grid">
    <view 
      class="category-item" 
      wx:for="{{categories}}" 
      wx:key="name">
      <image src="{{item.icon}}" class="category-icon" />
      <text class="category-name">{{item.name}}</text>
    </view>
  </view>

  <!-- 推荐服务 -->
  <view class="service-list">
    <view 
      class="service-item" 
      wx:for="{{services}}" 
      wx:key="id"
      bindtap="goToDetail"
      data-id="{{item.id}}">
      <image src="{{item.image}}" class="service-img" />
      <view class="service-info">
        <view class="service-title">{{item.title}}</view>
        <view class="service-meta">
          <text class="rating">⭐ {{item.rating}}</text>
          <text class="sales">{{item.sales}}</text>
        </view>
        <view class="service-price">
          <text class="current-price">¥{{item.price}}</text>
          <text class="original-price">¥{{item.originalPrice}}</text>
        </view>
      </view>
    </view>
  </view>
</view>

七、样式美化：index.wxss

javascript 复制代码

/* pages/index/index.wxss */
.container {
  padding: 0 16rpx;
  background-color: #f5f5f5;
}

/* 搜索栏 */
.search-bar {
  padding: 20rpx 0;
  text-align: center;
}
.search-input {
  display: inline-block;
  width: 90%;
  height: 60rpx;
  line-height: 60rpx;
  background: white;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #999;
}

/* 轮播图 */
.banner-swiper {
  height: 300rpx;
  border-radius: 16rpx;
  overflow: hidden;
}
.banner-img {
  width: 100%;
  height: 100%;
}

/* 分类导航 */
.category-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx 0;
}
.category-item {
  width: 22%;
  text-align: center;
  margin-bottom: 30rpx;
}
.category-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}
.category-name {
  font-size: 24rpx;
  color: #333;
}

/* 服务列表 */
.service-list {
  padding: 20rpx 0;
}
.service-item {
  display: flex;
  background: white;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
}
.service-img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 12rpx;
  margin-right: 20rpx;
}
.service-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.service-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.service-meta {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 24rpx;
}
.rating {
  color: #ff9900;
}
.sales {
  color: #666;
}
.service-price {
  display: flex;
  align-items: center;
}
.current-price {
  font-size: 32rpx;
  color: #e74c3c;
  font-weight: bold;
}
.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
  margin-left: 10rpx;
}

八、关键知识点总结

功能	使用的技术
轮播图	`<swiper>` + `<swiper-item>`
列表渲染	`wx:for` + `wx:key`
事件绑定	`bindtap` + `data-*` 传参
下拉刷新	`onPullDownRefresh` + `wx.stopPullDownRefresh()`
响应式布局	Flex 布局 + rpx 单位

九、扩展建议（进阶方向）

接入真实 API ：用 wx.request 替换 mock 数据
上拉加载更多 ：监听 onReachBottom
添加骨架屏：提升加载体验
集成地图定位：显示附近商家
加入购物车功能：使用全局状态管理

十、结语

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