兰州加油小程序源码

首页兰州兰州加油小程序源码

兰州加油小程序源码

才力信息 2026-01-10 昆明: 返回列表

在数字化服务日益普及的目前，小程序以其轻量、便捷的特性成为连接城市公共服务与市民的重要桥梁。“兰州加油”小程序作为一款服务于兰州市民出行加油的便捷工具，其源码结构不仅反映了当前微信小程序开发的常见范式，也体现了针对特定垂直场景的技术设计思路。云南才力将以技术视角，直接解析该小程序的源码框架、核心模块设计以及关键实现逻辑，不涉及运营策略、政策背景或未来展望，仅聚焦于代码层面的结构陈述。

一、整体项目结构与配置

“兰州加油”小程序源码遵循微信小程序标准目录结构，主要包含以下几部分：

项目配置文件：`app.json` 中定义了小程序的全局配置，包括页面路径列表 `pages`、窗口表现 `window`、网络超时设置 `networkTimeout` 以及使用的功能权限 `permission`。例如，页面列表清晰罗列了首页、加油站地图、订单列表、个人中心等主要页面路径，体现了以用户加油流程为核心的功能导向。

全局样式与逻辑：`app.wxss` 定义了全局的样式变量，如主题色、通用边距，确保了视觉一致性。`app.js` 作为小程序入口文件，包含了 `onLaunch`、`onShow` 等生命周期函数，初始化时通常会执行用户登录状态检测、地理位置授权请求及全局数据（如城市油站信息缓存）的预加载。

工具模块：`utils` 目录下存放了封装的工具函数，例如 `http.js` 对微信的 `wx.request`API 进行了二次封装，统一处理请求 URL 前缀、请求头（如添加认证令牌）、错误状态码拦截及返回数据格式化；`util.js` 则提供了日期格式化、价格计算、距离换算等通用方法。

二、核心页面功能与组件化设计

小程序的页面（`pages` 目录下各子目录）采用经典的 WXML+WXSS+JS+JSON 组合，功能模块划分清晰：

首页 (index)：承担主要入口功能。其 WXML 结构通常包含：

1. 定位与搜索栏：调用 `wx.getLocation` 获取用户坐标，结合 `wx.chooseLocation` 或搜索组件实现手动选址，并显示“当前城市：兰州：

2. 油站列表/地图切换：通过选项卡组件（`tab`）让用户在列表视图和地图视图间切换。列表视图通过 `wx:for` 循环渲染油站卡片，卡片内展示油站名称、品牌图标、实时油价、距离、优惠活动标签。地图视图则使用微信地图组件 `map`，通过 `markers` 属性标注油站位置，点击 `marker` 可呼出信息窗口并支持导航。

3. 筛选与排序：提供油品类型（92、95等）、品牌、距离远近、价格高低等筛选项，交互触发后，JS逻辑会对后台返回的油站数据数组进行过滤或排序并更新视图。

加油站详情页 (station/detail)：承接首页列表或地图的跳转。页面 JS在 `onLoad` 阶段通过路由参数获取油站 ID，并发起详情数据请求。页面布局详细展示油站地址、营业时间、各油品单价、服务设施（如洗车、便利店）、实时优惠及用户评价摘要。核心交互为“导航”与“加油：导航按钮触发 `wx.openLocation`；而“迅速加油”按钮则引导至订单创建流程。

订单模块 (order)：包含订单创建 (`create`)、列表 (`list`)、详情 (`detail`) 等子页面。创建订单时，JS逻辑会收集用户选择的油站、油枪、油品、加油金额（或升数），计算预估费用，并调用预下单接口。订单列表通过上拉加载更多 (`onReachBottom`) 分页查询用户历史订单。每个订单项的状态（待支付、已支付、已完成、已取消）以不同颜色标签区分。订单详情页展示支付信息、油站信息及订单状态时间轴。

