电车续航计算小程序_系统开发案例-程序员客栈

技术信息

语言技术
CSS、JavaScript系统类型
小程序轻应用行业分类
生活旅游、汽车

作品详情

行业场景

当时市面上很多电车，续航计算使用固定的曲线，不能根据实际情况动态评估续航，导致计算不准确。

功能介绍

1. 记录车辆数据节点：添加“剩余里程”和“当前电量百分比”，节点按时间/添加顺序保存。
2. 续航计算
3. 百公里电耗
4. 续航曲线图，横坐标显示剩余里程，并反向递减，符合剩余里程随时间减少的阅读习惯，纵坐标固定显示 0%–100% 电量
5. 数据点自动缩放、连线显示
6. 迷你电耗变化图：在电池容量按钮旁显示简化电耗曲线，仅展示趋势线，不显示坐标轴和标题。
7. 电池容量设置：可设置电池容量（kWh），用于计算电耗。数据本地持久化，使用 wx.setStorage / wx.getStorage 保存电池容量和节点数据。
8. 清空数据：支持一键清空所有节点，并同步清除图表和本地存储。

项目实现

运行平台：微信小程序
开发框架：微信小程序原生框架
页面使用 Page({}) 注册
生命周期：onLoad、onReady、onShow

编程语言：JavaScript：业务逻辑、数据计算、图表绘制

WXML：页面结构模板
WXSS / SCSS：页面样式，SCSS 编译为 WXSS

UI 与布局：微信小程序原生组件：view、text、button、input、canvas、scroll-view
Flex 布局
rpx / px 单位
渐变、阴影、圆角等 CSS 样式
图表绘制
微信小程序 Canvas API
使用 wx.createCanvasContext('mainChart')
使用 wx.createCanvasContext('miniChart')
手写绘制坐标轴、曲线、数据点、网格线、渐变区域等

数据存储：微信小程序本地存储 API：wx.setStorage、wx.getStorage、wx.removeStorage
微信小程序 API

wx.getSystemInfoSync
wx.createSelectorQuery
wx.showModal
wx.showToast
wx.createCanvasContext

开发工具：微信开发者工具

SCSS 预处理（通过小程序开发工具或构建配置编译为 WXSS）