本地生活小程序
本项目是一个基于微信小程序原生开发的本地生活服务平台,提供餐厅推荐、招聘信息、生活服务分类、近期活动展示等功能,是一个典型的O2O本地生活服务类小程序。
项目封面

项目说明
本地生活小程序
项目简介
本项目是一个基于微信小程序原生开发的本地生活服务平台,提供餐厅推荐、招聘信息、生活服务分类、近期活动展示等功能,是一个典型的O2O本地生活服务类小程序。
技术栈
| 技术 | 版本/说明 |
|---|---|
| 开发框架 | 微信小程序原生开发 |
| 基础库版本 | 3.3.0 |
| 渲染引擎 | Skyline (glass-easel组件框架) |
| 数据存储 | 本地 Storage + Mock数据 |
| UI框架 | 原生WXML + WXSS |
项目结构
localLife-min/
├── api.js # API接口与Mock数据
├── app.js # 小程序入口文件
├── app.json # 小程序全局配置
├── app.wxss # 全局样式
├── project.config.json # 项目配置文件
├── sitemap.json # 站点地图配置
├── imgs/ # 图片资源目录
│ ├── tabBar/ # 底部导航栏图标
│ ├── index/ # 首页相关图片
│ ├── hotel/ # 餐厅相关图片
│ └── ...
├── pages/ # 页面目录
│ ├── index/ # 首页
│ ├── my/ # 我的页面
│ ├── detail/ # 活动详情页
│ ├── hotel/ # 餐厅列表页
│ ├── hotelDetail/ # 餐厅详情页
│ ├── job/ # 招聘信息页
│ ├── more/ # 生活服务分类页
│ ├── info/ # 个人信息编辑页
│ └── collect/ # 我的收藏页
└── utils/ # 工具函数目录
└── util.js
功能模块
1. 首页模块 (pages/index)
- 轮播图展示:自动轮播的Banner广告位
- 功能入口:餐厅、生活服务、招聘三大入口
- 近期活动:展示本地近期活动列表,支持点击查看详情
2. 餐厅模块 (pages/hotel)
- 餐厅列表:展示本地餐厅信息(名称、地址、封面图)
- 餐厅详情:
- 餐厅基本信息展示
- 地图定位显示(使用微信地图组件)
- 菜单列表展示
- 收藏/取消收藏功能
3. 招聘模块 (pages/job)
- 展示本地招聘信息列表
- 包含职位名称、联系人、薪资等信息
4. 生活服务模块 (pages/more)
- 住房相关:房产中介、水管维修、家电维修、搬家等12项服务
- 生活服务:超市、教育培训、美容理发、宠物等22项服务
- 医疗保健:中医诊所、牙科、心理咨询等9项服务
- 生意服务:招租招商、快递服务、印刷复印等5项服务
5. 个人中心模块 (pages/my)
- 用户头像和昵称展示
- 个人信息编辑入口
- 我的收藏入口
6. 个人信息编辑 (pages/info)
- 修改头像(使用微信头像选择能力)
- 修改昵称
- 信息保存到本地Storage
7. 我的收藏 (pages/collect)
- 展示已收藏的餐厅列表
- 支持点击进入餐厅详情
数据说明
本项目采用纯前端Mock数据方式,无需后端服务:
- 活动数据:
fetchIndex()- 返回轮播图和活动列表 - 餐厅数据:
fetchHotelList()- 返回餐厅列表(含经纬度坐标) - 招聘数据:
fetchJobList()- 返回招聘信息列表 - 用户数据:使用
wx.getStorageSync/setStorageSync本地存储 - 收藏数据:使用本地Storage存储收藏的餐厅ID
页面路由
| 页面 | 路径 | 类型 |
|---|---|---|
| 首页 | pages/index/index | TabBar页面 |
| 我的 | pages/my/my | TabBar页面 |
| 活动详情 | pages/detail/detail | 普通页面 |
| 餐厅列表 | pages/hotel/hotel | 普通页面 |
| 餐厅详情 | pages/hotelDetail/hotelDetail | 普通页面 |
| 招聘信息 | pages/job/job | 普通页面 |
| 生活服务 | pages/more/more | 普通页面 |
| 个人信息 | pages/info/info | 普通页面 |
| 我的收藏 | pages/collect/collect | 普通页面 |
运行说明
环境要求
- 微信开发者工具(最新版本)
- 微信基础库 3.3.0 及以上
运行步骤
- 下载并安装 微信开发者工具
- 打开微信开发者工具,选择"导入项目"
- 选择
localLife-min目录 - 填入自己的 AppID(或使用测试号)
- 点击"编译"即可预览
注意事项
- 项目使用了 Skyline 渲染引擎,需要较新版本的基础库支持
- 微信登录功能需要真机调试或配置正确的 AppID 和 AppSecret
- 地图功能需要在真机上测试效果最佳
项目亮点
- 纯原生开发:无需任何第三方框架,代码简洁易懂
- 完整的本地生活服务分类:涵盖住房、生活、医疗、商业四大类近50项服务
- 地图集成:餐厅详情页集成微信地图组件,展示位置信息
- 本地数据持久化:用户信息和收藏数据使用Storage本地存储
- Skyline渲染引擎:采用新一代渲染引擎,性能更优
扩展建议
- 接入真实后端API,实现数据动态化
- 增加搜索功能
- 增加用户评价和评分系统
- 接入微信支付,实现在线预约/下单
- 增加消息通知功能
- 增加LBS定位,展示附近商家
效果展示
项目包含效果展示视频:本地生活-效果展示.mp4
截图位于 图片/ 目录下(1.png - 9.png)
项目类型:纯微信小程序(无后端)
适用场景:计算机设计、课程作业、小程序学习参考
难度等级:⭐⭐ 入门级
技术分类
包含内容
适用人群
学习参考与二次开发
关于 AI源码
AI源码 专注优质项目源码分享,提供完整源码、详细文档与技术支持,助力源码设计与课程作业。
相关推荐
查看全部 →
电影购票网站
基于原生 HTML、CSS、JavaScript 实现的 PC 端电影在线购票演示网站。数据使用本地 Mock 模拟,订单与座位占用状态通过浏览器 持久化,无需后端服务,直接用浏览器打开 即可运行。