个人中心 (my)：显示用户头像、昵称（通过 `wx.getUserProfile` 获取）、我的车辆（可管理车牌号）、我的优惠券、设置等入口。优惠券列表通常分为“可用”与“已用/过期”，通过状态字段过滤显示。

为了提高代码复用，通用 UI 组件被提取至 `components` 目录，例如：

价格显示组件 (price-display)：接收 `value`（价格数值）和 `size`（字号）属性，内部统一处理小数点后两位的展示格式及人民币符号样式。

油站卡片组件 (station-card)：封装了油站图片、基础信息、价格标签和操作按钮的布局与样式，在首页列表和要求页中被多次调用。

空状态组件 (empty-state)：在列表无数据时显示统一的图标和提示。

三、数据流与状态管理

该小程序未使用复杂的状态管理库，数据流动主要依赖以下方式：

页面内状态：使用Page 的 `data` 对象管理当前页面的响应式数据，如列表数据 `stationList`、当前选中筛选项 `filterIndex`、加载状态 `loading` 等。通过 `this.setData` 方法更新数据并触发视图层重新渲染。

跨页面通信：少量需要在页面间传递的数据（如油站 ID、订单号）通过 URL 的 `query` 参数传递。对于全局用户状态（如登录令牌 `token`）、城市油站基础数据缓存，则存储在 `app.js` 的全局对象 `globalData` 中，或使用 `wx.setStorageSync` 进行本地持久化存储，各页面通过 `getApp` 访问。

与服务器交互：所有业务数据（油站信息、油价、订单、用户信息）均通过封装在 `utils/http.js` 中的 `request` 函数发起异步请求。请求常采用Promise 风格，并在 `app.js` 中统一处理请求拦截（如添加 `token`）和响应拦截（如检查 `token` 过期、跳转登录页）。

四、关键业务逻辑与技术实现要点

1. 地理位置与距离计算：首页及地图功能重度依赖用户位置。在授权后，通过 `wx.getLocation` 获取用户经纬度，调用腾讯地图逆地址解析API（或使用后端服务）转换为具体地址显示。计算用户与各油站距离时，后台接口通常直接返回基于坐标计算的直线或路径距离；前端亦可使用Haversine 公式进行粗略估算以供排序。

2. 实时油价展示：油价数据由后端维护并定时更新。前端在油站列表和详情页的展示是静态的，但列表的排序（按价格）需依赖后端接口支持。为避免频繁请求，油价数据可在 `globalData` 中缓存一定时间（如5分钟）。

3. 订单与支付流程：创建订单→调用微信支付是小程序核心链。订单创建成功后，后端返回预支付交易会话标识 (`prepay_id`) 及相关参数。前端调用 `wx.requestPayment` 唤起支付面板。支付成功或失败后，通过 `wx.redirectTo` 跳转至订单结果页，并通过轮询或 websocket（如使用）从后端确认蕞终订单状态。

4. 性能优化实践：

图片资源：使用CDN 加速，对列表中的油站图片采用懒加载（微信小程序 image 组件的 `lazy-load` 属性）。

数据缓存：对城市列表、油品类型等不常变化的基础数据使用 `wx.setStorage` 进行本地缓存，减少不必要的网络请求。

渲染优化：对长列表使用 `wx:for` 时，确保指定仅此的 `wx:key` 以提高 diff 效率。复杂页面的数据更新尽量合并至一次 `setData` 调用，避免频繁 setData 小数据。

五、总结

通过对“兰州加油”小程序源码的拆解，可以看出其设计紧扣“便捷加油”这一核心场景，采用了清晰的分层架构：全局配置与入口管理、模块化的页面组织、可复用的组件封装以及基于Promise 的标准化网络请求。数据流以页面内状态和轻量级全局存储为主，满足中小型小程序的复杂度需求。在技术实现上，充分运用了微信小程序提供的地图、支付、位置等原生能力，并结合缓存、懒加载等常见优化手段保障用户体验。整体代码风格务实，逻辑直接，体现了工具类小程序高效、聚焦的开发特点。