✨ 博客简介

在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操作

  • 理解多端适配原理、条件编译、跨端兼容方案

  • 掌握项目打包、多端发布完整流程