| uniapp H5+将服务器返回的数据写入json文件保存至本地并在hybird下的html页面读取 | 您所在的位置：网站首页 › 手机json格式怎么修改 › 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文件 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; //执行完成后恢复成异步 } 三、H5+的参考中表示可以使用plus读取本地文件，暂时还没有尝试。
|
| CopyRight 2018-2019 实验室设备网 版权所有 |