logo
0
0
WeChat Login

uniapp_vue3_new

基于 uni-app + Vue 3 的跨端应用项目,使用 uview-plusuni-ui 组件库,实现充电站/充电桩信息展示、订单列表与详情、以及城市天气展示等功能。


功能概览

  • 充电站模块
    • 附近充电站列表
    • 充电桩列表与状态展示
    • 充电站与充电桩详情(功率、电压、价格等)
  • 订单模块
    • 订单列表(进行中 / 待支付 / 已完成)
    • 订单详情(终端信息、充电信息、费用信息、支付信息)
  • 天气模块
    • 城市当日天气
    • 最近七天天气趋势
  • 接口说明
    • 根目录下的 接口文档.md 对所有已使用接口做了详细约定

技术栈

  • 框架与运行时
  • 组件库
    • uview-plus
    • uni-ui 各类通用组件(卡片、列表、表单等)
  • 工具与依赖(节选)
    • dayjs:日期处理
    • mqtt:MQTT 相关能力(如有使用)
    • uuid:生成唯一标识

完整依赖请参考根目录的 package.json


开发环境准备

  1. 安装 Node.js(建议 16+)
  2. 全局安装 @dcloudio/uni-cli(如果尚未安装,可通过 HBuilderX/官方文档配置)
  3. 在项目根目录安装依赖:
npm install

本地开发

在项目根目录执行以下脚本之一:

H5(浏览器)

npm run dev:h5

原生 App

npm run dev:app # 默认 app npm run dev:app-android # Android npm run dev:app-ios # iOS

小程序平台(示例)

npm run dev:mp-weixin # 微信小程序 npm run dev:mp-alipay # 支付宝小程序

更多平台脚本可在根目录的 package.json 中的 scripts 字段查看。


构建打包

H5 打包

npm run build:h5

App 打包

npm run build:app # 默认 app npm run build:app-android # Android npm run build:app-ios # iOS

小程序打包(示例)

npm run build:mp-weixin npm run build:mp-alipay

各平台打包产物目录由 uni-app 决定,具体可结合 manifest.json 配置或 HBuilderX 文档查看。


接口与数据

项目通过 src/utils/request.js 封装了统一的 HTTP 请求工具,所有已使用的服务端接口(路径、入参、响应结构)均整理在根目录的 接口文档.md 中。

如需对接或联调后台服务,可优先参考该文档。


代码结构简要说明

  • src/pages/index/:首页及充电站、充电桩相关页面
  • src/pages/order/:订单列表与订单详情
  • src/pages/weather/:天气展示页面
  • src/utils/:接口配置与请求封装等工具
  • src/uni_modules/:第三方/通用组件库(uni-ui、uview-plus 等)

后续可扩展方向

  • 接入真实账号体系与鉴权
  • 增加订单操作(结束充电、支付等)
  • 更丰富的图表分析与数据可视化

About

东软题库-小程序

Language
JavaScript75%
Vue24.2%
CSS0.2%
HTML0%
Others0.6%