uni-app 实现 APP 双系统多类型文件预览功能

在 uni-app 中实现 APP 双系统（Android 和 iOS）多类型文件预览功能，可以通过调用平台原生插件或利用现有的第三方库来实现。以下是一个基于 uni-app 的示例代码，展示了如何预览多种类型的文件（如图片、PDF、文本等）。

首先，确保你已经安装了 uni-app 所需的开发环境，并创建了一个项目。

1. 引入第三方库（如 pdf.js 用于预览 PDF）

在 pages.json 中引入 pdf.js 所需的资源（假设使用 CDN）：

{
  "globalStyle": {
    "script": [
      "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.8.335/pdf.min.js"
    ]
  }
}

2. 编写文件预览页面

创建一个新的页面 preview.vue，用于显示文件内容。

<template>
  <view>
    <image v-if="fileType === 'image'" :src="fileUrl" mode="widthFix"></image>
    <web-view v-else-if="fileType === 'pdf'" :src="pdfUrl"></web-view>
    <text v-else-if="fileType === 'text'" :style="{ whiteSpace: 'pre-wrap' }">{{ fileContent }}</text>
    <view v-else>Unsupported file type</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      fileType: '',
      fileUrl: '',
      pdfUrl: '',
      fileContent: ''
    };
  },
  methods: {
    previewFile(filePath, type) {
      this.fileType = type;
      if (type === 'image') {
        this.fileUrl = filePath;
      } else if (type === 'pdf') {
        // Convert file path to base64 or use a local server to serve the PDF
        this.pdfUrl = `file://${filePath}`; // Note: On iOS, you may need to use a different approach
      } else if (type === 'text') {
        // Read text file content (using uni.getFileSystemManager().readFile)
        uni.getFileSystemManager().readFile({
          filePath: filePath,
          encoding: 'utf8',
          success: res => {
            this.fileContent = res.data;
          },
          fail: err => {
            console.error(err);
          }
        });
      }
    }
  },
  onLoad(options) {
    const { filePath, type } = options;
    this.previewFile(filePath, type);
  }
};
</script>

3. 调用预览页面

在需要预览文件的地方，比如某个列表项点击事件，通过 uni.navigateTo 跳转到预览页面，并传递文件路径和类型。

uni.navigateTo({
  url: `/pages/preview/preview?filePath=${encodeURIComponent(filePath)}&type=${fileType}`
});

注意事项

• 文件路径：在 Android 和 iOS 上，文件路径的访问方式可能有所不同，尤其是当文件位于应用沙箱外部时。
• PDF 预览：web-view 组件用于显示 PDF，但在某些情况下（如 iOS），可能需要将 PDF 文件上传到服务器并通过 URL 访问。
• 权限管理：确保应用具有访问所需文件的权限。

通过上述代码，你可以在 uni-app 中实现基本的双系统多类型文件预览功能。根据实际需求，你可以进一步扩展和优化代码。