uniapp H5+将服务器返回的数据写入json文件保存至本地并在hybird下的html页面读取

一、从服务器请求数据,使用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文件

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