モバイルウェブミドルウェアphonegap 2(モバイル端末APIを呼び出す)

16396 ワード
and roid httml 5 ファイル Phone Gap storge
この記事では、phonegapでローカルAPIを呼び出すプラグインについて説明します.
一、どのようなプラグインがありますか.
Accelerometerデバイススクリーンジェスチャーセンサーをクリック(これがあれば重力誘導系のゲームを開発できる)
Camreaは設備カメラを呼び出して写真を採取する
Captureデバイスのメディア収集アプリケーションを使用してメディアファイルを呼び出す
Compassデバイス移動の方向を取得
Connectionネットワークの状況とセルラーネットワークの情報をすばやくチェック
Contactsデバイス連絡先関連アクション
デバイス情報取得
Events JavaScriptによるローカルアクティビティの取得
File JavaScriptでローカルファイルシステムを呼び出す
Geolocationにより、アプリケーションが地理情報にアクセスできます.
Globalizationの国際化
Mediaオーディオファイルの録画と再生
Notificationデバイスの視覚、音声、触覚フィードバック
Splashscreen起動画面
Storageキャプチャデバイスのローカルストレージオプション
 
二、プラグインの使用:
まず、呼び出しプラグインのhtmlにcordova-2.2.2.0を導入する.js(ダウンロードしたリソースのlibandroidディレクトリの下);
次に、2つの一般的なプラグインの使用を見てみましょう.
1、Fileローカルファイルの読み書き
ファイルの書き込み

  
  
  
  
    
   
   
   
   
  1. // Wait for Cordova to load
    2. 
   
   
   
   
  2. document.addEventListener("deviceready", onDeviceReady, false); 
    3. 
   
   
   
   
  3.  
    4. 
   
   
   
   
  4. // Cordova is ready 
    5. 
   
   
   
   
  5. function onDeviceReady() { 
    6. 
   
   
   
   
  6.     window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail); 
    7. 
   
   
   
   
  7. } 
    8. 
   
   
   
   
  8.  
    9. 
   
   
   
   
  9. function gotFS(fileSystem) { 
    10. 
   
   
   
   
  10.  //             ,    file:///mnt/sdcard 
    11. 
   
   
   
   
  11.     fileSystem.root.getFile("readme.txt", {create: true, exclusive: false}, gotFileEntry, fail); 
    12. 
   
   
   
   
  12. } 
    13. 
   
   
   
   
  13.  
    14. 
   
   
   
   
  14. function gotFileEntry(fileEntry) { 
    15. 
   
   
   
   
  15.     fileEntry.createWriter(gotFileWriter, fail); 
    16. 
   
   
   
   
  16.     //fileEntry.createWriter(seek_ex, fail); 
    17. 
   
   
   
   
  17. } 
    18. 
   
   
   
   
  18.  
    19. 
   
   
   
   
  19. //seek               
    20. 
   
   
   
   
  20. function seek_ex(writer) { 
    21. 
   
   
   
   
  21.     writer.onwrite = function(evt) { 
    22. 
   
   
   
   
  22.         console.log("write success"); 
    23. 
   
   
   
   
  23.     };  
    24. 
   
   
   
   
  24.     writer.seek(writer.length); 
    25. 
   
   
   
   
  25.     writer.write("appended text"); 
    26. 
   
   
   
   
  26. }; 
    27. 
   
   
   
   
  27.  
    28. 
   
   
   
   
  28. function gotFileWriter(writer) { 
    29. 
   
   
   
   
  29.     writer.onwriteend = function(evt) { 
    30. 
   
   
   
   
  30.         console.log("contents of file now 'some sample text'"); 
    31. 
   
   
   
   
  31.         writer.truncate(21);  // 21   
    32. 
   
   
   
   
  32.         writer.onwriteend = function(evt) { 
    33. 
   
   
   
   
  33.             console.log("contents of file now 'some sample'"); 
    34. 
   
   
   
   
  34.         }; 
    35. 
   
   
   
   
  35.     }; 
    36. 
   
   
   
   
  36.     writer.write("some sample text   ");//  
    37. 
   
   
   
   
  37. } 
    38. 
   
   
   
   
  38.  
    39. 
   
   
   
   
  39. function fail(error) { 
    40. 
   
   
   
   
  40.     console.log(error.code); 
    41. 
   
   
   
   
  41. } 
    42.

