在uni-app中使用H5+的功能实现IO操作

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函数中的哟)

猜你喜欢

转载自blog.csdn.net/a519637560/article/details/87975674
今日推荐