文档说明

本文基于岗、课、赛、证一体化 uni-app 实训课程完整目录撰写，包含课程体系梳理、项目目录结构、核心实操代码、功能实现思路、学习成果总结，内容详实贴合实训考核标准，可直接作为实训报告、课程博文、竞赛作品集文档使用。

前言

当下跨端开发已经成为前端行业刚需，uni-app 凭借一次开发、多端分发、上手门槛低、配套生态完善的优势，成为在校实训、技能竞赛、企业小型移动端项目的主流技术方案。本次实训课程严格对标岗、课、赛、证四维评价标准，全程采用任务驱动式教学，先后落地两大实战项目：能源管理 APP（前端综合实训）、备忘录 uniCloud 云端项目（全栈云开发实训）。课程覆盖业务架构设计、环境搭建、页面组件开发、路由生命周期、原生 API、uCharts 可视化、uniCloud 云数据库 / 云函数全链路知识。下文结合完整课程目录、项目目录结构、核心代码案例、实操流程完成完整复盘。

一、课程导学：岗课赛证一体化标准体系

1.1 三大导学支撑模块

1.1.1 考核方案

课程考核分为过程分 + 项目成品分，考核维度：业务梳理文档、页面还原度、代码规范、交互逻辑、拓展功能、打包发布、云开发功能完整性，完全匹配职业技能证书、技能大赛评分细则。

1.1.2 历届学生优秀作品

优秀作品统一具备完整 4 大特征：规范目录分层、封装公共组件、图表可视化、云端数据持久化，可作为项目开发对标范本。

1.1.3 参考工具手册

配套工具文档：HBuilderX 快捷键手册、uni-app 官方组件 API、uCharts 图表文档、uniCloud 云开发操作手册。

1.2 任务：能源管理 APP 架构设计

1.2.1 能源管理 APP 业务分析

业务角色：设备管理员；核心业务：设备查看、能耗统计、数据可视化、能耗时段筛选；页面规划：启动页、总览首页、设备列表、能耗图表页。

1.2.2 能源管理 APP 业务梳理

业务流程图：打开 App→开屏广告启动页→底部 Tab 切换总览 / 设备 / 能耗页面→点击设备跳转详情→能耗图表筛选时间段查看数据。

二、项目 1：能源管理 APP 的开发准备

2.1 项目导学

本项目目标：掌握 uni-app 工程化搭建、环境配置、目录规范、底部导航配置，产出可打包发布的基础能源项目骨架。

2.2 任务 1：能源管理项目的创建和运行

2.2.1 【任务剖析】

掌握 HBuilderX 新建 uni-app 项目、模拟器 / 真机运行、打包发布完整流程，解决新手环境报错、多端适配基础问题。

2.2.2 【新知学习】uni-app 简介

uni-app 基于 Vue3 语法，一套代码编译到微信小程序、H5、Android/iOS App，内置大量原生封装组件与 API。

2.2.3 【新知学习】uni-app 环境搭建

必备工具：HBuilderX、微信开发者工具、手机模拟器；依赖：Node.js、App 真机运行基座。

2.2.4 【新知学习】能源管理 APP 的创建和运行

项目完整目录结构（能源管理 APP 基础骨架）

energy-manage/ ├── pages/ # 页面文件夹 │ ├── splash/ # 启动开屏页 │ │ └── splash.vue │ ├── index/ # 总览首页 │ │ └── index.vue │ ├── device/ # 设备列表页 │ │ └── device.vue │ ├── energy/ # 能耗图表页 │ │ └── energy.vue │ └── detail/ # 设备详情页 │ └── detail.vue ├── static/ # 静态资源：图片、图标 │ ├── tab/ # 底部导航图标 │ └── splash/ # 开屏广告图 ├── components/ # 自定义公共组件 ├── common/ # 公共样式、工具函数 │ ├── css/ │ │ └── global.scss │ └── js/ │ └── util.js ├── uni_modules/ # 第三方UI、uCharts插件 ├── pages.json # 全局页面、导航配置 ├── manifest.json # 项目打包、应用配置 ├── App.vue # 全局入口、全局样式 └── main.js # 全局挂载、引入插件

2.2.5 【新知学习】能源管理 APP 的打包和发布

H5 打包、小程序代码上传、App 云打包生成安装包流程，manifest.json 配置应用名称、图标、权限。

2.2.6 【任务实施】创建并运行项目

核心操作代码（pages.json 页面注册）

{ "pages": [ "pages/splash/splash", "pages/index/index", "pages/device/device", "pages/energy/energy", "pages/detail/detail" ], "window": { "navigationBarTitleText": "能源管理系统", "navigationBarBackgroundColor": "#007aff", "navigationBarTextStyle": "white" } }