ファイルの読み出し、ここで注意しなければならないのは、私たちが読み出したファイルはUTF-8符号化フォーマットが望ましいことです.そうしないと、中国語が文字化されません.

  
  
  
  
    
   
   
   
   
  1.  // Wait for Cordova to load 
    2. 
   
   
   
   
  2.     function onLoad() { 
    3. 
   
   
   
   
  3.         document.addEventListener("deviceready", onDeviceReady, false); 
    4. 
   
   
   
   
  4.     } 
    5. 
   
   
   
   
  5.  
    6. 
   
   
   
   
  6.     // Cordova is ready 
    7. 
   
   
   
   
  7.     function onDeviceReady() { 
    8. 
   
   
   
   
  8.         window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail); 
    9. 
   
   
   
   
  9.     } 
    10. 
   
   
   
   
  10.  
    11. 
   
   
   
   
  11.     function gotFS(fileSystem) { 
    12. 
   
   
   
   
  12.         fileSystem.root.getFile("readme.txt", null, gotFileEntry, fail); 
    13. 
   
   
   
   
  13.     } 
    14. 
   
   
   
   
  14.  
    15. 
   
   
   
   
  15.     function gotFileEntry(fileEntry) { 
    16. 
   
   
   
   
  16.         fileEntry.file(gotFile, fail); 
    17. 
   
   
   
   
  17.     } 
    18. 
   
   
   
   
  18.  
    19. 
   
   
   
   
  19.     function gotFile(file){ 
    20. 
   
   
   
   
  20.         readAsText(file); 
    21. 
   
   
   
   
  21.     } 
    22. 
   
   
   
   
  22.  
    23. 
   
   
   
   
  23.     function readAsText(file) { 
    24. 
   
   
   
   
  24.         var reader = new FileReader(); 
    25. 
   
   
   
   
  25.         reader.onloadend = function(evt) { 
    26. 
   
   
   
   
  26.             console.log("Read as text"); 
    27. 
   
   
   
   
  27.             $("#contents").append("<div>Read as text</div>"); 
    28. 
   
   
   
   
  28.             console.log(evt.target.result); 
    29. 
   
   
   
   
  29.             $("#contents").append("<div>"+evt.target.result+"</div>"); 
    30. 
   
   
   
   
  30.         }; 
    31. 
   
   
   
   
  31.         reader.readAsText(file); 
    32. 
   
   
   
   
  32.     } 
    33. 
   
   
   
   
  33.  
    34. 
   
   
   
   
  34.     function fail(evt) { 
    35. 
   
   
   
   
  35.         console.log(evt.target.error.code); 
    36. 
   
   
   
   
  36.     } 
    37.

2、Storageのデータストレージ
phonegapのデータストレージには、localStorageとsqliteデータベースの2つの方法があります.
localStorageはhtml 5に付属するデータ格納方式で、phonegapがなくても使用できます.
主にsqliteデータベースの削除変更呼び出しについて説明します.
localStorageの簡単な使用例を説明します.(window.localStorageはjson構造に似たオブジェクトです)

  
  
  
  
    
   
   
   
   
  1. window.localStorage.setItem("key", "value"); 
    2. 
   
   
   
   
  2. var keyname = window.localStorage.key(i); 
    3. 
   
   
   
   
  3. // keyname is now equal to "key" 
    4. 
   
   
   
   
  4. var value = window.localStorage.getItem("key"); 
    5. 
   
   
   
   
  5. // value is now equal to "value" 
    6. 
   
   
   
   
  6. window.localStorage.removeItem("key"); 
    7. 
   
   
   
   
  7. window.localStorage.setItem("key2", "value2"); 
    8. 
   
   
   
   
  8. window.localStorage.clear(); 
    9.

