电子档案系统移动办公：零代码快速搭建移动端操作指南

实操前置准备

需提前准备的免费工具及直接地址：

• Node.js v18.17.0（必装）：Windows下载地址https://nodejs.org/dist/v18.17.0/node-v18.17.0-x64.msi，Mac下载地址https://nodejs.org/dist/v18.17.0/node-v18.17.0.pkg
• Git：Windows下载地址https://git-scm.com/download/win
• 你的电子档案系统Web版源码（无源码可用静态HTML版本替代）
• VS Code（代码编辑）：https://code.visualstudio.com/download

实操步骤

步骤1：适配Web端为移动端友好样式

Web系统未适配移动端会导致APP变形、点击错位，必须先完成以下调整：

1. 修改视口标签：在Web项目index.html的内添加核心适配代码： ```html ```
2. 调整交互尺寸：确保可点击区域≥48px×48px，在全局CSS（style.css）添加： ```css button, input, a, .clickable { min-width: 48px; min-height: 48px; padding: 12px; } ```
3. 隐藏PC专属元素：添加媒体查询适配窄屏： ```css @media (max-width: 768px) { .pc-only { display: none !important; } } ```

步骤2：初始化Capacitor项目并集成Web系统

Capacitor可将Web应用转为原生APP，无需原生代码，执行以下命令：

1. 进入Web项目根目录，依次执行： ```bash npm init -y npm install @capacitor/core @capacitor/cli --save-dev npm install @capacitor/android @capacitor/ios --save-dev npx cap init "电子档案移动办公" com.内部公司.archives ```
2. 复制Web产物到Capacitor目录：Vue/React项目先执行`npm run build`，再将dist文件复制到www目录： ```bash cp -r dist/ ./www/ ``` 纯静态项目直接将所有文件放入www目录即可。

步骤3：配置移动端核心权限

电子档案需访问存储、相机，必须配置权限，否则功能失效：

1. Android权限配置：打开`项目根目录/android/app/src/main/AndroidManifest.xml`，在标签内添加： ```xml ```
2. iOS权限配置：打开`项目根目录/ios/App/App/Info.plist`，在标签内添加： ```xml NSPhotoLibraryUsageDescription 需要访问相册上传档案照片 NSCameraUsageDescription 需要使用相机拍摄档案 NSDocumentsFolderUsageDescription 需要访问本地存储档案文件 ```
3. 可选插件集成（拍照上传用）： ```bash npm install @capacitor/camera --save ``` Web端JS调用示例： ```javascript import { Camera, CameraResultType } from '@capacitor/camera'; async function uploadArchivePhoto() { const photo = await Camera.getPhoto({quality:90, resultType: CameraResultType.Base64}); return photo.base64String; } ```

步骤4：同步并测试APP

1. 同步Capacitor配置：执行命令更新原生项目： ```bash npx cap sync ```
2. Android测试：执行`npx cap open android`，在Android Studio中选择测试设备（手机/模拟器），点击运行生成APP。
3. iOS测试（仅Mac可用）：执行`npx cap open ios`，在Xcode中连接苹果设备，选择证书后运行。
4. 核心验证：测试登录、档案查询、上传等功能，若有错位，返回Web端调整CSS后重新同步。

步骤5：内部发布（可选）

内部办公用无需应用商店审核，直接生成安装包：

• Android：在Android Studio点击Build→Build APK，生成后通过企业微信分发。
• iOS：在Xcode点击Product→Archive，导出企业部署包后分发。

所有操作无需原生开发经验，全程基于Web项目完成，零门槛落地，可直接用于企业内部电子档案移动办公。