智慧能源管理APP开发实战——基于uni-app的跨端开发全流程复盘

在移动端跨平台开发飞速发展的当下，uni-app凭借“一次开发、多端发布”的核心优势，已成为前端开发者入门跨端开发的首选框架。本文围绕“岗、课、赛、证”四维标准，以智慧能源管理APP（前端交互实战）和备忘录云开发APP（uniCloud全栈实战）两大项目为主线，系统梳理了从项目架构设计、环境搭建、页面开发到云端部署的完整知识体系。文章结合真实开发流程与核心代码，详细阐述了uni-app开发规范、组件封装、路由生命周期、网络请求及云端开发等关键技术，适合uni-app新手入门学习与课程作业提交参考。

一、课程导学——岗、课、赛、证标准

1.1 课程设计理念

本次课程摒弃纯理论灌输，全面对标企业移动端前端岗位需求、职业技能竞赛题型及1+X证书实操考点搭建课程体系。课程整体分为四大阶段：课程导学、能源管理APP基础开发、能源管理APP进阶页面开发、备忘录uniCloud云开发，知识点由浅入深、项目实战层层递进。

1.2 考核方案

课前通过明确的考核方案引导学习目标，考核维度涵盖：

过程性考核：每次任务实施完成度与代码规范性
阶段性考核：每个项目结束后的功能演示与代码评审
终结性考核：完整项目打包发布与答辩汇报

1.3 历届学生优秀作品

参考历届优秀作品规范项目代码风格与页面效果，提炼优秀作品共性特征：

代码结构清晰、注释完整
页面交互流畅、视觉风格统一
功能完整覆盖业务需求
具备多端适配能力

1.4 参考工具手册

uni-app官方文档
HBuilderX使用指南
uView UI组件库文档
uCharts图表库文档
uniCloud开发手册

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

2.1 项目导学

能源管理APP面向设备能耗监控场景，核心业务涵盖设备信息展示、实时能耗统计、图表可视化、数据筛选及页面详情跳转等功能。本项目目标是掌握uni-app从零到一的搭建流程，包括项目创建、运行、基础配置及打包发布全套操作。

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

2.2.1 任务剖析

本任务旨在完成开发环境配置与项目初始化，解决新手常见的运行报错、端口占用、模拟器不识别等问题。

2.2.2 uni-app简介

uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、鸿蒙Next、Web（响应式）以及各类小程序等多个平台。DCloud平台拥有900万开发者、数百万应用、12亿手机端月活用户，生态成熟可靠。

与传统原生开发相比，uni-app具备以下核心优势：

学习成本低：基于Vue语法+微信小程序API，无额外学习成本
开发效率高：一套代码多端发布，研发效率至少翻倍
性能体验优秀：加载新页面速度更快，App端支持原生渲染
周边生态丰富：插件市场拥有数千款插件

2.2.3 uni-app环境搭建

开发工具准备：

下载安装HBuilderX（官方推荐IDE）
安装微信开发者工具（用于小程序调试）
配置Android模拟器或iOS模拟器
准备真机调试环境

常见问题解决方案：

端口占用：修改HBuilderX默认端口或关闭占用进程
模拟器不识别：检查ADB驱动安装与设备连接状态
编译报错：确认Node.js版本与项目依赖完整性

2.2.4 能源管理APP的创建和运行

新建uni-app项目的标准流程：

打开HBuilderX → 文件 → 新建 → 项目
选择uni-app模板，填写项目名称
选择默认模板或uni-ui模板
点击创建，等待项目初始化完成

2.2.5 能源管理APP的打包和发布

bash

# HBuilderX中打包操作
发行 → 原生App-云打包 → 配置证书信息 → 打包
发行 → 小程序-微信 → 生成小程序代码
发行 → H5 → 生成H5部署包

2.2.6 任务实施

使用HBuilderX创建能源管理APP并运行至各平台验证。

2.2.7 任务拓展

尝试将项目运行至不同平台（微信小程序、H5、Android APP），对比各平台渲染效果差异。

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

2.3.1 uni-app开发规范

代码缩进：统一使用2空格或4空格缩进
命名规则：组件名采用PascalCase，文件名采用kebab-case
注释规范：关键逻辑必须添加注释说明
路径引用：使用@别名指向src目录