sqliteの呼び出しを見てみましょう.

  
  
  
  
    
   
   
   
   
  1.  // Wait for Cordova to load 
    2. 
   
   
   
   
  2.     // 
    3. 
   
   
   
   
  3.     document.addEventListener("deviceready", onDeviceReady, false); 
    4. 
   
   
   
   
  4.  
    5. 
   
   
   
   
  5.     // Populate the database  
    6. 
   
   
   
   
  6.     //   ，    
    7. 
   
   
   
   
  7.     function populateDB(tx) { 
    8. 
   
   
   
   
  8.         tx.executeSql('DROP TABLE IF EXISTS DEMO'); 
    9. 
   
   
   
   
  9.         tx.executeSql('CREATE TABLE IF NOT EXISTS DEMO (id unique, data)'); 
    10. 
   
   
   
   
  10.         tx.executeSql('INSERT INTO DEMO (id, data) VALUES (1, "First row")'); 
    11. 
   
   
   
   
  11.         tx.executeSql('INSERT INTO DEMO (id, data) VALUES (2, "Second row")'); 
    12. 
   
   
   
   
  12.     } 
    13. 
   
   
   
   
  13.  
    14. 
   
   
   
   
  14.     // Query the database 
    15. 
   
   
   
   
  15.     //        ，          
    16. 
   
   
   
   
  16.     function queryDB(tx) { 
    17. 
   
   
   
   
  17.         tx.executeSql('SELECT * FROM DEMO', [], querySuccess, errorCB); 
    18. 
   
   
   
   
  18.     } 
    19. 
   
   
   
   
  19.  
    20. 
   
   
   
   
  20.     // Query the success callback 
    21. 
   
   
   
   
  21.     //        
    22. 
   
   
   
   
  22.     function querySuccess(tx, results) { 
    23. 
   
   
   
   
  23.         var len = results.rows.length; 
    24. 
   
   
   
   
  24.         console.log("DEMO table: " + len + " rows found."); 
    25. 
   
   
   
   
  25.         for (var i=0; i<len; i++){ 
    26. 
   
   
   
   
  26.             console.log("Row = " + i + " ID = " + results.rows.item(i).id + " Data =  " + results.rows.item(i).data); 
    27. 
   
   
   
   
  27.             $('#database').append("<tr><td class='id'>"+results.rows.item(i).id+"</td><td class='data'>"+results.rows.item(i).data+"</td></tr>"); 
    28. 
   
   
   
   
  28.         } 
    29. 
   
   
   
   
  29.     } 
    30. 
   
   
   
   
  30.  
    31. 
   
   
   
   
  31.     // Transaction error callback 
    32. 
   
   
   
   
  32.     // 
    33. 
   
   
   
   
  33.     function errorCB(err) { 
    34. 
   
   
   
   
  34.         console.log("Error processing SQL: "+err.code); 
    35. 
   
   
   
   
  35.     } 
    36. 
   
   
   
   
  36.  
    37. 
   
   
   
   
  37.     // Transaction success callback 
    38. 
   
   
   
   
  38.     // 
    39. 
   
   
   
   
  39.     function successCB() { 
    40. 
   
   
   
   
  40.         var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000); 
    41. 
   
   
   
   
  41.         db.transaction(queryDB, errorCB); 
    42. 
   
   
   
   
  42.     } 
    43. 
   
   
   
   
  43.  
    44. 
   
   
   
   
  44.     // Cordova is ready 
    45. 
   
   
   
   
  45.     // 
    46. 
   
   
   
   
  46.     function onDeviceReady() { 
    47. 
   
   
   
   
  47.         var db = window.openDatabase("Database", "1.0", "Cordova Demo", 200000); 
    48. 
   
   
   
   
  48.         db.transaction(populateDB, errorCB, successCB); 
    49. 
   
   
   
   
  49.     } 
    50.

以上のコードでは、挿入とクエリーについて説明しています.変更と削除の方法は挿入に似ていますが、sql文が異なるので、sqliteのsql文を自分で補充してください.
 
次回予告:phonegapのプラグイン開発
これからどうなるか知りたいなら、次の分解を聞いてください.
JSFL実用例
MATLAB|こまごました知識(ネットワークから)