码迷,mamicode.com
首页 > 移动开发 > 详细

基于Html5 Plus + Vue + Mui 移动App开发(三)-文件操作(读取、保存、更新数据)

时间:2018-09-09 22:42:28      阅读:862      评论:0      收藏:0      [点我收藏+]

标签:读取数据   技术分享   对象   fileread   tor   数据   bubuko   ima   根目录   

  实全资讯采用基于Html5 Plus + Vue + Mui 移动App。主要实现功能包括:

  • 实现搜索站点设置
  • 实现搜索关键字定义
  • 实现搜索资讯保存、删除功能。
  1. 主界面实现关键字搜索、预定义关键字搜索,下拉刷新,支持搜索结果保存、分享.
  2. 技术分享图片
  3. 我的界面主要是展示自己保存的搜索资讯,支持删除、分享。
  4. 技术分享图片
  5. 设置界面主要实现搜索站点、初始搜索关键字定义。
  6. 技术分享图片
  7.  搜索站点目前支持:凤凰资讯、参考信息、腾讯资讯、百度资讯:
  8. 技术分享图片
  9. 读取数据
  10.     /*读取内容*/
          shiquan.readNews = function(callback){
              callback = callback || mui.noop;
              
              plus.io.requestFileSystem( plus.io.PRIVATE_DOC, function( fs ) {
                // fs.root是根目录操作对象DirectoryEntry
                //console.log("url="+fs.toURL());
                fs.root.getFile(‘shiquan.json‘,{create:true}, function(fileEntry){
                    fileEntry.file( function(file){
                        console.log(file.size + ‘--‘ + file.name);
                        var fileReader = new plus.io.FileReader();
                        console.log("getFile:" + JSON.stringify(file));
                        fileReader.readAsText(file, ‘utf-8‘);
                        fileReader.onloadend = function(evt) {
                            console.log("11" + evt);
                            console.log("evt.target" + evt.target);
                            console.log(evt.target.result);
                            
                            let news = [];
                            var result = evt.target.result;
                            if(result != "")
                                news = JSON.parse(result);
                            callback({state:1,message:"读取成功!",data:news});
                        }
                    });
                });
            }, function ( e ) {
                callback({state:-1,message:e.message});
            } );
          };

     

  11. 保存、更新数据
  12. /*保存内容*/
          shiquan.saveNews = function(news,callback){
              callback = callback || mui.noop;
              plus.io.requestFileSystem( plus.io.PRIVATE_DOC, function( fs ) {
                // fs.root是根目录操作对象DirectoryEntry
                //console.log("url="+fs.toURL());
                fs.root.getFile(‘shiquan.json‘,{create:true}, function(fileEntry){
                    fileEntry.createWriter( function ( writer ) {
                        writer.onwrite = function ( e ) {
                            console.log( "Write data success!" );
                        };
                        let data = JSON.stringify(news);
                        console.log(data);
                        
                        writer.seek(0);
                        writer.write(data);
                        callback({state:1,message:"保存数据成功!"});
                    }, function ( e ) {
                        callback({state:-1,message:e.message});
                    } );
                });
            }, function ( e ) {
                callback({state:-1,message:e.message});
            } );
          };

    至此分享完毕,App下载地址:http://m3w.cn/shiquan 欢迎提供宝贵意见!

基于Html5 Plus + Vue + Mui 移动App开发(三)-文件操作(读取、保存、更新数据)

标签:读取数据   技术分享   对象   fileread   tor   数据   bubuko   ima   根目录   

原文地址:https://www.cnblogs.com/henxiao25/p/9615538.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!