2.3.2 uni-app文件目录

目录/文件	作用说明
`pages/`	所有页面文件存放目录，包含页面Vue文件、样式及逻辑代码
`static/`	静态资源目录，存放图片、图标等资源（必须放置于此以确保正常编译）
`components/`	自定义组件目录，存放全局可复用组件
`uni_modules/`	uni-app插件市场安装的第三方组件及UI库
`App.vue`	项目全局入口文件，配置全局样式与全局生命周期
`main.js`	全局脚本入口，用于挂载全局方法与变量
`pages.json`	核心配置文件，管理页面路由、导航栏及底部tabbar
`manifest.json`	应用配置文件，配置应用名称、图标、权限等

2.3.3 外部资源的引入

javascript

// 引入第三方样式
@import "@/static/css/common.css";

// 引入静态图片
<image src="/static/images/logo.png"></image>

// 引入第三方库
import uView from '@/uni_modules/uview-ui'

2.3.4 uni-app的页面样式与布局

使用rpx作为主要样式单位，自动适配不同屏幕宽度
采用flex弹性布局实现多端适配
针对iOS底部安全区域进行适配处理

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

2.4.1 uni-app的基础配置

底部导航栏是APP的核心骨架，所有uni-app项目均在pages.json中配置tabbar。

2.4.2 应用配置（manifest.json）

配置应用名称、版本号、图标、启动页及权限声明。

2.4.3 页面配置（pages.json中的pages数组）

定义页面路径与导航栏样式：

json

"pages": [
  {
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "能源总览"
    }
  }
]

2.4.4 全局配置（pages.json中的globalStyle）

配置全局导航栏默认样式、背景色等。

2.4.5 任务实施：配置底部导航栏和标题栏

通过自定义导航文字、图标及选中颜色，完成底部导航搭建：

json

"tabBar": {
  "color": "#666666",
  "selectedColor": "#2979ff",
  "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"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "static/tab/mine.png",
      "selectedIconPath": "static/tab/mine_active.png"
    }
  ]
}

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

3.1 任务1：能源管理APP启动页、首页页面开发

3.1.1 任务剖析

本阶段目标是掌握uni-app核心组件使用，完成启动页开屏广告、总览页面、设备列表页面、能耗统计页面的开发。

3.1.2 uni-app组件——视图容器

uni-app提供view、scroll-view、swiper等视图容器组件，是页面布局的基础。

3.1.3 启动页——开屏广告制作

利用view、image、text组件实现开屏页布局，通过定时器实现3秒自动跳转：

javascript

onShow() {
  setTimeout(() => {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }, 3000)
}

3.1.5 uni-app组件——基础内容

text文本组件、icon图标组件、progress进度条组件等基础内容组件。

3.1.6 “总览”页面制作

总览页面展示核心能耗数据卡片，包含今日能耗、设备总数、在线率等关键指标。

3.1.8 uni-app扩展组件

扩展组件需要通过uni_modules方式安装使用，如uni-card、uni-list等。

3.1.9 “设备列表”页面制作

设备列表采用v-for循环渲染设备条目，支持搜索筛选功能。

3.1.11 uni-app自定义组件

将列表项、卡片等可复用模块封装为自定义组件，通过父组件传参实现复用：

vue

<!-- 设备卡片组件 -->
<template>
  <view class="device-card" @click="onClick">
    <image :src="device.icon"></image>
    <text>{{ device.name }}</text>
    <text>{{ device.status === 1 ? '在线' : '离线' }}</text>
  </view>
</template>

<script>
export default {
  props: {
    device: {
      type: Object,
      required: true
    }
  },
  methods: {
    onClick() {
      this.$emit('click', this.device)
    }
  }
}
</script>

3.1.12 第三方UI库的使用

引入uView第三方UI库，运用卡片、渐变、边框圆角等样式优化页面视觉效果。

3.1.13 使用uCharts绘制图表

引入uCharts图表组件实现能耗数据可视化，展示日/月/年不同维度的能耗趋势。

3.1.14 完成“能耗”页面制作

能耗页面集成图表展示与数据统计功能。

3.1.15 图表增加时间段筛选功能

通过picker选择器实现时间段筛选，动态刷新图表数据：

vue

