更新记录

0.5.0（2024-12-12）

首次发布

平台兼容性

bsx-fileview Android端文件选择组件

开发文档

UTS 标准模式组件

作者

aoaobaba 傲傲爸爸~

介绍

最近开发的app 需要用户选择指定类型的文件，索性花了2天写了个组件插件方便使用。技术上没什么难度，android端和ios (太穷买不起，所以没有适配) 都有相关的api调用，只要权限给好！android 端遇到一个麻烦问题就是查询分版本了，因为使用了多文件类型条件查询，使用contentResolver.query 从R版本开始，不允许拼接sql；需要使用bundle 构建条件。代码基本靠Ai 给的，我就是思考修改了部分而已。另外，就是UI组件方面，更多的时间花在了类型处理上。

毕竟！新手上路！大佬们，手下留情！

功能

• [X] 多文件类型查询（枚举类型，有些包含了文件类型集合。例如 IMAGE，可以查jpg/jpeg/gif/png 等等）
• [X] 单文件类型查询 (枚举类型，例如 MP3 只查询MP3文件)
• [X] 分页查询（支持分页查询，按提供分页查询量 自动分页）
• [X] 动画展现（show和close方法 组件从底部出现或隐藏）
• [X] 选择文件（获取选择的文件列表）
• [X] 重置选择（重置选择，重新选择）

类型

BsxFileInfo 文件信息

type BsxFileInfo = {
    displayName : string
    uri : string
    filePath : string
    mimeType : string
    size : number
    sizeFormatted : string
    dateAdded : string
    dateModified : string,
    icon: string
}

BsxViewFileList 文件列表

type BsxViewFileList = Array<BsxFileInfo>

BsxViewFileMimeType 枚举类型-文件查询类型

enum BsxViewFileMimeType { 
    TXT = "TXT",
    DOC = "DOC",
    MEDIA = "MEDIA",
    IMAGE = "IMAGE",
    AUDIO = "AUDIO",
    VIDEO = "VIDEO",
    COMP = "COMP",
    JSON = "JSON",
    HTML = "HTML",
    TEXT = "TEXT",
    PDF = "PDF",
    WORD = "WORD",
    EXCEL = "EXCEL",
    PPT = "PPT",
    JPEG = "JPEG",
    PNG = "PNG",
    GIF = "GIF",
    MP3 = "MP3",
    WAV = "WAV",
    MP4 = "MP4",
    AVI = "AVI",
    ZIP = "ZIP",
    TAR = "TAR",
    GZ = "GZ",
    S7Z = "7Z"
}

使用

1. 导入插件到项目
2. uvue页面模板中使用组件（easycom 规范直接使用）
3. 根据业务需要选择不同的文件时，传递文件类型

组件参数

组件方法

通过组件的Ref 引用，可以调用！

使用示例

使用 keepalive 可以缓存组件数据

<KeepAlive>
    <bsx-fileview ref="fileSelector" :selected="5" :mimeType="mimeType" @closeCallback="hello"></bsx-fileview>
</KeepAlive>

导入类型或api

import { BsxFileInfo, BsxViewFileMimeType } from '@/uni_modules/bsx-fileview'

定义组件对象引用

const fileSelector = ref<BsxFileviewComponentPublicInstance  | null>(null)

展示组件

const testBsxPickerAudio = () => {
    // 选择音频
    mimeType.value = BsxViewFileMimeType.AUDIO
    // 选择视频
    mimeType.value = BsxViewFileMimeType.VIDEO
    // 选择图片
    mimeType.value = BsxViewFileMimeType.IMAGE
    // 选择PDF
    mimeType.value = BsxViewFileMimeType.PDF
    fileSelector.value?.show?.()
}

用户关闭时，回调获取选择的文件列表

const hello = (res: Array<BsxFileInfo>) => {
    console.log('hello------------', res)
}

tips

1. 重要！！！！！ 需要添加权限！请配置清单。
2. 引入查询枚举类型后，界面会有代码提示需要查询的文件类型
3. 可以替换重置或关闭的图标
4. 插件内置了一些文件显示的图标，但不全；有需要的，可以联系我添加。

谢谢！