✨ 博客简介
在Web应用开发课程中，除了后端SpringBoot开发，前端跨平台开发是非常重要的实训内容。传统开发需要分别开发H5、微信小程序、APP三套代码，开发效率极低。
本文基于课程实训要求，详细讲解UniApp 跨平台开发全流程：环境搭建、项目创建、目录结构、页面开发、云数据库整合、登录权限拦截、多端适配、项目发布。全程实战落地，适合课程总结、作业提交、CSDN发表。
关键词：UniApp、跨平台开发、HBuilderX、uniCloud、前端工程化、多端适配
一、前言：为什么要学习 UniApp？
在移动互联网时代，一个项目往往需要同时适配：
手机浏览器 H5 网页
微信小程序
安卓 / iOS 客户端 APP
如果采用传统开发模式，需要维护三套独立代码，存在：开发成本高、迭代慢、BUG不一致、维护困难等问题。
UniApp是 DCloud 推出的基于 Vue2 的跨平台开发框架，核心理念：
一次编码，多端发布
只需编写一套代码，即可编译出 H5、小程序、APP 等多个端项目，是目前高校 Web 应用开发、移动开发课程的主流技术栈。
二、UniApp 开发环境搭建（课程标准步骤）
2.1 所需开发工具
UniApp 开发仅需两款核心工具，环境配置零难度：
HBuilderX（APP开发版）：官方IDE，内置编译、运行、打包、云开发功能
微信开发者工具：用于小程序预览、调试、上传代码
2.2 环境搭建步骤
步骤1：安装 HBuilderX
官网下载 APP 开发版，解压即用，无需配置环境变量，开箱即可开发 UniApp 项目。
步骤2：安装微信开发者工具
安装完成后，在设置中开启「服务端口」，保证 HBuilderX 可以实时调用模拟器运行项目。
步骤3：环境校验
打开 HBuilderX，新建项目可正常运行、可唤起浏览器和小程序模拟器，即代表环境搭建成功。
三、快速创建 UniApp 标准项目
3.1 新建项目流程
1. 文件 → 新建 → 项目
2. 选择「UniApp」默认模板
3. 填写项目名称、保存路径
4. 点击创建，自动生成标准化项目结构
3.2 核心目录结构讲解（考试重点）
UniApp 目录高度规范，所有课程项目都遵循该结构：
pages：所有页面文件（业务核心目录）
static：静态资源（图片、图标，仅该目录可打包）
components：公共组件
uniCloud：云函数、云数据库配置
pages.json：全局路由、导航栏、tabBar 配置文件
App.vue：全局样式、全局生命周期
main.js：项目入口
3.3 项目运行方式
HBuilderX 提供一键运行：
运行到浏览器 → 预览 H5 效果
运行到微信开发者工具 → 预览小程序效果
运行到真机/模拟器 → 预览 APP 效果
四、UniApp 核心语法特点（与Vue区别）
UniApp 完全兼容 Vue2 语法，但为了适配多端，有少量专属规范，也是课程考点：
4.1 跨平台标签规范
Web 的 div、span 不能通用，必须使用跨平台标签：
view 代替 div（容器）
text 代替 span（文本）
image 代替 img（图片）
input / textarea 表单输入
4.2 专属单位 rpx
UniApp 采用rpx 自适应单位，750rpx 为全屏宽度，自动适配所有手机屏幕，解决多端样式错乱问题。
4.3 通用跨端 API
UniApp 封装统一 API，一套代码全端可用：
相比传统开发，UniApp 极大降低了多端开发成本，非常适合课程实训、毕业设计和小型商业项目开发。
数据缓存：uni.getStorageSync / uni.removeStorageSync
弹窗提示：uni.showToast / uni.showModal
页面跳转：uni.navigateTo / uni.reLaunch
五、UniCloud 云开发（无后端开发核心）
UniApp 最大优势就是内置uniCloud 云开发，无需 Java、Python 后端，学生可独立完成完整项目。
5.1 绑定云服务空间
右键项目 → uniCloud → 绑定云服务空间，登录阿里云即可免费使用数据库、云函数、存储。
5.2 云数据库实战
以课程笔记项目为例，创建
noteInfo集合，实现笔记新增、查询、修改、删除。通过 userId 绑定用户手机号，实现数据隔离，不同用户只能查看自己的数据。5.3 云函数安全处理
前端代码可被篡改，敏感操作如「注销账号、批量删除数据」必须使用云函数执行，保证项目安全性。
六、项目核心功能：登录权限拦截（课程必做）
完整项目必须具备权限控制：未登录用户禁止访问主页、笔记页、编辑页。
实现方案：页面 onLoad 延迟校验登录态，提升用户体验。
onLoad() { //延迟1秒跳转，优化页面体验 setTimeout(() => { let phone = uni.getStorageSync('userPhone') if(!phone){ uni.reLaunch({ url:"/pages/reglogin/newlogin" }) } },1000) }该逻辑适用于所有需要登录的页面，是课程考核重点。下面拓展整套项目实战核心代码，包含：页面延迟鉴权、笔记查询、新增、删除、搜索、注销完整业务代码，可直接运行。
6.1 通用页面登录拦截代码（所有权限页面通用）
为防止用户未登录直接通过链接访问核心页面，给笔记首页、添加页、编辑页统一配置1秒延迟鉴权，优化页面加载体验：
// 页面加载延迟鉴权 onLoad() { // 延迟1秒校验，避免页面闪现瞬间跳转 setTimeout(() => { const userPhone = uni.getStorageSync('userPhone') // 无登录信息强制跳转登录页，关闭页面栈无法返回 if (!userPhone) { uni.reLaunch({ url: '/pages/reglogin/newlogin' }) } }, 1000) }6.2 笔记首页数据查询代码（按用户隔离数据）
通过本地存储的用户手机号作为唯一标识，查询当前用户专属笔记，实现多用户数据隔离，按创建时间倒序展示：
async getNoteData() { try { // 初始化云数据库 const db = uniCloud.database() // 获取当前登录用户手机号 const tel = String(uni.getStorageSync('userPhone')).trim() console.log('当前登录用户：', tel) // 条件查询：只查询当前用户笔记，时间倒序 let res = await db.collection('noteInfo') .where({ userId: tel }) .orderBy('createTime', 'desc') .get() // 赋值渲染页面 this.noteList = res.result.data || [] } catch (e) { console.error('笔记查询失败：', e) uni.showToast({ title: '数据加载失败', icon: 'none' }) } }6.3 笔记新增保存代码（添加页面核心逻辑）
做非空校验、加载防抖，防止重复提交，绑定用户ID存入数据库：
async save() { if (this.loading) return // 去除首尾空格校验 const title = this.title.trim() const content = this.content.trim() // 表单非空校验 if (!title) { uni.showToast({ title: '请输入标题', icon: 'none' }) return } if (!content) { uni.showToast({ title: '请输入内容', icon: 'none' }) return } this.loading = true try { const db = uniCloud.database() const tel = String(uni.getStorageSync('userPhone')).trim() // 二次校验登录状态 if (!tel) { uni.showToast({ title: '请先登录！', icon: 'none' }) this.loading = false return } // 新增笔记数据 await db.collection('noteInfo').add({ title, content, userId: tel, createTime: Date.now() }) uni.showToast({ title: '保存成功' }) // 清空输入框 this.title = '' this.content = '' // 返回笔记列表页 uni.switchTab({ url: '/pages/index/bwl' }) } catch (err) { uni.showToast({ title: '保存失败', icon: 'none' }) console.log('保存报错：', err) } finally { this.loading = false } }6.4 笔记删除功能代码
弹窗二次确认，防止误删，删除后实时刷新列表数据：
async delNote(id) { uni.showModal({ title: '提示', content: '确定删除这条笔记？', success: async (res) => { if (res.confirm) { const db = uniCloud.database() // 根据文档ID删除对应笔记 await db.collection('noteInfo').doc(id).remove() uni.showToast({ title: '删除成功' }) // 刷新笔记列表 this.getNoteData() } } }) }6.5 笔记搜索过滤代码（前端实时检索）
支持标题、内容模糊搜索，实时过滤列表数据：
// 实时过滤笔记 filterNote() { // 搜索内容为空，展示全部数据 if (!this.searchText.trim()) { this.showList = this.noteList return } // 模糊匹配标题或内容 this.showList = this.noteList.filter(item => item.title.includes(this.searchText) || item.content.includes(this.searchText) ) } // 清空搜索内容 clearSearch() { this.searchText = '' this.filterNote() }6.6 账号注销功能代码（安全退出）
清空本地登录态，延迟跳转登录页，杜绝返回权限页面：
logout() { uni.showModal({ title: '提示', content: '确定注销当前账号？', success: (res) => { if (res.confirm) { // 清空本地登录缓存 uni.removeStorageSync('userPhone') uni.showToast({ title: '注销成功', icon: 'none' }) // 延迟跳转，提升体验 setTimeout(() => { uni.reLaunch({ url: '/pages/reglogin/newlogin' }) }, 1000) } } }) }七、多端适配与条件编译
虽然 UniApp 一套代码多端运行，但部分场景需要差异化适配，使用条件编译区分平台：
// #ifdef H5 H5端专属代码 // #endif // #ifdef MP-WEIXIN 小程序专属代码 // #endif八、项目打包发布流程
8.1 H5端发布
发行 → 网站-H5，打包后将 dist 文件部署到服务器，可通过浏览器直接访问。
8.2 小程序发布
发行 → 微信小程序，导入开发者工具即可上传审核。
8.3 APP端发布
云端打包，一键生成安卓、iOS安装包，无需原生开发环境。
九、课程学习总结
通过本次 UniApp 跨平台开发学习，我掌握了完整的前端跨端开发流程：
熟练完成 UniApp 开发环境搭建与项目创建
掌握 UniApp 语法、标签、单位、API 规范
十、学习心得
在 Web 应用开发课程中，后端 SpringBoot 负责数据处理与业务逻辑，UniApp 负责多端前端展示，两者结合可以快速开发出前后端完整项目。
UniApp上手简单、生态成熟、开发效率极高，是当下前端开发者必须掌握的跨平台技术。通过本次笔记项目实战，我完整实现了登录鉴权、数据增删改查、模糊搜索、账号注销、多端适配等核心功能，不仅巩固了 Vue 基础，更深入理解了跨平台开发的核心思想、云开发无后端开发模式与工程化开发流程。
熟练使用 uniCloud 实现无后端完整项目开发
掌握页面登录拦截、权限控制、数据CRUD操作
理解多端适配原理、条件编译、跨端兼容方案
掌握项目打包、多端发布完整流程
