1. 程式人生 > >基於Html5 Plus + Vue + Mui 移動App開發(三)-文件操作(讀取、保存、更新數據)

基於Html5 Plus + Vue + Mui 移動App開發(三)-文件操作(讀取、保存、更新數據)

mes das parse 移動 分享 gif ont 包括 ole

  實全資訊采用基於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開發(三)-文件操作(讀取、保存、更新數據)