<template>
  <view>
    <picker mode="date" @change="onDateChange">
      <view>{{ selectedDate }}</view>
    </picker>
    <qiun-data-charts :chartData="chartData" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '2026-06-18',
      chartData: {}
    }
  },
  methods: {
    onDateChange(e) {
      this.selectedDate = e.detail.value
      this.fetchEnergyData(this.selectedDate)
    },
    async fetchEnergyData(date) {
      const res = await this.$request('/api/energy/statistics', { date })
      this.chartData = this.formatChartData(res)
    }
  }
}
</script>

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

3.2.1 任务剖析

理解uni-app路由跳转方式与页面生命周期钩子是实现页面交互的核心。

3.2.2 uni-app的路由操作

常用跳转方式及适用场景：

API	说明	使用场景
`uni.switchTab`	跳转至tabBar页面	底部导航切换
`uni.navigateTo`	保留当前页面跳转	详情页跳转
`uni.redirectTo`	关闭当前页面跳转	登录页跳转
`uni.navigateBack`	返回上一页面	返回操作

3.2.3 完成项目跳转详情页效果

设备列表点击跳转详情页并传参：

javascript

goDetail(item) {
  uni.navigateTo({
    url: `/pages/detail/detail?id=${item.id}&name=${encodeURIComponent(item.name)}`
  })
}

详情页接收参数：

javascript

onLoad(options) {
  this.id = options.id
  this.name = decodeURIComponent(options.name || '')
  this.fetchDeviceDetail(this.id)
}

3.2.4 uni-app的生命周期

核心生命周期钩子及其用途：

钩子	触发时机	典型用途
`onLoad`	页面初次加载	接收参数、首次数据请求
`onShow`	页面每次显示	刷新数据、恢复状态
`onReady`	页面初次渲染完成	操作DOM、初始化图表
`onUnload`	页面卸载	清理定时器、释放资源

3.3 任务3：常用API

3.3.1 任务剖析

掌握uni-app本地缓存与网络请求API，实现静态页面到动态交互的升级。

3.3.2 数据的缓存

javascript

// 存储数据
uni.setStorageSync('deviceList', this.deviceList)

// 获取数据
let list = uni.getStorageSync('deviceList')

// 移除数据
uni.removeStorageSync('deviceList')

// 清空所有缓存
uni.clearStorageSync()

3.3.3 完成页面搜索功能

结合本地缓存实现设备搜索匹配。

3.3.4 网络请求API

javascript

uni.request({
  url: 'https://xxx.xxx.com/device/list',
  method: 'GET',
  data: {
    keyword: this.searchVal,
    page: 1,
    pageSize: 20
  },
  success: (res) => {
    if (res.statusCode === 200) {
      this.deviceList = res.data.list
    }
  },
  fail: (err) => {
    uni.showToast({ title: '请求失败', icon: 'none' })
  }
})

3.3.5 搜索页改成网络请求方式

将本地搜索升级为实时网络搜索，贴近企业开发实际场景。

3.3.6 任务拓展

封装全局网络请求模块，集成请求拦截、错误处理与Loading提示：

javascript

// utils/request.js
const BASE_URL = 'https://xxx.xxx.com'

export const request = (options) => {
  return new Promise((resolve, reject) => {
    uni.showLoading({ title: '加载中...' })
    
    uni.request({
      url: BASE_URL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Authorization': 'Bearer ' + uni.getStorageSync('token'),
        ...options.header
      },
      success: (res) => {
        uni.hideLoading()
        if (res.statusCode === 200 && res.data.code === 0) {
          resolve(res.data.data)
        } else {
          uni.showToast({ title: res.data.msg || '请求失败', icon: 'none' })
          reject(res.data.msg)
        }
      },
      fail: (err) => {
        uni.hideLoading()
        uni.showToast({ title: '网络异常', icon: 'none' })
        reject(err)
      }
    })
  })
}

四、项目3：备忘录APP的实现

4.1 uniCloud简介

uniCloud是uni-app配套的云端服务，核心包含三大模块：云数据库、云函数、云存储。无需搭建服务器、无需编写后端接口，即可快速实现全栈开发，极大降低了全栈开发门槛。

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

4.2.1 任务剖析

