uni-app IOS与安卓支持目录选择

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app IOS与安卓支持目录选择

使用场景

  • 在设置里可以设置文件的保存路径;
  • 需要一个组件,可以实现目录选择,结果为用户选择的路径。
  • 类似于uni.chooseFile,不同在于选择时对象为目录,结果为目录

目前APP不支持选择目录,希望有一个插件能够支持用户能够通过一个插件选择一个目录;

6 回复

类似于uni.chooseFile,弹出目录。用户可以选择目录


目前暂未有相关插件,解决方案: 1、通过降低targetSdkVerion版本到30之前解决该问题 2、使用5+api来下载 http://www.html5plus.org/doc/zh_cn/downloader.html 相关文章

对不起,我可能没有表述清楚。问题重点不是保存文件,而是选择目录;选择目录由用户操作。并且选择目录为单独的组件。用户可以事先选择好目录,下载默认下载到这个目录。类似于浏览器中 设置=》下载=》保存文件至(目录)

回复 z***@163.com: 仅仅需要选择文件目录吗 那选择完之后,不需要对这个文件目录进行IO吗 比如保存文件 ?

回复 原生插件开发哦: 只需要选择目录,保存文件有plus.downloader实现

在uni-app中实现目录选择功能时,由于原生组件和平台差异的存在,我们需要针对iOS和安卓分别进行处理。uni-app 提供了 plus.io 模块,可以方便地进行文件操作,包括选择目录。不过需要注意的是,这个模块仅在5+ App(即使用HBuilderX打包的原生应用)中可用,在Web端和小程序端不可用。

以下是一个简单的示例,展示如何在uni-app中实现目录选择功能,并分别处理iOS和安卓平台的差异。

1. 配置manifest.json

首先,确保在 manifest.json 中配置了5+ App的相关权限,如读取文件系统的权限。

"plus": {
    "distribute": {
        "apple": {
            "appids": [],
            "plist": [
                {
                    "NSAppTransportSecurity": {
                        "NSAllowsArbitraryLoads": true
                    }
                },
                {
                    "UIFileSharingEnabled": true
                },
                {
                    "LSSupportsOpeningDocumentsInPlace": true
                }
            ]
        },
        "android": {
            "permissions": [
                "android.permission.READ_EXTERNAL_STORAGE",
                "android.permission.WRITE_EXTERNAL_STORAGE"
            ]
        }
    }
}

2. 实现目录选择功能

在页面的JavaScript代码中,使用 plus.io 模块进行目录选择。

export default {
    methods: {
        chooseDirectory() {
            // 创建一个文件选择器
            let resolver = plus.io.resolveLocalFileSystemURL('_documents/');
            resolver.onsuccess = function(e) {
                let directoryEntry = e.target.result;
                // 调用选择目录的接口
                directoryEntry.getDirectory('selectedDir', {create: true, exclusive: false}, function(entry) {
                    // 用户选择的目录
                    console.log('Selected directory:', entry.fullPath);
                }, function(e) {
                    console.error('Failed to get directory:', e.message);
                });
            };
            resolver.onerror = function(e) {
                console.error('Error resolving directory:', e.message);
            };
        }
    }
}

3. 调用方法

在页面的模板中,添加一个按钮来触发目录选择功能。

<template>
    <view>
        <button @click="chooseDirectory">选择目录</button>
    </view>
</template>

注意事项

  1. 上述代码示例中,_documents/ 是iOS平台的特殊路径,表示应用的文档目录。对于安卓,你可以使用其他合适的路径,如应用的私有存储目录。
  2. 在实际项目中,你可能需要处理更多的边界情况和错误处理。
  3. 由于uni-app和5+ App平台的限制,某些功能可能需要进一步调整和优化。

通过上述步骤,你应该能够在uni-app中实现跨iOS和安卓平台的目录选择功能。

回到顶部