当前位置: 首页 > news >正文

微信小程序案例 - 本地生活(首页)

一、前言

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

<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"}]}
}

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

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

九、结语

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

http://www.dtcms.com/a/276841.html

相关文章:

  • 代码随想录|图论|15并查集理论基础
  • 算法学习笔记:18.拉斯维加斯算法 ——从原理到实战,涵盖 LeetCode 与考研 408 例题
  • RFCOMM协议详解:串口仿真与TCP/IP协议栈移植技术——面试高频考点与真题解析
  • 1.2.3_2 TCP/IP模型
  • Java小白-设计模式
  • 动态规划理论基础,LeetCode 509. 斐波那契数
  • 012_PDF处理与文档分析
  • jenkins使用Jenkinsfile部署springboot+docker项目
  • 011_视觉能力与图像处理
  • Docker 搭建本地Harbor私有镜像仓库
  • Rerank模型
  • 【Linux学习笔记】认识信号和信号的产生
  • C++随笔
  • iOS高级开发工程师面试——关于优化
  • Datawhale 2025 AI夏令营 MCP Server Task2
  • 一文认识并学会c++模板(初阶)
  • 基于无人机 RTK 和 yolov8 的目标定位算法
  • ESP32使用freertos更新lvgl控件内容
  • 【时间之外】尘封的智能套件复活记
  • 数据结构与算法之美:跳表
  • 【CMake】CMake构建项目入门
  • 数据标注:AI时代的黄金矿场如何规避法律暗礁
  • C语言习题三
  • HCIA--- OSPF动态路由实验
  • 基于springboot+Vue的二手物品交易的设计与实现(免费分享)
  • 《棒垒球知识科普》技巧赛规则·棒球1号位
  • houdini 用 vellum 制作一个最简单的布料
  • Windows环境下JS计时器精度差异揭秘
  • PyQt5布局管理:QHBoxLayout和QVBoxLayout详解
  • cmd命令之for循环