零基础实战：手把手教你搭建档案管理APP

准备工作：开发环境搭建

在开始编写代码之前，必须先配置好标准化的开发环境。我们将使用HBuilderX作为开发工具，它是DCloud出品的一款跨平台开发工具，对Uni-app支持最好。

步骤1：下载并安装HBuilderX

直接访问官方下载页面：https://www.dcloud.io/hbuilderx.html

下载对应操作系统的正式版（App开发版）。下载完成后，双击安装包，一路点击“下一步”完成安装。安装路径建议不要包含中文或空格，例如直接安装在D盘根目录下。

步骤2：安装Uni-app编译插件

打开HBuilderX，点击顶部菜单栏的【工具】 -> 【插件安装】。

在弹出的窗口中，找到【uni-app】分类，勾选【App真机运行】和【uni-app编译器】，然后点击右下角的【安装】按钮。等待安装进度条走完，期间请不要关闭软件。

第一步：创建项目骨架

环境配置好后，我们创建一个全新的项目。

步骤1：新建项目

在HBuilderX左上角点击【文件】 -> 【新建】 -> 【项目】。

步骤2：配置项目参数

在弹出的对话框中填写以下信息：

• 项目名称：填入 ArchiveManagerApp
• 文件路径：选择你希望保存代码的文件夹
• 模板：选择 uni-app 下的 默认模板
• 版本：选择 Vue 3（Vue3是当前主流，性能更好）
• 语言：选择 JavaScript

填写完毕后，点击【创建】。此时左侧项目管理器会出现刚才创建的项目。

第二步：配置应用基础信息

为了让APP看起来像一个成品，我们需要修改配置文件。

1. 修改页面配置

打开项目根目录下的 pages.json 文件。这是全局配置文件，定义了页面的路径、窗口样式等。将 globalStyle 修改为以下内容，以设置统一的导航栏样式：

```json "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "企业档案管理", "navigationBarBackgroundColor": "F8F8F8", "backgroundColor": "F8F8F8" } ```

2. 修改应用标识

打开项目根目录下的 manifest.json 文件。点击视图上方的【源码视图】。

找到 name 字段，修改为 "企业档案管理"。找到 appid 字段，如果是在云端打包，需要填写你的DCloud AppID，如果是本地打包测试，可以使用默认值。

第三步：编写核心页面代码

我们将所有的逻辑（UI、样式、交互）都写在 index.vue 文件中，实现一个具备文件上传、列表展示、搜索和删除功能的档案管理器。为了模拟后端数据库，我们将使用 uni.setStorage 将数据保存在本地。

打开 pages/index/index.vue，清空原有内容，直接复制以下完整代码：

```html ```

第四步：代码逻辑详解

上述代码已经实现了完整的闭环，以下是关键技术的解析，帮助你理解：

1. 数据持久化

代码中使用了 uni.setStorageSync 和 uni.getStorageSync。这意味着当你关闭APP再重新打开，或者刷新页面，之前上传的档案记录不会丢失。这是通过将数组对象序列化为JSON字符串存储在本地缓存中实现的。

2. 文件选择API

uni.chooseMessageFile 是一个强大的API，它允许用户从手机系统的文件管理器中选择文件。为了演示方便，我们这里只获取了文件的元数据（名称、大小），并没有真正上传文件流到服务器。在真实生产环境中，你需要在这里调用 uni.uploadFile 将文件流发送到后端服务器接口。

3. 响应式搜索

使用了Vue3的 computed 计算属性。当 keyword 变量（搜索框输入的内容）发生变化时，filterList 会自动重新计算，筛选出匹配名称的文件，无需手动编写刷新列表的逻辑。

第五步：运行与调试

代码编写完成后，我们需要验证功能。

方式1：浏览器运行（最快）

在顶部菜单栏点击【运行】 -> 【运行到浏览器】 -> 【Chrome】。

浏览器会自动弹出一个窗口，展示你的APP界面。你可以尝试点击“上传档案”，选择电脑上的任意文件，列表会立即更新。刷新页面，数据依然存在。

方式2：手机真机运行（体验最佳）

1. 用数据线连接你的Android手机到电脑。

2. 在手机上开启开发者模式并打开USB调试。

3. 在HBuilderX中点击【运行】 -> 【运行到手机或模拟器】 -> 【你的手机型号】。

4. 第一次运行时，HBuilderX会自动在你的手机上安装一个叫“基座”的应用，这是用来运行调试代码的容器。安装成功后，你的档案管理APP就会自动启动。

注意：在真机上运行时，“上传档案”功能会调用手机系统的文件选择器，效果与原生APP一致。

第六步：打包发布

当你确认功能无误后，可以将APP打包成安装包发给他人使用。

1. 点击顶部菜单栏的【发行】 -> 【原生App-云打包】。

2. 在弹出的窗口中，Android的证书可以使用DCloud提供的公用测试证书（仅限测试使用）。

3. 点击【打包】，等待云端构建完成。

4. 构建成功后，控制台会输出一个下载链接，点击即可下载 .apk 安装包。将这个APK发送到手机上安装，就是一个独立的档案管理软件了。