完成uniCloud环境配置、服务空间创建、云数据库权限开启，为备忘录功能开发提供云端支撑。

4.2.2 uniCloud的环境配置

登录DCloud开发者中心
创建服务空间（选择阿里云或腾讯云）
在项目中关联服务空间
配置云数据库权限

4.2.3 云数据库

云数据库是uniCloud的核心服务，支持直接在云端进行数据增删改查操作：

javascript

const db = uniCloud.database()
const collection = db.collection('note')

4.2.4 云函数

云函数运行在云端Node.js环境中，可用于处理复杂业务逻辑、数据校验与权限控制：

javascript

// cloudfunctions/note-add/index.js
const db = uniCloud.database()
const uniID = require('uni-id')

exports.main = async (event, context) => {
  // 用户身份校验
  const { uid } = await uniID.checkToken(event.uniIdToken)
  if (!uid) {
    return { code: 401, msg: '请先登录' }
  }
  
  // 参数校验
  const { title, content, category } = event
  if (!title || title.length > 50) {
    return { code: 400, msg: '标题不能为空且长度不超过50字符' }
  }
  
  // 数据入库
  const result = await db.collection('note').add({
    title,
    content,
    category: category || '默认',
    userId: uid,
    createTime: Date.now(),
    updateTime: Date.now()
  })
  
  return { code: 0, data: { _id: result.id }, msg: '添加成功' }
}

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

4.3.1 用户注册和登录页面开发

集成uni-id实现用户身份认证，实现用户数据隔离。

4.3.2 完成注册页和登录页

注册页包含用户名、密码、确认密码等表单字段，登录页支持账号密码登录。

4.3.3 添加笔记页面开发

javascript

async addNote() {
  if (!this.title.trim()) {
    uni.showToast({ title: '请输入标题', icon: 'none' })
    return
  }
  
  const db = uniCloud.database()
  const res = await db.collection('note').add({
    title: this.title,
    content: this.content,
    category: this.category,
    createTime: Date.now()
  })
  
  if (res.id) {
    uni.showToast({ title: '添加成功' })
    this.title = ''
    this.content = ''
    this.getNoteList()
  }
}

4.3.4 备忘录首页

首页展示笔记列表，支持按分类Tab筛选。

4.3.5 笔记删除与编辑

javascript

// 删除笔记
async delNote(id) {
  const db = uniCloud.database()
  await db.collection('note').doc(id).remove()
  uni.showToast({ title: '删除成功' })
  this.getNoteList()
}

// 编辑笔记
async updateNote(id, data) {
  const db = uniCloud.database()
  await db.collection('note').doc(id).update({
    ...data,
    updateTime: Date.now()
  })
  uni.showToast({ title: '更新成功' })
  this.getNoteList()
}

4.3.6 笔记数量统计和显示当前用户笔记数据

首页顶部展示笔记总数、分类统计等信息，确保不同用户仅看到自己的笔记数据。

4.3.7 Tab选项卡动态读取数据

根据笔记分类数据动态渲染Tab栏，通过v-for循环生成标签，替代静态写死Tab：

vue

<template>
  <view>
    <view class="tabs">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="['tab-item', { active: currentTab === tab.value }]"
        @click="switchTab(tab.value)"
      >
        {{ tab.label }}
      </view>
    </view>
    <view class="note-list">
      <view v-for="note in filteredNotes" :key="note._id">
        {{ note.title }}
      </view>
    </view>
  </view>
</template>

五、多端适配与项目优化

5.1 跨端差异处理

uni-app支持多端编译，但各平台在API支持、样式渲染上存在差异，通过条件编译处理：

vue

<template>
  <view>
    <!-- #ifdef APP-PLUS -->
    <button @click="handleAppPay">App端支付</button>
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <button @click="handleWxPay">微信小程序支付</button>
    <!-- #endif -->
  </view>
</template>

5.2 性能优化

图片优化：使用WebP格式、懒加载
代码分包：非首屏页面拆分为独立子包
列表优化：虚拟列表处理长列表数据

5.3 状态管理

使用Vuex管理全局状态，实现跨页面数据共享与持久化。

六、学习总结与展望

本次uni-app课程通过两大完整实战项目，系统构建了从基础语法、页面布局、组件封装、路由交互、网络请求到云端全栈开发的完整知识体系。

