乐于分享
好东西不私藏

依托 uni-app 跨端框架打造的城际拼车小程序

依托 uni-app 跨端框架打造的城际拼车小程序

一、产品概述

全国拼车是一款基于微信小程序开发的城际拼车出行信息发布与匹配工具。产品聚焦于解决城际间拼车需求的信息不对称问题,为有拼车出行需求的用户和提供拼车服务的司机搭建高效的信息对接平台,支持多端扩展(可适配App、H5、其他小程序等),具备操作便捷、功能贴合出行场景的核心特点。

二、核心功能

(一)用户端核心功能

1. 拼车信息检索:首页支持拼车信息搜索,可根据路线、时间、车型等条件筛选拼车列表,快速找到符合需求的拼车信息。

2. 拼车需求发布:支持自定义发布拼车需求,可填写拼车类型(人找车/货找车)、出行路线、出发/到达时间、联系方式等关键信息,发布流程简单高效。

3. 拼车详情交互:查看拼车详情信息,支持在线沟通、电话联系对方,实现需求方与供给方的快速对接。

4. 个人基础管理:支持城市切换,可维护个人资料信息,查看历史行程订单,管理个人拼车相关数据。

(二)师傅端核心功能

1. 入驻与审核:提供师傅入驻申请入口,可提交入驻资料,实时查看审核进度,完成身份认证与业务开通。

2. 抢单大厅:专属抢单大厅模块,分类展示人找车、货找车等拼车需求,支持师傅快速抢单。

3. 订单管理:抢单成功后,订单信息自动同步至行程页面,可统一管理已抢订单,便捷查看订单详情。

(三)通用功能

1. 消息中心:聚合各类消息通知,包括订单消息、系统通知、沟通消息等,及时掌握业务动态。

2. 个性化设置:个人中心支持会员管理、系统设置等操作,满足用户个性化使用需求。

三、项目架构

3.1目录结构

├── pages/                  # 主包 Tab 页面│   ├── index.vue           # 入口(Tab 容器)│   ├── home/               # 首页│   ├── trip/               # 行程│   ├── message/            # 消息│   ├── mine/               # 我的│   └── discovery/          # 发布入口├── homePages/              # 分包:首页相关├── messagePages/           # 分包:消息相关├── discoveryPages/         # 分包:发布需求├── minePages/              # 分包:个人中心├── driverPages/            # 分包:师傅抢单/入驻├── libs/                   # 业务公共模块│   ├── carpool.data.js     # Mock 拼车数据│   ├── driver.util.js      # 师傅业务工具│   ├── styles/common.scss  # 全局样式│   ├── components/         # 业务组件│   └── mixin/              # 页面 Mixin├── tuniao-ui/              # 图鸟 UI 组件库├── store/                  # Vuex├── uni_modules/            # uni 插件├── App.vue                 # 应用入口├── main.js                 # 启动文件├── pages.json              # 路由与分包配置└── manifest.json           # 应用配置

3.2路由与分包

- **主包**`pages/index`(Tab 容器,自定义导航 + 底部 TabBar)- **分包**`subPackages`):  - `homePages` — 详情、聊天、城市、司机等  - `discoveryPages` — 发布需求  - `minePages` — 资料、订单、会员、设置等  - `driverPages` — 抢单大厅、入驻、审核进度  - `messagePages` — 消息列表- **全局**`navigationStyle: "custom"`(全站自定义导航栏)

四、产品优势

(一)跨端适配能力

基于uni-app跨端框架开发,一套代码可编译适配微信小程序、App、H5等多平台,覆盖更广泛的用户使用场景,降低多端开发与维护成本。

(二)流畅的交互体验

1. UI设计规范统一:采用TuniaoUI组件库搭建核心界面,结合自定义业务组件,视觉风格统一;遵循明确的设计规范,如主题色(绿色#46C265)、强调色(橙色#FF7043)、统一圆角与响应式像素(rpx)布局,界面美观且符合用户视觉习惯。

2. 操作流程便捷:自定义导航栏与底部TabBar设计,核心功能(首页、行程、消息、我的)一键触达;发布需求、抢单等核心操作路径短,降低用户操作成本。

(三)灵活的架构设计

1. 分包加载优化:采用分包加载机制,将不同业务模块(首页、消息、发布需求、个人中心、师傅抢单/入驻)拆分至独立分包,有效减小主包体积,提升小程序启动速度与运行流畅度。

2. 状态管理高效:基于Vuex实现全局状态管理,结合本地存储持久化关键数据(用户信息、当前城市、司机认证状态等),保障用户操作数据不丢失,切换页面/重启小程序后状态可快速恢复。

(四)贴合业务的定制化能力

针对城际拼车业务场景,开发专属业务工具与组件(如司机业务工具、拼车数据处理、自定义表单/列表组件等),深度适配拼车出行的业务逻辑,满足用户与师傅的专属业务需求。

五、使用场景

1. 普通用户:跨城市出行时,希望通过拼车降低出行成本,或有小件货物城际运输需求,可发布/查找拼车信息,快速对接合适的司机/乘客。

2. 司机师傅:有闲置运力(车辆/时间),希望承接城际拼车订单获取收益,可通过抢单大厅接单,完成订单履约。

六、运行环境

核心运行平台为微信小程序,可兼容主流微信版本;扩展支持Android/iOS App、各类浏览器H5页面,适配不同设备与使用场景。

H5在线体验

更多前端模板示例

与此同时,为满足开发者多样化的使用需求,我们同步开源了其他相关项目;此外,我们也搭建了前端吐槽交流群,诚邀各位开发者加入,共话开发难题、共享行业经验。