家乡介绍小程序
这是一个家乡文化展示与旅游推荐的微信小程序,采用纯前端实现,使用本地Mock数据模拟后端接口。项目以广东省惠州市惠东县为示例,完整实现了景点浏览、美食推荐、乡镇介绍、历史回顾、收藏管理等核心功能,适合作为微信小程序开发学习项目或计算机设计参考。

乡村振兴三农小程序
这是一个乡村振兴与三农服务的微信小程序,采用纯前端实现,使用本地Mock数据模拟后端接口。项目完整实现了政策解读、农业科技、数字乡村、乡村旅游、农产品展销、乡风文明、人才振兴、基层党建、经验分享等核心功能模块,适合作为微信小程序开发学习项目或计算机设计参考。

图书借阅小程序
这是一个图书借阅管理的微信小程序,采用纯前端实现,使用本地Mock数据模拟后端接口。项目完整实现了图书浏览、分类筛选、搜索查询、收藏管理、借阅下单、订单管理等核心功能,适合作为微信小程序开发学习项目或计算机设计参考。

垃圾上门回收小程序
这是一个完整的垃圾上门回收服务平台,包含微信小程序端。系统实现了垃圾分类回收预约、订单管理、地址管理、系统配置等核心功能,采用Egg.js后端框架,适合作为微信小程序全栈开发学习项目或计算机设计参考。

物业管理系统
这是一个完整的智慧社区物业管理平台,包含H5移动端和PC管理后台。系统实现了通知公告、社区活动、访客管理、报修服务、失物招领、投诉建议、二手市场、分享墙、在线聊天等核心功能,采用前后端分离架构,适合作为Vue全栈开发学习项目或计算机设计参考。