uniapp H5+将服务器返回的数据写入json文件保存至本地并在hybird下的html页面读取
一、从服务器请求数据,使用H5+写入本地json文件参考:https://www.html5plus.org/doc/zh_cn/io.html#plus.io.requestFileSystem将写入文件操作封装到getData.js文件中:const getdatas = function(url) {uni.showLoading({title: '数据加载中……',mask: true})
·
一、从服务器请求数据,使用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读取本地文件,暂时还没有尝试。
更多推荐
已为社区贡献9条内容
所有评论(0)