DM-ROW 接口文档

Appearance

UniApp移动端开发 ​

**本文引用的文件** - [App.vue](file://app/devicemate-app/App.vue) - [main.js](file://app/devicemate-app/main.js) - [pages.json](file://app/devicemate-app/pages.json) - [manifest.json](file://app/devicemate-app/manifest.json) - [index.js（uView UI）](file://app/devicemate-app/uview-ui/index.js) - [index.js（Vuex Store）](file://app/devicemate-app/store/index.js) - [$request 封装](file://app/devicemate-app/config/request.js) - [用户 Mixin](file://app/devicemate-app/utils/userMixins.js) - [字典 Mixin](file://app/devicemate-app/utils/dictMixins.js) - [国际化配置](file://app/devicemate-app/locale/index.js) - [设备管理首页](file://app/devicemate-app/modules/equipment/equipment.vue) - [维护任务首页](file://app/devicemate-app/modules/maintain/maintain.vue) - [维修任务首页](file://app/devicemate-app/modules/repair/repair.vue) - [巡检任务首页](file://app/devicemate-app/modules/inspectTasks/inspectTasks.vue) - [uView TabBar 组件](file://app/devicemate-app/uview-ui/components/u-tabbar/u-tabbar.vue)

目录 ​

  1. 简介
  2. 项目结构
  3. 核心组件
  4. 架构总览
  5. 详细组件分析
  6. 依赖关系分析
  7. 性能考虑
  8. 故障排查指南
  9. 结论
  10. 附录

简介 ​

本指南面向 DeviceMate UniApp 移动端应用的开发者，系统讲解 UniApp 核心概念、项目结构与开发模式；详解页面路由与 TabBar 设置、导航栏与标题国际化、页面样式与主题定制；深入说明 uView UI 组件库的使用、属性配置与样式扩展；梳理模块化开发模式，覆盖设备管理、维护管理、巡检管理、维修管理等业务模块；给出组件开发规范、事件处理机制、状态管理方案与数据绑定实践；并提供调试技巧与性能优化建议，帮助快速掌握 UniApp 移动端开发。

项目结构 ​

  • 应用入口与全局配置
    • 应用生命周期与权限跳转：App.vue
    • 入口脚本与全局注册：main.js
    • 页面路由与 TabBar：pages.json
    • 应用清单与平台能力：manifest.json
  • UI 框架与主题
    • uView UI 注册与全局工具：uview-ui/index.js
    • 全局 SCSS 主题与样式：uni.scss、uview-ui/theme.scss
  • 状态管理
    • Vuex Store 入口与模块：store/index.js
  • 网络与国际化
    • 请求封装与拦截：config/request.js
    • 国际化配置：locale/index.js
  • 通用 Mixin
    • 用户权限与菜单：utils/userMixins.js
    • 字典查询与名称映射：utils/dictMixins.js
  • 业务模块
    • 设备管理首页：modules/equipment/equipment.vue
    • 维护任务首页：modules/maintain/maintain.vue
    • 巡检任务首页：modules/inspectTasks/inspectTasks.vue
    • 维修任务首页：modules/repair/repair.vue
  • 组件库与第三方
    • uView 组件：uview-ui/components/u-/u-.vue
    • 下拉刷新滚动：components/mescroll-uni/*
    • 图标字体：static/iconfont/*

图表来源

章节来源

核心组件 ​

  • 应用入口与生命周期
    • App.vue：应用启动、登录态处理、消息与升级检测、权限跳转、工厂加载
    • main.js：uView 注册、全局组件注册、HTTP 挂载、提示工具、国际化与 Store 挂载
  • 路由与 TabBar
    • pages.json：页面列表、导航栏标题国际化占位符、TabBar 配置、平台特性（titleNView）
    • manifest.json：应用名、版本、平台权限与打包配置
  • UI 与主题
    • uview-ui/index.js：全局 mixin、过滤器、工具方法、$u 挂载
    • uview-ui/theme.scss、uni.scss：主题变量与全局样式
  • 状态与网络
    • store/index.js：Vuex 模块入口
    • config/request.js：统一请求封装、鉴权头、错误提示、网络状态监听、国际化头
  • 国际化与通用逻辑
    • locale/index.js：多语言配置与默认语言选择
    • utils/userMixins.js：权限判断、菜单过滤、工厂加载、TabBar 可见性控制
    • utils/dictMixins.js：字典查询与名称映射

章节来源

架构总览 ​

应用采用“入口脚本 + 路由配置 + UI 组件库 + 状态与网络 + 业务模块”的分层架构。入口脚本负责全局插件与工具挂载；路由配置决定页面与 TabBar；UI 组件库提供统一交互与主题；状态与网络模块提供跨页面共享与数据访问；业务模块围绕设备、维护、巡检、维修四大领域展开。

图表来源

详细组件分析 ​

页面路由与 TabBar 配置 ​

  • 页面列表与导航栏
    • pages.json 中 pages 数组定义页面路径与 style，支持导航栏标题国际化占位符（如 %tarBar.store%）、自定义导航风格（navigationStyle: custom）、下拉刷新开关等
    • globalStyle 定义全局导航栏文字颜色、标题文本与背景色
  • TabBar 设置
    • tabBar.list 定义四个 Tab：门店、设备、消息、我的，含图标路径与选中态图标、文字标签（支持国际化占位符）
    • 颜色、边框、背景色可统一配置
  • 平台特性
    • app-plus.titleNView 支持在特定页面设置导航栏右侧按钮（如提交），并可指定字体图标资源

图表来源

章节来源

导航栏与标题国际化 ​

  • 导航栏标题通过占位符从国际化资源动态解析，例如 %tarBar.store%、%tarBarTitle.equipment%
  • pages.json 中为每个页面设置 navigationBarTitleText 或使用占位符
  • 国际化资源由 locale/index.js 提供，根据系统语言或缓存语言选择

章节来源

页面样式与主题定制 ​

  • 全局样式
    • App.vue 中引入 uView 与图标字体样式，设置 page 背景色与高度
    • uni.scss 提供全局 SCSS 变量，uview-ui/theme.scss 提供 uView 主题变量
  • 页面级样式
    • 业务页面通过 scoped SCSS 控制布局与颜色，复用 uni-* 变量实现一致的主题风格

章节来源

uView UI 组件库使用 ​

  • 注册与工具
    • main.js 中引入 uView 并 Vue.use(uView)，全局挂载 $u 工具与过滤器
    • uview-ui/index.js 暴露路由、时间、颜色、校验、防抖节流等工具方法
  • 组件使用
    • 页面中直接使用 uView 组件（如 u-select、u-search、u-modal 等）
    • 通过 props 配置组件行为（如 activeColor、inactiveColor、list 等）

图表来源

章节来源

模块化开发模式 ​

  • 设备管理
    • equipment.vue：设备列表、筛选、搜索、扫码、分页加载、字典映射、跳转详情
  • 维护管理
    • maintain.vue：维护工单列表、状态筛选、操作按钮（派单、执行、记录异常、确认/驳回）、字典映射
  • 巡检管理
    • inspectTasks.vue：巡检工单列表、状态筛选、操作按钮（派单、执行、记录异常、确认/驳回）、字典映射
  • 维修管理
    • repair.vue：维修工单列表、状态筛选、签收、执行、派单、确认/驳回、字典映射

图表来源

章节来源

事件处理机制与数据绑定 ​

  • 事件绑定
    • 页面通过 onNavigationBarButtonTap 处理导航栏右侧按钮事件（如扫码）
    • 页面通过 uView 组件事件（如 @confirm、@search、@clear）与方法绑定
  • 数据绑定
    • v-model 实现输入框与 paramsData 的双向绑定
    • v-for 渲染列表，结合 getDictName 实现字典名称展示
  • 状态更新
    • 通过 $store.dispatch 传递业务参数（如派单、记录异常）
    • 通过 $http.post 更新工单状态并刷新列表

章节来源

状态管理方案 ​

  • Vuex 入口
    • store/index.js 引入 modules 并创建 Store 实例
  • 业务状态
    • 通过 $store.dispatch 触发模块动作，如 setAssignUrl、setHistory、setRepair，用于跨页面传递参数与状态

章节来源

组件开发规范 ​

  • 页面结构
    • 使用 mescroll-body 实现下拉刷新与上拉加载
    • 使用 uView 组件（u-select、u-search、u-modal 等）提升一致性
  • 交互与事件
    • 导航栏按钮统一在 onNavigationBarButtonTap 中处理
    • 输入与筛选通过 v-model 与方法绑定
  • 数据与字典
    • 通过 dictMixins.getDict 获取字典，getDictName 展示名称
  • 状态与跳转
    • 使用 $store.dispatch 传递业务参数，再通过 uni.navigateTo 跳转

章节来源

依赖关系分析 ​

  • 入口与全局
    • main.js 依赖 uView、Store、$request、i18n
    • App.vue 依赖 userMixins、$http、$db、checkUpgrade
  • 页面与通用
    • 业务页面依赖 MescrollMixin、dictMixins、$http、$store、$db
  • UI 与主题
    • uView 组件依赖 uview-ui/theme.scss 与 uni.scss 变量
  • 路由与清单
    • pages.json 决定页面与 TabBar；manifest.json 决定平台能力与打包配置

图表来源

章节来源

性能考虑 ​

  • 列表渲染
    • 使用 mescroll-body 实现虚拟滚动与分页加载，避免一次性渲染大量数据
  • 网络请求
    • 统一请求封装中设置超时与错误提示，减少无效重试
    • 在页面 onShow 中按需 resetUpScroll，避免重复加载
  • 图片与资源
    • 列表图片懒加载与占位图，降低首屏压力
  • 主题与样式
    • 复用 uni.scss 与 uview-ui/theme.scss 变量，减少重复计算与样式冲突

[本节为通用指导，无需具体文件分析]

故障排查指南 ​

  • 登录与权限
    • App.vue 中 onShow 处理外部参数登录与权限跳转，若无权限或菜单为空，将 reLaunch 到我的页面
  • 网络状态
    • $request 封装监听网络状态变化，无网络时提示并阻断请求
  • 401 与 Token 失效
    • $request 在 complete 中处理 401，清理本地用户信息并跳转登录页
  • 字典与名称映射
    • 若 getDictName 返回 “--”，检查字典键值是否匹配或接口返回是否正确
  • 国际化
    • 若导航栏标题未显示，检查 pages.json 中占位符是否在 locale 资源中存在

章节来源

结论 ​

DeviceMate UniApp 应用以清晰的分层架构与模块化组织实现了设备、维护、巡检、维修等业务场景。通过统一的 UI 组件库、状态管理与网络封装，开发者可以高效构建一致性的移动端体验。遵循本文的路由与 TabBar 配置、国际化策略、组件开发规范与性能优化建议，可显著提升开发效率与应用质量。

[本节为总结，无需具体文件分析]

附录 ​

[本节为附录，无需具体文件分析]