2.2.7 【任务拓展】自定义打包图标、应用名称

2.3 任务 2：uni-app 基础知识

2.3.1 【新知学习】uni-app 开发规范

标签统一小写、样式使用 rpx 自适应、图片统一放 static、禁止全局污染样式。

2.3.2 【新知学习】uni-app 文件目录

pages 页面、static 静态资源、components 组件、uni_modules 第三方插件四大核心目录作用。

2.3.3 【新知学习】外部资源的引入

全局引入 scss、引入 uView UI、引入 uCharts 图表插件示例：

// main.js 引入全局UI库 import uView from 'uni_modules/uview-ui'; Vue.use(uView);

2.3.4 【新知学习】页面样式与布局

flex 弹性布局、rpx 自适应单位、全局样式统一引入 App.vue。

2.4 任务 3：能源管理 APP 底部导航栏

2.4.1 【任务剖析】pages.json 全局配置 tabBar

2.4.2~2.4.4 应用 / 页面 / 全局配置区分

• window：全局顶部标题样式

• page-style：单页面单独样式覆盖

• tabBar：底部导航全局配置

2.4.5 【任务实施】配置底部导航栏完整代码

pages.json tabBar 配置

"tabBar": { "color": "#666666", "selectedColor": "#007aff", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/index", "text": "总览", "iconPath": "static/tab/home.png", "selectedIconPath": "static/tab/home-active.png" }, { "pagePath": "pages/device/device", "text": "设备", "iconPath": "static/tab/device.png", "selectedIconPath": "static/tab/device-active.png" }, { "pagePath": "pages/energy/energy", "text": "能耗", "iconPath": "static/tab/chart.png", "selectedIconPath": "static/tab/chart-active.png" } ] }

三、项目 2：能源管理 APP 的页面开发

3.1 任务 1：启动页、首页、设备、能耗页面开发

3.1.1 【任务剖析】综合使用基础组件、扩展组件、自定义组件、图表插件

3.1.2 【新知学习】视图容器组件 view /scroll-view

3.1.3~3.1.4 开屏广告启动页实现 splash.vue

<template> <view class="splash-box"> <image src="/static/splash/ad.jpg" mode="aspectFill" class="ad-img"></image> </view> </template> <script> export default { onLoad() { // 3秒自动跳转到首页 setTimeout(()=>{ uni.switchTab({ url: "/pages/index/index" }) },3000) } } </script> <style scoped> .splash-box{ width: 100%; height: 100vh; } .ad-img{ width: 100%; height: 100%; } </style>

3.1.5 基础内容组件 text/image/button

3.1.6~3.1.7 总览首页 index.vue 核心代码（设备卡片循环渲染）

<template> <scroll-view scroll-y> <view class="title">能源总览</view> <view class="card-list"> <view class="card" v-for="(item,index) in deviceList" :key="index"> <text>设备名称：{{item.name}}</text> <text>实时能耗：{{item.power}}kw/h</text> </view> </view> </scroll-view> </template> <script> export default { data(){ return { deviceList:[ {name:"一号车间空调",power:12.6}, {name:"二号照明设备",power:4.2}, {name:"水泵机组",power:18.9} ] } } } </script>

3.1.8 扩展组件、自定义组件封装

新建 components/DeviceCard.vue 公共卡片组件，全局复用

3.1.9~3.1.10 设备列表页面，搜索列表渲染

3.1.11 自定义组件传参 props 示例

// 父页面调用 <DeviceCard :info="item" @click="goDetail(item)"></DeviceCard> // 子组件接收 props:["info"]

3.1.12 第三方 UI 库 uView 引入

3.1.13~3.1.14 uCharts 能耗图表页面 energy.vue 核心绘图代码

<canvas canvas-id="energyChart" class="chart"></canvas> <script> import uCharts from '@/uni_modules/u-charts'; export default { onReady(){ this.drawChart(); }, methods:{ drawChart(){ new uCharts({ canvasId:"energyChart", series:[{ name:"每日能耗", data:[12,15,18,14,16,20,17] }], xAxis:{ data:["周一","周二","周三","周四","周五","周六","周日"] } }) } } } </script>

3.1.15 任务拓展：时间段筛选图表，绑定 picker 切换重绘图表

3.2 任务 2：uni-app 路由和生命周期

3.2.2 路由跳转 API

// tab页面切换 uni.switchTab({url:"/pages/index/index"}) // 普通页面跳转，携带参数 uni.navigateTo({ url:`/pages/detail/detail?id=${item.id}&name=${item.name}` }) // 返回上一页 uni.navigateBack()

3.2.3 任务实施：设备列表点击跳转详情页，onLoad 接收参数

// detail.vue onLoad(options){ console.log("设备ID",options.id) console.log("设备名称",options.name) }

3.2.4 生命周期核心区分

• onLoad：页面加载，仅执行一次，接收路由参数

• onShow：页面每次显示执行，适合刷新数据

• onUnload：页面销毁

3.3 任务 3：常用 API（缓存、网络请求）

3.3.2 本地数据缓存 API

// 存储缓存 uni.setStorageSync('searchKey',this.keyword) // 读取缓存 let key = uni.getStorageSync('searchKey') // 删除缓存 uni.removeStorageSync('searchKey')

3.3.3 任务实施：本地缓存实现搜索功能

3.3.4 网络请求 uni.request

3.3.5 改造搜索为后端接口请求

search(){ uni.request({ url:"https://xxx/api/device/search", method:"GET", data:{ keyword:this.key }, success:res=>{ this.deviceList = res.data.list } }) }

四、项目 3：备忘录 APP 的 uniCloud 云开发实现

4.1 uniCloud 云开发基础

备忘录完整项目目录结构

memo-app/ ├── pages/ │ ├── login/ # 登录页 │ ├── register/ # 注册页 │ ├── home/ # 备忘录首页 │ ├── add-note/ # 新增笔记 │ └── edit-note/ # 编辑笔记 ├── static/ ├── components/ ├── common/ ├── uni_modules/ ├── cloudfunctions/ # 云函数目录 │ └── operateNote/ # 笔记增删改查云函数 ├── pages.json ├── manifest.json └── uniCloud-aliyun/ # 云数据库、云存储配置 └── database/ └── schema.json # 数据表结构

4.2 任务 1：备忘录开发前准备

4.2.2 uniCloud 环境配置：绑定云服务空间

4.2.3 云数据库操作（前端直接调用）

const db = uniCloud.database() // 查询当前用户笔记 db.collection('note').where({ uid:this.userInfo._id }).get().then(res=>{ this.noteList = res.result.data })

4.2.4 云函数调用示例

uniCloud.callFunction({ name:"operateNote", data:{ type:"add", title:this.title, content:this.content } }).then(res=>{})

4.3 任务 2：备忘录页面开发

4.3.1~4.3.2 用户注册登录（云数据库存储账号）

4.3.3 新增笔记页面：提交数据存入云端

4.3.4 首页：动态渲染当前用户全部笔记

4.3.5 删除 / 编辑笔记云端同步代码

// 删除笔记 db.collection("note").doc(noteId).remove() // 编辑更新 db.collection("note").doc(noteId).update({ title:newTitle, content:newContent })

4.3.6 笔记数量统计

let total = await db.collection('note').where({uid:user._id}).count() this.totalNum = total.result.total

4.3.7 Tab 选项卡动态读取云端分类数据

五、全套实训课程核心学习收获

1. 完整掌握 uni-app 工程目录规范 熟练区分页面、静态资源、公共组件、云函数、第三方插件分层目录，具备企业标准化项目搭建能力。

2. 掌握大量可复用业务代码 包含启动页倒计时、底部导航、列表循环、路由传参、本地缓存、网络请求、uCharts 图表、uniCloud 增删改查全套代码，可直接复用至竞赛与作业。

3. 双项目完整实战覆盖前后端全流程 能源管理 APP：纯前端综合页面、数据可视化、接口交互；备忘录 APP：uniCloud 零后端全栈开发、用户权限、云端持久化存储。

4. 贴合岗课赛证评价标准 课程体系匹配岗位开发要求、课程教学目标、技能大赛项目评分、职业技能证书实操考核，项目成品可直接作为参赛、求职作品集。

六、学习总结与后续提升规划

整套课程从业务架构分析到云开发全栈落地，目录层级清晰，理论配套大量实操代码与完整项目目录结构，规避纯理论空洞教学。 后续优化方向：

1. 封装统一网络请求工具类，简化接口代码；

2. 封装全局公共组件，减少页面冗余代码；

3. 优化 uniCloud 云函数逻辑，增加数据分页、模糊查询；

4. 完善能源管理图表多维度筛选、数据导出拓展功能。

结语

本次 uni-app 实训依托两大完整项目，搭配规范目录分层、完整可运行代码案例，构建了从页面搭建、交互开发到云端全栈开发的完整知识体系，严格落实岗课赛证一体化培养目标，为跨端开发、技能竞赛、前端实习打下坚实基础。