档案管理移动端体验差？WebView混合开发实操全流程

一、核心改造思路与准备工作

现有档案管理系统多为PC端Web应用，直接在手机浏览器打开常出现字体过小、表格错位、无法上传附件等问题。完全重构原生APP成本过高且周期长。最务实的方案是采用“Web前端响应式适配 + Android WebView容器封装”的混合开发模式。本文将指导你如何通过改造前端代码并将其封装进Android原生壳中，实现低成本、零门槛的移动端档案管理功能。

在开始之前，请确保你的开发环境已准备就绪：

• Node.js环境：用于启动本地Web服务测试前端效果（访问 https://nodejs.org 下载LTS版本安装）。
• Android Studio：用于生成APP壳子（访问 https://developer.android.com/studio 下载安装）。
• JDK 8或以上：Android开发基础依赖。

二、前端响应式适配实操

解决移动端“不好用”的第一步是让页面能自适应屏幕。档案系统核心难点在于表格数据的展示和文件上传控件的适配。

1. 设置Viewport与Rem单位转换

在HTML文件的标签中，必须加入以下Meta标签，禁止用户缩放，并设置宽度等于设备宽度。

```html ```

为了解决不同手机屏幕尺寸的兼容性，我们需要引入一段JavaScript脚本，将根元素字体大小设置为屏幕宽度的1/10，从而实现Rem单位的动态计算。将以下代码放入中：

```html ```

2. 表格转卡片式布局（CSS核心代码）

档案列表在PC端是宽表格，在手机端必须转为卡片堆叠。使用CSS媒体查询（Media Query）实现这一效果。假设你的表格类名为.archive-table，在CSS文件中添加以下代码：

```css / PC端默认样式保持不变 / / 移动端适配样式：屏幕宽度小于768px时生效 / @media screen and (max-width: 768px) { .archive-table, .archive-table thead, .archive-table tbody, .archive-table th, .archive-table td, .archive-table tr { display: block; } / 隐藏表头 / .archive-table thead tr { position: absolute; top: -9999px; left: -9999px; } .archive-table tr { border: 1px solid ccc; margin-bottom: 0.5rem; border-radius: 0.3rem; background: fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .archive-table td { border: none; border-bottom: 1px solid eee; position: relative; padding-left: 50%; / 为左侧Label留出空间 / text-align: left; white-space: normal; / 允许换行 / font-size: 0.28rem; } / 利用data-label属性显示字段名 / .archive-table td:before { position: absolute; top: 0.2rem; left: 0.2rem; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: bold; content: attr(data-label); color: 666; } } ```

操作细节：你需要修改HTML中标签，增加data-label属性，例如A001，这样手机端就能看到“档案编号：A001”的效果。

3. 优化移动端文件上传控件

档案系统常需上传图片或PDF。在手机上，默认体验较差。通过设置accept属性调用系统相机或文件管理器。修改上传按钮的HTML代码如下：

```html ```

同时，为了防止移动端点击延迟，需在CSS中给所有可点击元素添加：

```css button, input, a { touch-action: manipulation; / 消除300ms点击延迟 / } ```

三、Android WebView容器封装

前端适配完成后，我们需要将其放入Android APP中，以获得更好的权限控制（如文件读写）和原生体验。

1. 创建Android项目

打开Android Studio，选择New Project -> Empty Views Activity。Name填写ArchiveMobileApp，Language选择Java，Minimum SDK选择API 21 (Android 5.0)以覆盖大部分机型。

2. 配置网络权限

打开app/src/main/AndroidManifest.xml文件，在标签内添加网络权限和文件读写权限：

```xml ```

3. 修改布局文件

打开app/src/main/res/layout/activity_main.xml，将其修改为全屏WebView布局：

```xml ```

4. 编写MainActivity核心逻辑

打开app/src/main/java/com/example/archivemobileapp/MainActivity.java。我们需要初始化WebView，开启JavaScript支持，设置文件上传监听器，并加载你的档案管理系统URL。以下是完整代码：

```java package com.example.archivemobileapp; import android.app.Activity; import android.content.Intent; import android.net.Uri; import android.os.Bundle; import android.webkit.ValueCallback; import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; public class MainActivity extends Activity { private WebView webView; private ValueCallback mFilePathCallback; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = findViewById(R.id.archiveWebView); configureWebView(); // 将此处替换为你实际部署的前端URL，或者打包进assets的路径 // 例如：webView.loadUrl("file:///android_asset/index.html"); webView.loadUrl("http://192.168.1.100:8080/archive"); } private void configureWebView() { WebSettings settings = webView.getSettings(); // 核心设置：启用JS、DOM存储、缩放 settings.setJavaScriptEnabled(true); settings.setDomStorageEnabled(true); settings.setAllowFileAccess(true); settings.setAllowContentAccess(true); settings.setUseWideViewPort(true); // 启用宽视图 settings.setLoadWithOverviewMode(true); // 自适应屏幕 settings.setBuiltInZoomControls(false); // 禁用内置缩放控件 settings.setDisplayZoomControls(false); // 隐藏缩放按钮 // 解决HTTP明文传输问题（仅开发环境使用，生产环境请配置HTTPS） if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) { settings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW); } // 设置WebViewClient以在当前WebView加载页面，不跳转系统浏览器 webView.setWebViewClient(new WebViewClient()); // 设置WebChromeClient以处理文件上传 webView.setWebChromeClient(new WebChromeClient() { // For Android >= 5.0 @Override public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, FileChooserParams fileChooserParams) { mFilePathCallback = filePathCallback; Intent intent = new Intent(Intent.ACTION_GET_CONTENT); intent.addCategory(Intent.CATEGORY_OPENABLE); intent.setType("/"); // 允许所有类型，根据需求可限制为 image/ startActivityForResult(Intent.createChooser(intent, "选择文件"), 1); return true; } }); } @Override protected void onActivityResult(int requestCode, int resultCode, Intent data) { super.onActivityResult(requestCode, resultCode, data); if (requestCode == 1 && mFilePathCallback != null) { Uri[] results = null; if (resultCode == Activity.RESULT_OK && data != null) { String dataString = data.getDataString(); if (dataString != null) { results = new Uri[]{Uri.parse(dataString)}; } } mFilePathCallback.onReceiveValue(results); mFilePathCallback = null; } } // 处理物理返回键，实现WebView页面后退 @Override public void onBackPressed() { if (webView.canGoBack()) { webView.goBack(); } else { super.onBackPressed(); } } } ```

四、打包与安装测试

代码编写完毕后，通过USB连接开启开发者模式的Android手机。

1. 同步Gradle：点击Android Studio顶部的Sync Project with Gradle Files图标（大象图标）。
2. 运行APP：点击顶部工具栏的绿色运行三角形（Run 'app'）。
3. 真机测试：APP安装启动后，你会看到经过CSS适配的档案列表。尝试点击“上传”按钮，系统会弹出原生的文件选择器或相机界面，选择文件后即可正常上传。

如果需要发布给内部员工使用，点击菜单栏 Build -> Generate Signed Bundle / APK，按照提示创建签名密钥（.jks文件），选择Release模式编译，即可获得最终的.apk安装包。