Hbuilder打包H5开发的App读取写⼊⼿机本地⽂件
在平时开发的html页⾯中，我们写的Js是没有读取⽤户电脑本地⽂件的权限的，这是出于浏览器运⾏时的安全考虑的，但在我们在使⽤h5打包app时，如果再像浏览器上让⽤户下载，上传⽂件，就会使⽤户的使⽤体验远不如电脑上操作，⽽且经常会有⼀些想要缓存本地的数据，cookies太⼩，满⾜不了需求，所以就想到能不能有内容时，我能直接操作⼿机的存取，我使⽤的是hbuilder打包app的，所以到官⽹上，就到了有⼀节专门关于io的介绍，研究了⼀下使⽤⽅法，所以特此记录⼀下
本⽂所参考官⽅⽂档
先明确⼏个主要对象及⽅法，这⾥与java⾥的对照来看，会java的朋友可能会更容易理解
请求本地⽂件系统对象的⽅法，获取指定的⽂件系统，可通过type指定获取⽂件系统的类型。获取指定的⽂件系统对象成功通过succesCB回调返回，失败则通过errorCB返回。
参数：
type: ( Number )必选本地⽂件系统常量
可取plus.io下的常量，如plus.io.PRIVATE_DOC、plus.io.PUBLIC_DOCUMENTS等。
succesCB: ( )必选请求⽂件系统成功的回调
errorCB: ( )可选请求⽂件系统失败的回调
注意，这⾥的type取值共4个，对应于不同的空间，也有不同的访问权限限制，⼀定要注意区分，如果读取或写⼊⽂件时报错时，记得检查这个地⽅，以下为原⽂
为了安全管理应⽤的资源⽬录，规范对⽂件系统的操作，5+ API在系统应⽤⽬录的基础设计了应⽤沙盒⽬录，分为私有⽬录和公共⽬录两种类型，私有⽬录仅应⽤⾃⾝可以访问，公共⽬录在多应⽤环境时（如⼩程序SDK）所有应⽤都可访问。
应⽤私有资源⽬录，对应常量，仅应⽤⾃⾝可读
应⽤私有⽂档⽬录，对应常量，仅应⽤⾃⾝可读写
应⽤公共⽂档⽬录，对应常量，多应⽤时都可读写，常⽤于保存应⽤间共享⽂件
应⽤公共下载⽬录，对应常量，多应⽤时都可读写，常⽤于保存下载⽂件
⽂件系统中的⽬录对象，⽤于管理特定的本地⽬录或者⽂件，对应于java中可以理解为File对象，这是操作⽂件最基础的对象，⼀个directoryEntry对象就对应于⼀个⽂件或⽂件夹
属性：
: 操作对象的是否为⽂件，DirectoryEntry对象固定其值为false
: 操作对象是否为⽬录，DirectoryEntry对象固定其值为true
: ⽬录操作对象的名称，不包括路径
: ⽬录操作对象的完整路径，⽂件系统的绝对路径
: ⽂件操作对象所属的⽂件系统对象，参考FileSystem
⽅法：
: 获取⽬录的属性
: 移动⽬录
: 拷贝⽬录
: 获取⽬录路径转换为URL地址
:
获取⽬录路径转换为本地路径URL地址
: 获取⽬录路径转换为⽹络路径URL地址
: 删除⽬录
: 获取⽬录所属的⽗⽬录
: 创建⽬录读取对象
: 创建或打开⼦⽬录
: 创建或打开⽂件
: 递归删除⽬录
⽂件系统中的⽂件对象，⽤于管理特定的本地⽂件，对应于java中可以理解为File对象
属性：
: ⽂件操作对象的是否为⽂件，FileEntry对象固定其值为true
:
⽂件操作对象是否为⽬录，FileEntry对象固定其值为false
: ⽂件操作对象的名称，不包括路径
: ⽂件操作对象的完整路径，⽂件系统的绝对路径
: ⽂件操作对象所属的⽂件系统对象，参考FileSystem
⽅法：
: 获取⽂件的属性信息
: 移动⽂件
: 拷贝⽂件
: 获取⽂件路径转换为URL地址
: 获取⽂件路径转换为本地路径URL地址
: 获取⽂件路径转换为⽹络路径URL地址
:
删除⽂件
: 获取⽂件所属的⽗⽬录
: 获取⽂件关联的写⽂件操作对象FileWriter
: 获取⽂件数据对象
创建读取⽂件对象，主要是⽂件读取相关的操作，⽂件以⽂本或者Base64编码的字符串形式读出来，对应于java中可理解为InputStream
属性：
: 当前读取⽂件所处的状态
: 已读取⽂件的内容
: ⽂件操作错误代码
⽅法：
: 终⽌⽂件读取操作
: 以URL编码格式读取⽂件数据内容
: 以⽂本格式读取⽂件数据内容
事件：
: 读取⽂件开始时的回调函数
: 读取⽂件成功完成的回调函数
: 取消读取⽂件时的回调函数
: ⽂件读取操作失败时调⽤的回调函数
: ⽂件读取操作完成时的回调函数
⽂件系统中的写⽂件对象，⽤于写⼊⽂件内容，⽤户注册⾃⼰的事件来接收writestart、progress、write、writeend、error和abort事件，⼀个FileWriter 对象是为单个⽂件的操作⽽创建，可以使⽤该对象多次对相应⽂件进⾏写⼊操作。 FileWriter维护该⽂件的指针位置及长度属性，这样就可以寻和写⼊⽂件的任何地⽅。默认情况下，FileWriter从⽂件的开头开始写⼊（将覆盖现有数据），
seek⽅法可设置⽂件操作指定位置，如fw.seek(fw.length-1)写⼊操作就会从⽂件的末尾开始，对应于java中理解为OutputStream
属性：
: 当前写⼊⽂件所处的状态
: ⽂件当前的长度，单位为字节
: ⽂件当前操作的指针位置
: ⽂件写⼊操作错误代码
⽅法：
: 终⽌⽂件写⼊操作
: 定位⽂件操作位置
: 按照指定长度截断⽂件
: 向⽂件中写⼊数据
事件：
: 写⼊⽂件开始时的回调函数
: 写⼊⽂件成功完成的回调函数
: 取消写⼊⽂件时的回调函数
: ⽂件写⼊操作失败时调⽤的回调函数
: ⽂件写⼊操作完成时的回调函数
下⾯是读写⽂件的主要代码及说明
1、获取⽂件读写的基础，FileEntry对象
1//读取应⽤公共⽂档⽬录
2 questFileSystem(plus.io.PUBLIC_DOCUMENTS, function(fs) {
3// 通过fs.root获取DirectoryEntry对象进⾏操作，获取⽂件操作的根⽬录
4//这⾥的filePath即你要读取的⽂件所在的相对路径，可随意定义，但不得是 _www开头，因为_www开头是应⽤私有资源⽬录的专⽤，只有读权限，不能写⼊，写⼊时会报错
5var filePath = 'abc/';
6var rootDirectoryEntry = fs.root;
7 File(filePath, {
8//这个参数的作⽤是指⽰如果⽂件或⽬录不存在时是否进⾏创建，默认值为false，设为true表⽰如果这个filePath下的⽂件不存在就创建，当然，如果存在就直接返回，不会创建
9 create: true
10 }, function(fileEntry) {
11//FileEntry对象获取成功，对应就是⽂件了，可以接着进⾏相应的读写操作了
12
13 }, function(e) {
14 console.ssage);
15 });
16 }, function(e) {
17 console.ssage);
18 });
2、在上⼀步获取到⽂件操作对象FileEntry的基础上，开始读操作
1//获取⽂件
2 fileEntry.file(function (file) {
3//console.log(file.size + ' <--> ' + file.name);
4//创建⼀个⽂件读取⼯具，在java中理解就是InputStream输⼊流
5 var fileReader = new plus.io.FileReader();
6//成功读取到⽂件内容时的回调，其中sult就是⽂件中的⽂本内容
7 loadend = function (evt) {
8 console.log(sult);
9 }
10//⽂件读取操作失败时调⽤的回调函数
11 r = function (e) {
12 console.ssage);
13 }
14//将刚才请求到的⽂件以utf-8编码，⽂本的形式读出
15 adAsText(file, 'utf-8');
16 });
3、还是以⽂件操作对象FileEntry为基础，进⾏写⼊⽂件的操作
1//通过fileEntry的createWriter创建输出流，向⽂件写⼊内容，对应java中的OutputStream
2 ateWriter(writer => {
3//⽂件写⼊成功后的回调
4 write = function(event) {
5//写⼊成功
6 console.log('写⼊成功');
7 }
8//⽂件写⼊操作失败时调⽤的回调函数
9 r = function(e) {
10 console.ssage);
11 }
12//设置⽂件写⼊的起点，writer.length就是上次⽂件⾥⾯内容的最后位置，这样即将新的内容追加到⽂本最末尾，如果想覆盖原先的内容，直接设置为0即可
13 var cursor = writer.length;
14 writer.seek(cursor);
15//将要写⼊的⽂本dataStr写⼊到⽂件中去
16 writer.write(dataStr);
17 }, function(e) {
18 console.ssage);
19 });
以上就是在Hbuilder中打包H5的App读写⽂件的主要代码了及功能了
但是我们发现这样写会有⽆数的回调函数，不仅不好看，别⼈调⽤时也不好传参，所以我们可以采⽤ES6的写法加上Primse来封装改造⼀下，让这些⽅法看起来更加优雅⼀点
1 getFileEntry(filePath) {
2return new Promise((resolve, reject) => {
3 questFileSystem(plus.io.PUBLIC_DOCUMENTS, fs => {
4 File(filePath, {create: true}, fileEntry => {
5 resolve(fileEntry);
6 }, e => {
7 reject(e)
8 });
9 }, e => {
10 reject(e)
11 });
12 })
13 },
14 readData(fileEntry) {
15return new Promise((resolve, reject) => {
16 fileEntry.file(function (file) {
17 let fileReader = new plus.io.FileReader();
18 loadend = function (evt) {
19 resolve(sult);
20 }
21 r = function (e) {
22 reject(e)
23 }
24 adAsText(file, 'utf-8');
25 });
26 })
27 },
28 writeData(fileEntry, dataStr, cursorStart) {
29return new Promise((resolve, reject) => {
30 ateWriter(writer => {
31 write = e => {
32 resolve()
33 }
34 r = e => {
35 reject(e)
36 }
37//设置⽂件写⼊的起点
38 let length = cursorStart != undefined ? cursorStart : writer.length;
39 writer.seek(length);
40 writer.write(dataStr);
41 }, e => {
42 reject(e)
43 });
44 })
45 }
这样在调⽤时，代码就会⾮常简洁了
读取⽂件内容
1 let filePath = '/abc/haha/test.json';
3 .then(fileEntry => {
4// ve(); //删除⽂件
adData(fileEntry);
6 }).then(fileText => {
7 alert("⽂件内容:>>> " + fileText)手机上可以打html与css的app
8 }).catch(e => {
9 alert('⽂件读取失败！')
10 })
写⼊⽂件内容
1 let writeDataStr = 'Hello World!!!'
3 .then(fileEntry => {
4return this.writeData(fileEntry, writeDataStr);
5 }).then(writer => {
6 alert('保存成功');
7 }).catch(e => {
8 alert('保存失败！')
9 })
OK ! 打完收⼯
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论