一、从服务器请求数据,使用H5+写入本地json文件

参考:https://www.html5plus.org/doc/zh_cn/io.html#plus.io.requestFileSystem

1、将写入文件操作封装到getData.js文件中:

const getdatas = function(http) {
	uni.showLoading({
		title: '数据加载中……',
		mask: true
	})
	var data = {
        ……
	}
	//请求数据
	uni.request({
		url: http + ……,
		method: 'GET', //默认GET
		data: data,
		// header: {
		// 	Authorization: 'Bearer ' + token
		// },
		success: result => {
			saveServerDatatoFile("MY_DATA", JSON.stringify(result));
		},
		fail: (data, code) => {
			console.log('fail' + JSON.stringify(data));
		}
	});
}

//将从服务器获取的数据保存到json文件中,用于查询显示
function saveServerDatatoFile(filename, jsonData) { //jsonData要求是String格式
	plus.io.requestFileSystem(plus.io.PRIVATE_DOC,
		function(fs) {
			//fs.root 是根目录操作对象
			fs.root.getDirectory("uniapp_data", {//创建一个文件夹名为uniapp_data
				create: true,
				exclusive: false
			}, function(dir) {
				//console.log("Directory Entry Name: " + dir.name);
				dir.getFile(filename + ".json", { //在uniapp_data文件夹中创建一个json文件
						create: true
					},
					function(fileEntry) {
						fileEntry.file(function(file) {
							//写入文件
							fileEntry.createWriter(
								function(writer) {
									// writer.onwritestart = function(e) {
									// 	console.log("写入数据开始");
									// }
									writer.onwrite = function(e) {
										console.log("写入数据成功");
										uni.hideLoading();
										uni.showToast({
											title: '数据加载完成!',
											duration: 2000,
											icon: 'none'
										});
									}
									//定位至文件结尾,即每次都是追加内容
									//writer.seek(writer.length);
									//定位至开头,即每次都是重写文件。(默认)
									//writer.seek(0);
									writer.write(jsonData);
								},
								function(error) {
									console.log("创建Writer失败" + error.message);
								});

							读取文件
							// var fileReader = new plus.io.FileReader();
							// console.log("getFile:" + JSON.stringify(file));
							// fileReader.readAsText(file, 'utf-8');
							// fileReader.onloadend = function(evt) {
							// 	console.log("11" + JSON.stringify(evt));
							// 	console.log("evt.target" + JSON.stringify(evt.target));
							// 	console.log("evt.target.result" + JSON.stringify(evt.target.result));
							// }
						});
					},
					function(err) {
						console.log("访问File失败" + err.message);
					})
			}, function() {
				console.log("创建uniapp_data目录失败" + err.message);
			});
		},
		function(error) {
			console.log("访问_DOC目录失败" + error.message);
		});
}
export default getdatas;

2、在需要使用的vue页面中导入js文件后就可以直接使用了。

import getData from '@/common/getData.js';
export default {
    data() {
		return {}
    },
    methods: {
	    refusedata() {
	        getData(this.$httpUrl);
        }
    },

 二、在html页面中读取写入本地的MY_DATA文件

需要导入jquery文件,uniapp中创建js文件就可以选择创建jquery-3.4.1.min.js文件

<!-- 导入jquery文件 -->
<script src="./js/jquery-3.4.1.min.js">
<script type="text/javascript">
    var $ = jQuery.noConflict();
    //读取本地文件中的数据
    var mydata=[];
    if (mydata.length == 0) {
	    $.ajaxSettings.async = false; //把异步操作转化成同步操作,否则无法在函数外拿到请求值
	    $.getJSON("../../../doc/uniapp_data/MY_DATA.json", function(result) {
		    mydata= result.data;//虽然写入的时候要求转换成string,但是写入后的数据是保持原格式的
	    });
        $.ajaxSettings.async = true; //执行完成后恢复成异步	
    }
</script>

三、H5+的参考中表示可以使用plus读取本地文件,暂时还没有尝试。

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