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

  • 5
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值