在uni-app中使用H5+的功能实现IO操作
uni-app实现文件存储,在开发APP的过程中会存在大量的缓存数据需要存储,Vuex存储量太小,websql也小。所以需要操作手机中的文件夹来进行缓存数据的存储,在用户下次进来的时候就不需要再次去加载和请求。首先。先介绍一下H5+HTML5+ 的SDK,是把5+ runtime封装为原生SDK,它有3个用途。使用HTML5+ SDK实现本地打包。通过原生代码扩展HTML5+ runtim...
uni-app实现文件存储,在开发APP的过程中会存在大量的缓存数据需要存储,Vuex存储量太小,websql也小。所以需要操作手机中的文件夹来进行缓存数据的存储,在用户下次进来的时候就不需要再次去加载和请求。
首先。先介绍一下H5+
HTML5+ 的SDK,是把5+ runtime封装为原生SDK,它有3个用途。
使用HTML5+ SDK实现本地打包。
通过原生代码扩展HTML5+ runtime的功能。
在现有原生项目中使用HTML5+ SDK替换原有的webview,以获得更强的web增强表现。
说的通俗点,在我觉得就是用JS去实现调用手机底层的功能,比如用JS调用照相机之类的等等。
第一步,先建立一个新的uni-app
新建完之后,因为是测试我们就直接在pages下的index.vue进行操作,直接把自带的一些操作删除了,新建三个按钮
接着我们给三个按钮添加上点击事件。 先写一下调用摄像头把
saveFile() {
var cmr = plus.camera.getCamera();
var res = cmr.supportedVideoResolutions[0];
var fmt = cmr.supportedVideoFormats[0];
cmr.captureImage(function(path) {
console.log("Capture image success: " + path);
},
function(error) {
console.log("Capture image failed: " + error.message);
}, {
resolution: res,
format: fmt
}
);
},
这是调用摄像头的方法,由于UNI-app的特性,uni-app不需要像5+App那样等待plus ready,直接在函数中调用plus方法,该方法封装了所有的H5+的api。可以根据文档自己试着玩。
这是H5+的官网地址:http://www.html5plus.org/doc/h5p.html
写完调用摄像头的功能后,直接打包安装到手机上点击按钮就实现了一个基本的功能,接下来就是实现本地文件的创建和读取
创建
getFilelist() {
plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(success) {
success.root.getFile('gongyongchao.txt', { //查找gongyongchao这个文件,有就打开,没有就创建一个
create: true
}, function(fileEntry) {
var Path = fileEntry.toURL(); //获取当前文件的路径
console.log(Path, '当前路径');
fileEntry.createWriter(function(data) { //对文件进行写入操作
data.write('我写入成功');
console.log('写入成功')
}, function(e) {
console.log('写入失败')
})
console.log('创建了一个新的文件')
})
console.log('我已经进入了系统目录下')
}, function(e) {
console.log('我是调用失败的回调') //失败的回调
})
},
接下来安装到手机上就实现了,文件的创建查找。
读取文件
getFileData() {
plus.io.resolveLocalFileSystemURL("_doc/gongyongchao.txt", function(entry) {
///读取文件
entry.file(function(file) {
var fileReader = new plus.io.FileReader();
fileReader.readAsText(file, 'utf-8');
fileReader.onloadend = function(evt) {
//alert(evt.target.result);
console.log("内容:" + evt.target.result);
}
});
})
}
基本实现了本地文件缓存的功能,在app开发中就不怕数据太大请求时间太长什么之类的了。
(事件函数都是写在methods函数中的哟)
更多推荐
所有评论(0)