核心收获：

能源管理APP：熟练掌握uni-app前端页面开发、数据可视化及原生API使用
备忘录云开发APP：突破前端局限，实现数据云端存储与全栈功能开发

未来规划：

新增数据分页、权限校验、消息推送等功能
深入学习原生模块集成与性能调优
打造可上线商用的完整移动端应用

uni-app“一次开发，多端适配”的特性，极大提升了开发效率，特别适合中小型移动端项目的快速迭代，是前端开发者拓展跨端能力的理想选择。

EazyDevelop社区

一站式 AI 云服务平台

更多推荐

细胞注释还在手动查文献？这个零代码国产数据库上传即用

做单细胞测序的同学都知道，拿到聚类结果只是万里长征第一步，真正的"噩梦"是。当你面对几十个甚至上百个cluster，每个cluster里几百个差异基因，你需要的不是耐心，而是一个能告诉你"这个cluster大概率是什么细胞"的。今天给大家介绍一个由百创智造（BMKMANU）推出的在线工具——，这可能是目前国内最实用的单细胞自动注释平台之一。

EazyDevelop社区

数据抽取-使用助睿ETL 抽取多种文件数据

EazyDevelop社区

CAN 转 4G 数据采集上云评测：IPCSUN GC112 + 捷宸云，零代码快速搭建工业远程监控

EazyDevelop社区

所有评论(0)

查看更多评论

LUOCHUNdechuntia

@LUOCHUNdechuntia

已为社区贡献2条内容

智慧能源管理APP开发实战——基于uni-app的跨端开发全流程复盘

LUOCHUNdechuntia

摘要

一、课程导学——岗、课、赛、证标准

1.1 课程设计理念

1.2 考核方案

1.3 历届学生优秀作品

1.4 参考工具手册

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

2.1 项目导学

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

2.2.1 任务剖析

2.2.2 uni-app简介

2.2.3 uni-app环境搭建

2.2.4 能源管理APP的创建和运行

2.2.5 能源管理APP的打包和发布

2.2.6 任务实施

2.2.7 任务拓展

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

2.3.1 uni-app开发规范

2.3.2 uni-app文件目录

2.3.3 外部资源的引入

2.3.4 uni-app的页面样式与布局

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

2.4.1 uni-app的基础配置

2.4.2 应用配置（manifest.json）

2.4.3 页面配置（pages.json中的pages数组）

2.4.4 全局配置（pages.json中的globalStyle）

2.4.5 任务实施：配置底部导航栏和标题栏

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

3.1 任务1：能源管理APP启动页、首页页面开发

3.1.1 任务剖析

3.1.2 uni-app组件——视图容器

3.1.3 启动页——开屏广告制作

3.1.5 uni-app组件——基础内容

3.1.6 “总览”页面制作

3.1.8 uni-app扩展组件

3.1.9 “设备列表”页面制作

3.1.11 uni-app自定义组件

3.1.12 第三方UI库的使用

3.1.13 使用uCharts绘制图表

3.1.14 完成“能耗”页面制作

3.1.15 图表增加时间段筛选功能

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

3.2.1 任务剖析

3.2.2 uni-app的路由操作

3.2.3 完成项目跳转详情页效果

3.2.4 uni-app的生命周期

3.3 任务3：常用API

3.3.1 任务剖析

3.3.2 数据的缓存

3.3.3 完成页面搜索功能

3.3.4 网络请求API

3.3.5 搜索页改成网络请求方式

3.3.6 任务拓展

四、项目3：备忘录APP的实现

4.1 uniCloud简介

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

4.2.1 任务剖析

4.2.2 uniCloud的环境配置

4.2.3 云数据库

4.2.4 云函数

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

4.3.1 用户注册和登录页面开发

4.3.2 完成注册页和登录页

4.3.3 添加笔记页面开发

4.3.4 备忘录首页

4.3.5 笔记删除与编辑

4.3.6 笔记数量统计和显示当前用户笔记数据

4.3.7 Tab选项卡动态读取数据

五、多端适配与项目优化

5.1 跨端差异处理

5.2 性能优化

5.3 状态管理

六、学习总结与展望

所有评论(0)

温馨提示：您尚未绑定手机号

LUOCHUNdechuntia