Cordova 3.x 基础（7） -- Native API的使用

原文：http://rensanning.iteye.com/blog/2021619

移动设备的Hardware接口包括：Accelerometer、Camera、Capture、Compass、Connection、Contacts、Device、Native Events、File、Geolocation、Notification、Storage、Gestures/Multitouch、Messages/Telephone、Bluetooth、NFC、Vibration。Cordova的Native API接口调用很简单，这里列举一下常用的API调用方法，由于Cordova只是个Container，所以UI使用jQuery Mobile（Single Page、脚本嵌入page div内部）。使用“Cordova ：3.4.0、 Andorid ：4.1.1”平台测试通过。完整的源代码：www.rar，Android APK文件：CordovaSample-debug-unaligned.apk

（1）主页面

Html代码  

  1. <!-- Main -->
  2. <div data-role="page" id="main">
  3. <div data-role="header">
  4. <h1>Cordova Sample</h1>
  5. </div>
  6. <div data-role="content">
  7. <ul data-role="listview">
  8. <li><a href="#accelerometer" data-transition="slide">Accelerometer</a></li>
  9. <li><a href="#camera" data-transition="slide">Camera</a></li>
  10. <li><a href="#compass" data-transition="slide">Compass</a></li>
  11. <li><a href="#connection" data-transition="slide">Connection</a></li>
  12. <li><a href="#device" data-transition="slide">Device</a></li>
  13. <li><a href="#geolocation" data-transition="slide">Geolocation</a></li>
  14. <li><a href="#notification" data-transition="slide">Notification</a></li>
  15. <li><a href="#contacts" data-transition="slide">Contacts</a></li>
  16. <li><a href="#file" data-transition="slide">File</a></li>
  17. <li><a href="#inAppBrowser" data-transition="slide">InAppBrowser</a></li>
  18. <li><a href="#storage" data-transition="slide">Storage</a></li>
  19. <li><a href="#database" data-transition="slide">Database</a></li>
  20. </ul>
  21. </div>
  22. </div>

（2）Accelerometer(加速计传感器)

Html代码  

  1. <!-- Accelerometer
  2. $ cordova plugin add org.apache.cordova.device-motion
  3. -->
  4. <div data-role="page" id="accelerometer">
  5. <div data-role="header">
  6. <a data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l">Back</a>
  7. <h1>Accelerometer</h1>
  8. </div>
  9. <div data-role="content">
  10. <a href="#" data-role="button" id="startWatch">Start Watching</a><br>
  11. <a href="#" data-role="button" id="stopWatch">Stop Watching</a><br>
  12. <div id="accvals">Waiting for accelerometer...</div>
  13. <br><br>
  14. <a href="#" data-role="button" id="startWatchOrientation">Start Watch Orientation</a><br>
  15. <a href="#" data-role="button" id="stopWatchOrientation">Stop Watch Orientation</a><br>
  16. <div id="orivals">Waiting for orientation...</div>
  17. </div>
  18. <script type="text/javascript">
  19. var watchID = null;
  20. document.addEventListener(‘deviceready‘, onDeviceReady, false);
  21. function onDeviceReady() {
  22. $("#startWatch").on("click", startWatch);
  23. $("#stopWatch").on("click", stopWatch);
  24. $("#startWatchOrientation").on("click", startWatchOrientation);
  25. $("#stopWatchOrientation").on("click", stopWatchOrientation);
  26. }
  27. function startWatch() {
  28. alert("startWatch");
  29. var options = { frequency: 3000 };
  30. watchID = navigator.accelerometer.watchAcceleration(onAccelSuccess, onAccelError, options);
  31. }
  32. function stopWatch() {
  33. alert("stopWatch");
  34. if (watchID) {
  35. navigator.accelerometer.clearWatch(watchID);
  36. watchID = null;
  37. }
  38. }
  39. function onAccelSuccess(acceleration) {
  40. var element = document.getElementById(‘accvals‘);
  41. element.innerHTML = ‘<strong>Accel X:</strong> ‘ + acceleration.x.toFixed(1) * -1 + ‘<br />‘ +
  42. ‘<strong>Accel Y:</strong> ‘ + acceleration.y.toFixed(1) + ‘<br />‘ +
  43. ‘<strong>Accel Z:</strong> ‘ + acceleration.z.toFixed(1) + ‘<br />‘ +
  44. ‘<strong>Timestamp:</strong> ‘ + acceleration.timestamp + ‘<br />‘;
  45. }
  46. function onAccelError() {
  47. alert(‘Could not Retrieve Accelerometer Data!‘);
  48. }
  49. function deviceOrientationEvent(eventData) {
  50. var alpha = Math.round(eventData.alpha);
  51. var beta = Math.round(eventData.beta);
  52. var gamma = Math.round(eventData.gamma);
  53. var element = document.getElementById(‘orivals‘);
  54. element.innerHTML = ("alpha = " + alpha + " beta = " + beta + " gamma = " + gamma);
  55. }
  56. function startWatchOrientation() {
  57. alert("startWatchOrientation");
  58. window.addEventListener(‘deviceorientation‘, deviceOrientationEvent);
  59. }
  60. function stopWatchOrientation() {
  61. alert("stopWatchOrientation");
  62. window.removeEventListener(‘deviceorientation‘, deviceOrientationEvent);
  63. }
  64. </script>
  65. </div>

（3）Camera(摄像头)

Html代码  

  1. <!-- Camera
  2. $ cordova plugin add org.apache.cordova.camera
  3. -->
  4. <div data-role="page" id="camera">
  5. <div data-role="header">
  6. <a data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l">Back</a>
  7. <h1>Camera</h1>
  8. </div>
  9. <div data-role="content">
  10. <a href="#" data-role="button" id="capturePhoto">Capture Photo</a><br>
  11. <img style="display:none;" id="smallImage" src="" /><p id="smTitle"></p>
  12. <a href="#" data-role="button" id="browsePhoto">Browse Photo Album</a><br>
  13. <img style="display:none;" id="largeImage" src="" /><p id="lgTitle"></p>
  14. </div>
  15. <script type="text/javascript">
  16. var pictureSource;
  17. var destinationType; //
  18. document.addEventListener(‘deviceready‘, onDeviceReady, false);
  19. function onDeviceReady() {
  20. pictureSource = navigator.camera.PictureSourceType;
  21. destinationType = navigator.camera.DestinationType;
  22. $("#capturePhoto").on("click", capturePhoto);
  23. $("#browsePhoto").on("click", browsePhoto);
  24. }
  25. function capturePhoto() {
  26. alert("capturePhoto");
  27. if (!navigator.camera) {
  28. alert("Camera API not supported", "Error");
  29. return;
  30. }
  31. navigator.camera.getPicture(onPhotoDataSuccess, onFail,
  32. { quality: 50,
  33. allowEdit: true,
  34. destinationType: destinationType.DATA_URL });
  35. }
  36. function browsePhoto() {
  37. alert("browsePhoto");
  38. navigator.camera.getPicture(onPhotoURISuccess, onFail,
  39. { quality: 50,
  40. destinationType: destinationType.FILE_URI,
  41. sourceType: pictureSource.PHOTOLIBRARY });
  42. }
  43. //sourceType 0:Photo Library, 1=Camera, 2=Saved Album
  44. //encodingType 0=JPG 1=PNG
  45. function onFail(message) {
  46. alert(‘Response: ‘ + message);
  47. }
  48. function onPhotoDataSuccess(imageData) {
  49. var smallImage = document.getElementById(‘smallImage‘);
  50. smallImage.style.display = ‘block‘;
  51. smallImage.src = "data:image/jpeg;base64," + imageData;
  52. }
  53. function onPhotoURISuccess(imageURI) {
  54. var largeImage = document.getElementById(‘largeImage‘);
  55. largeImage.style.display = ‘block‘;
  56. largeImage.src = imageURI;
  57. }
  58. </script>
  59. </div>

（4）Compass(罗盘)

Html代码  

  1. <!-- Compass
  2. $ cordova plugin add org.apache.cordova.device-orientation
  3. -->
  4. <div data-role="page" id="compass">
  5. <div data-role="header">
  6. <a data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l">Back</a>
  7. <h1>Compass</h1>
  8. </div>
  9. <div data-role="content">
  10. <a href="#" data-role="button" id="startWatchCompass">Start Watch Compass</a><br>
  11. <a href="#" data-role="button" id="stopWatchCompass">Stop Watch Compass</a><br>
  12. <div id="heading">Waiting for heading...</div>
  13. </div>
  14. <script type="text/javascript">
  15. var watchIDCompass = null;
  16. document.addEventListener("deviceready", onDeviceReady, false);
  17. function onDeviceReady() {
  18. $("#startWatchCompass").on("click", startWatchCompass);
  19. $("#stopWatchCompass").on("click", stopWatchCompass);
  20. }
  21. function startWatchCompass() {
  22. alert("startWatchCompass");
  23. var options = { frequency: 3000 };
  24. watchIDCompass = navigator.compass.watchHeading(onCompassSuccess, onCompassError, options);
  25. }
  26. function stopWatchCompass() {
  27. alert("stopWatchCompass");
  28. if (watchIDCompass) {
  29. navigator.compass.clearWatchCompass(watchIDCompass);
  30. watchIDCompass = null;
  31. }
  32. }
  33. function onCompassSuccess(heading) {
  34. var element = document.getElementById(‘heading‘);
  35. element.innerHTML = ‘Current Heading: ‘ + (heading.magneticHeading).toFixed(2);
  36. }
  37. function onCompassError(compassError) {
  38. alert(‘Compass error: ‘ + compassError.code);
  39. }
  40. </script>
  41. </div>

（5）Connection(网络连接状态)

Html代码  

  1. <!-- Connection
  2. $ cordova plugin add org.apache.cordova.network-information
  3. -->
  4. <div data-role="page" id="connection">
  5. <div data-role="header">
  6. <a data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l">Back</a>
  7. <h1>Connection</h1>
  8. </div>
  9. <div data-role="content">
  10. <a href="#" data-role="button" id="checkConnection">Check Connection</a><br>
  11. <div id="connectiontype">Waiting for Connection type...</div>
  12. </div>
  13. <script type="text/javascript">
  14. document.addEventListener("deviceready", onDeviceReady, false);
  15. function onDeviceReady() {
  16. $("#checkConnection").on("click", checkConnection);
  17. }
  18. function checkConnection() {
  19. alert("checkConnection");
  20. var networkState = navigator.connection.type;
  21. var states = {};
  22. states[Connection.UNKNOWN] = ‘Unknown connection‘;
  23. states[Connection.ETHERNET] = ‘Ethernet connection‘;
  24. states[Connection.WIFI] = ‘WiFi connection‘;
  25. states[Connection.CELL_2G] = ‘Cell 2G connection‘;
  26. states[Connection.CELL_3G] = ‘Cell 3G connection‘;
  27. states[Connection.CELL_4G] = ‘Cell 4G connection‘;
  28. states[Connection.CELL] = ‘Cell generic connection‘;
  29. states[Connection.NONE] = ‘No network connection‘;
  30. var element = document.getElementById(‘connectiontype‘);
  31. element.innerHTML = ‘Connection type: ‘ + states[networkState];
  32. }
  33. </script>
  34. </div>

（6）Device(设备信息)

Html代码  

  1. <!-- Device
  2. $ cordova plugin add org.apache.cordova.device
  3. -->
  4. <div data-role="page" id="device">
  5. <div data-role="header">
  6. <a data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l">Back</a>
  7. <h1>Device</h1>
  8. </div>
  9. <div data-role="content">
  10. <a href="#" data-role="button" id="getDeviceProperties">Get Device Properties</a><br>
  11. <div id="deviceProperties">Loading device properties...</div>
  12. </div>
  13. <script type="text/javascript">
  14. document.addEventListener("deviceready", onDeviceReady, false);
  15. function onDeviceReady() {
  16. $("#getDeviceProperties").on("click", getDeviceProperties);
  17. }
  18. function getDeviceProperties() {
  19. alert("getDeviceProperties");
  20. var element = document.getElementById(‘deviceProperties‘);
  21. element.innerHTML = ‘Device Model (Android: product name): ‘ + device.model + ‘<br />‘ +
  22. ‘Cordova version: ‘ + device.cordova + ‘<br />‘ +
  23. ‘Operating system: ‘ + device.platform + ‘<br />‘ +
  24. ‘Device UUID: ‘ + device.uuid + ‘<br />‘ +
  25. ‘Operating system version: ‘ + device.version + ‘<br />‘;
  26. }
  27. </script>
  28. </div>

（7）Geolocation(GPS地理位置服务)

Html代码  

  1. <!-- Geolocation
  2. $ cordova plugin add org.apache.cordova.geolocation
  3. -->
  4. <div data-role="page" id="geolocation">
  5. <div data-role="header">
  6. <a data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l">Back</a>
  7. <h1>Geolocation</h1>
  8. </div>
  9. <div data-role="content">
  10. <a href="#" data-role="button" id="startGeolocationg">Start Geolocationg</a><br>
  11. <a href="#" data-role="button" id="stopGeolocationg">Stop Geolocation</a><br>
  12. <br><br>
  13. <a href="#" data-role="button" id="getCurrentPosition">Get Current Position </a><br>
  14. <div id="geovals">Waiting for geolocation...</div>
  15. </div>
  16. <script type="text/javascript">
  17. var watchGeoID = null;
  18. document.addEventListener("deviceready", onDeviceReady, false);
  19. function onDeviceReady() {
  20. $("#startGeolocationg").on("click", startGeolocationg);
  21. $("#stopGeolocationg").on("click", stopGeolocationg);
  22. $("#getCurrentPosition").on("click", getCurrentPosition);
  23. }
  24. function startGeolocationg() {
  25. alert(‘startGeolocationg‘);
  26. var element = document.getElementById(‘geovals‘);
  27. element.innerHTML = ‘Finding geolocation every 30 seconds...‘
  28. var options = { enableHighAccuracy: true, timeout: 30000 };
  29. watchGeoID = navigator.geolocation.watchPosition(onGeoSuccess, onGeoError, options);
  30. }
  31. function onGeoSuccess(position) {
  32. var element = document.getElementById(‘geovals‘);
  33. element.innerHTML =
  34. ‘<strong>Latitude:</strong> ‘ + position.coords.latitude + ‘<br />‘ +
  35. ‘<strong>Longitude: </strong> ‘ + position.coords.longitude + ‘ <br />‘ +
  36. ‘<strong>Altitude</strong> (in meters): ‘ + position.coords.altitude + ‘ <br />‘ +
  37. ‘<strong>Accuracy</strong> (in meters): ‘ + position.coords.accuracy + ‘ <br />‘ +
  38. ‘<strong>Altitude Accuracy:</strong> ‘ + position.coords.altitudeAccuracy + ‘ <br />‘ +
  39. ‘<strong>Heading</strong> (direction of travel): ‘ + position.coords.heading + ‘ <br />‘ +
  40. ‘<strong>Speed</strong> (meters per second): ‘ + position.coords.speed + ‘ <br />‘ +
  41. ‘<strong>Timestamp:</strong> ‘ + position.timestamp + ‘ <br />‘;
  42. }
  43. function onGeoError(error) {
  44. var element = document.getElementById(‘geovals‘);
  45. element.innerHTML =+ ‘<br>‘ + error.code + error.message;
  46. }
  47. function stopGeolocationg() {
  48. alert(‘stopGeolocationg‘);
  49. var element = document.getElementById(‘geovals‘);
  50. element.innerHTML = ‘<span style="color:red">Geolocation turned off.</span>‘;
  51. if (watchGeoID) {
  52. navigator.geolocation.clearWatch(watchGeoID);
  53. watchGeoID = null;
  54. }
  55. }
  56. function getCurrentPosition() {
  57. alert(‘getCurrentPosition‘);
  58. navigator.geolocation.getCurrentPosition(onPositionSuccess, onPositionError);
  59. }
  60. function onPositionSuccess(position) {
  61. var element = document.getElementById(‘geovals‘);
  62. element.innerHTML =+ (‘Latitude: ‘ + position.coords.latitude + ‘\n‘ +
  63. ‘Longitude: ‘ + position.coords.longitude + ‘\n‘);
  64. };
  65. function onPositionError(error) {
  66. var element = document.getElementById(‘geovals‘);
  67. element.innerHTML =+(‘Error getting GPS Data‘);
  68. }
  69. </script>
  70. </div>

（8）Notification(消息提示)

Html代码  

  1. <!-- Notification
  2. $ cordova plugin add org.apache.cordova.dialogs
  3. $ cordova plugin add org.apache.cordova.vibration
  4. -->
  5. <div data-role="page" id="notification">
  6. <div data-role="header">
  7. <a data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l">Back</a>
  8. <h1>Notification</h1>
  9. </div>
  10. <div data-role="content">
  11. <a href="#" data-role="button" id="showAlert">Show Alert popup</a><br>
  12. <a href="#" data-role="button" id="showConfirm">Show Confirm popup</a><br>
  13. <a href="#" data-role="button" id="showPrompt">Show Prompt popup</a><br>
  14. <br><br>
  15. <a href="#" data-role="button" id="playBeep">Play Beep sound</a><br>
  16. <a href="#" data-role="button" id="vibrate">Vibrate the device</a><br>
  17. </div>
  18. <script type="text/javascript">
  19. var watchGeoID = null;
  20. document.addEventListener("deviceready", onDeviceReady, false);
  21. function onDeviceReady() {
  22. $("#showAlert").on("click", showAlert);
  23. $("#showConfirm").on("click", showConfirm);
  24. $("#showPrompt").on("click", showPrompt);
  25. $("#playBeep").on("click", playBeep);
  26. $("#vibrate").on("click", vibrate);
  27. }
  28. function showAlert() {
  29. navigator.notification.alert(
  30. ‘Alert dialog: You are on fire!‘,
  31. alertDismissed, //callback
  32. ‘Game Over‘,
  33. ‘Done‘
  34. );
  35. }
  36. /*
  37. // Override default HTML alert with native dialog
  38. document.addEventListener(‘deviceready‘, function () {
  39. if (navigator.notification) {
  40. window.alert = function (message) {
  41. navigator.notification.alert(
  42. message,
  43. null,
  44. "My App",
  45. ‘OK‘
  46. );
  47. };
  48. }
  49. }, false);
  50. */
  51. function alertDismissed() {
  52. alert(‘You dismissed the Alert.‘);
  53. }
  54. function onConfirm(buttonIndex) {
  55. alert(‘You selected button ‘ + buttonIndex + ‘\n(button 1 = Restart, button 2 = Exit.)‘);
  56. }
  57. function showConfirm() {
  58. navigator.notification.confirm(
  59. ‘Confirm dialog: You are the winner!‘,
  60. onConfirm,
  61. ‘Game Over‘,
  62. [‘Restart‘,‘Exit‘]
  63. );
  64. }
  65. function onPrompt(results) {
  66. alert("You selected button number " + results.buttonIndex + " and entered " + results.input1 + ‘\n(button 2 = Exit, button 1 = OK.)‘);
  67. }
  68. function showPrompt() {
  69. navigator.notification.prompt(
  70. ‘Please enter your name‘,
  71. onPrompt,
  72. ‘Registration‘,
  73. [‘Ok‘,‘Exit‘],
  74. ‘Jane Doe?‘
  75. );
  76. }
  77. function playBeep() {
  78. navigator.notification.beep(3);
  79. }
  80. function vibrate() {
  81. navigator.notification.vibrate(2000);
  82. }
  83. </script>
  84. </div>

（9）Contacts(联系人)

Html代码  

  1. <!-- Contacts
  2. $ cordova plugin add org.apache.cordova.contacts
  3. -->
  4. <div data-role="page" id="contacts">
  5. <div data-role="header">
  6. <a data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l">Back</a>
  7. <h1>Contacts</h1>
  8. </div>
  9. <div data-role="content">
  10. <label for="fname">First Name:</label>
  11. <input type="text" name="fname" id="fname" value="REN"><br>
  12. <label for="lname">Last Name:</label>
  13. <input type="text" name="lname" id="lname" value="SANNING"><br>
  14. <label for="email">Email:</label>
  15. <input type="text" name="email" id="email" value="[email protected]"><br>
  16. <label for="tel">TEL:</label>
  17. <input type="text" name="tel" id="tel" value="18812345678"><br>
  18. <br>
  19. <a href="#" data-role="button" id="saveContacts">Save</a><br>
  20. </div>
  21. <script type="text/javascript">
  22. document.addEventListener("deviceready", onDeviceReady, false);
  23. function onDeviceReady() {
  24. $("#saveContacts").on("click", saveContacts);
  25. }
  26. function saveContacts() {
  27. alert(‘saveContacts‘);
  28. if (!navigator.contacts) {
  29. alert("Contacts API not supported", "Error");
  30. return;
  31. }
  32. var contact = navigator.contacts.create();
  33. var name = new ContactName();
  34. name.givenName = $(‘#fname‘).val();
  35. name.familyName = $(‘#lname‘).val();
  36. contact.name = name;
  37. contact.displayName = $(‘#fname‘).val() + " " + $(‘#lname‘).val();
  38. contact.emails = [new ContactField(‘home‘, $(‘#email‘).val(), false)];
  39. contact.phoneNumbers = [new ContactField(‘home‘, $(‘#tel‘).val(), false)];
  40. contact.save(
  41. function() {
  42. alert("OK!");
  43. },
  44. function() {
  45. alert("Error!");
  46. }
  47. );
  48. }
  49. </script>
  50. </div>

（10）File(文件系统处理 )

Html代码  

  1. <!-- File
  2. $ cordova plugin add org.apache.cordova.file
  3. $ cordova plugin add org.apache.cordova.file-transfer
  4. -->
  5. <div data-role="page" id="file">
  6. <div data-role="header">
  7. <a data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l">Back</a>
  8. <h1>File</h1>
  9. </div>
  10. <div data-role="content">
  11. <input type="text" id="userInput" name="userInput" value="I‘m rensanning."><br>
  12. <a href="#" data-role="button" id="writeToFile">Write To File</a><br>
  13. <a href="#" data-role="button" id="readFile">Read File</a><br>
  14. <p id="data1"></p><p id="data2"></p><br>
  15. <a href="#" data-role="button" id="deleteFile">Delete File</a><br>
  16. </div>
  17. <script type="text/javascript">
  18. document.addEventListener("deviceready", onDeviceReady, false);
  19. function onDeviceReady() {
  20. $("#writeToFile").on("click", writeToFile);
  21. $("#readFile").on("click", readFile);
  22. $("#deleteFile").on("click", deleteFile);
  23. }
  24. function writeToFile() {
  25. window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFSForWrite, fail);
  26. }
  27. function gotFSForWrite(fileSystem) {
  28. fileSystem.root.getFile("CordovaSample.txt", {create: true, exclusive: false}, gotWriteFileEntry, fail);
  29. }
  30. function gotWriteFileEntry(fileEntry) {
  31. fileEntry.createWriter(gotFileWriter, fail);
  32. }
  33. function gotFileWriter(writer) {
  34. var userText = $(‘#userInput‘).val();
  35. writer.seek(writer.length);
  36. writer.write(‘\n\n‘ + userText);
  37. writer.onwriteend = function(evt){
  38. alert("You wrote ‘ " + userText + " ‘ at the end of the file.");
  39. }
  40. $(‘#userInput‘).val("");
  41. }
  42. function readFile() {
  43. window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFSForRead, fail);
  44. }
  45. function gotFSForRead(fileSystem) {
  46. fileSystem.root.getFile("CordovaSample.txt", null, gotReadFileEntry, fail);
  47. }
  48. function gotReadFileEntry(fileEntry) {
  49. fileEntry.file(gotFileRead, fail);
  50. }
  51. function gotFileRead(file){
  52. readDataUrl(file);
  53. readAsText(file);
  54. }
  55. function readDataUrl(file) {
  56. var reader = new FileReader();
  57. reader.onloadend = function(evt) {
  58. var element = document.getElementById(‘data1‘);
  59. element.innerHTML = ‘<strong>Read as data URL:</strong> <br><pre>‘ + evt.target.result + ‘</pre>‘;
  60. };
  61. reader.readAsDataURL(file);
  62. }
  63. function readAsText(file) {
  64. var reader = new FileReader();
  65. reader.onloadend = function(evt) {
  66. var element = document.getElementById(‘data2‘);
  67. element.innerHTML = ‘<strong>Read as data text:</strong> <br><pre>‘ + evt.target.result + ‘</pre>‘;
  68. };
  69. reader.readAsText(file);
  70. }
  71. function deleteFile() {
  72. window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFSForRemove, fail);
  73. }
  74. function gotFSForRemove(fileSystem) {
  75. fileSystem.root.getFile("CordovaSample.txt", {create: false, exclusive: false}, gotRemoveFileEntry, fail);
  76. }
  77. function gotRemoveFileEntry(fileEntry){
  78. fileEntry.remove(
  79. function(entry) {
  80. alert("Removal succeeded");
  81. },
  82. function(error) {
  83. alert("Error removing file: " + error.code);
  84. });
  85. }
  86. function fail(error) {
  87. alert(error.code);
  88. }
  89. </script>
  90. </div>

（11）InAppBrowser(Web浏览)

Html代码  

  1. <!-- InAppBrowser
  2. $ cordova plugin add org.apache.cordova.inappbrowser
  3. -->
  4. <div data-role="page" id="inAppBrowser">
  5. <div data-role="header">
  6. <a data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l">Back</a>
  7. <h1>InAppBrowser</h1>
  8. </div>
  9. <div data-role="content">
  10. <label for="url">URL:</label>
  11. <input type="text" id="url" name="url" value="http://www.baidu.com"><br>
  12. <a href="#" data-role="button" id="openURL">Open URL</a><br>
  13. </div>
  14. <script type="text/javascript">
  15. document.addEventListener("deviceready", onDeviceReady, false);
  16. function onDeviceReady() {
  17. $("#openURL").on("click", openURL);
  18. }
  19. function openURL() {
  20. alert(‘openURL‘);
  21. var ref = window.open($(‘#url‘).val(), ‘_blank‘, ‘location=yes‘);
  22. ref.addEventListener(‘loadstart‘, function(event) { alert(‘start: ‘ + event.url); });
  23. ref.addEventListener(‘loadstop‘, function(event) { alert(‘stop: ‘ + event.url); });
  24. ref.addEventListener(‘loaderror‘, function(event) { alert(‘error: ‘ + event.message); });
  25. ref.addEventListener(‘exit‘, function(event) { alert(event.type); });
  26. }
  27. </script>
  28. </div>

    

（12）Storage(数据存储)

Html代码  

  1. <!-- Storage -->
  2. <div data-role="page" id="storage">
  3. <div data-role="header">
  4. <a data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l">Back</a>
  5. <h1>Storage</h1>
  6. </div>
  7. <div data-role="content">
  8. <label for="key">Key:</label>
  9. <input type="text" id="key" name="key" value="item_name"><br>
  10. <label for="val">Value:</label>
  11. <input type="text" id="val" name="val" value="item_value"><br>
  12. <a href="#" data-role="button" id="saveItem">Save Item</a><br>
  13. <a href="#" data-role="button" id="getItem">Get Item</a><br>
  14. <a href="#" data-role="button" id="deleteItem">Delete Item</a><br>
  15. </div>
  16. <script type="text/javascript">
  17. document.addEventListener("deviceready", onDeviceReady, false);
  18. function onDeviceReady() {
  19. $("#saveItem").on("click", saveItem);
  20. $("#getItem").on("click", getItem);
  21. $("#deleteItem").on("click", deleteItem);
  22. }
  23. function saveItem() {
  24. alert(‘saveItem‘);
  25. window.localStorage.setItem($(‘#key‘).val(), $(‘#val‘).val());
  26. }
  27. function getItem() {
  28. alert(‘getItem‘);
  29. var item_value = window.localStorage.getItem($(‘#key‘).val());
  30. alert(item_value);
  31. }
  32. function deleteItem() {
  33. alert(‘deleteItem‘);
  34. window.localStorage.removeItem($(‘#key‘).val());
  35. }
  36. </script>
  37. </div>

（13）Database(客户端数据库)

Html代码  

  1. <!-- Database -->
  2. <div data-role="page" id="database">
  3. <div data-role="header">
  4. <a data-role="button" data-rel="back" data-direction="reverse" data-icon="arrow-l">Back</a>
  5. <h1>Database</h1>
  6. </div>
  7. <div data-role="content">
  8. <label for="id">ID:</label>
  9. <input type="text" id="id" name="id" value="12345"><br>
  10. <label for="data">Data:</label>
  11. <input type="text" id="data" name="data" value="Data Value"><br>
  12. <a href="#" data-role="button" id="saveToDatabase">Save To Database</a><br>
  13. <a href="#" data-role="button" id="getFromDatabase">Get From Database</a><br>
  14. </div>
  15. <script type="text/javascript">
  16. var db;
  17. document.addEventListener("deviceready", onDeviceReady, false);
  18. function onDeviceReady() {
  19. $("#saveToDatabase").on("click", saveToDatabase);
  20. $("#getFromDatabase").on("click", getFromDatabase);
  21. db = window.openDatabase("MyDatabase", "1.0", "Cordova Sample", 200000);
  22. db.transaction(function(tx) {
  23. tx.executeSql(‘DROP TABLE IF EXISTS MyTable‘);
  24. tx.executeSql(‘CREATE TABLE IF NOT EXISTS MyTable (id unique, data)‘);
  25. },
  26. function(err) {
  27. alert("Error processing SQL: " + err.code);
  28. });
  29. }
  30. function saveToDatabase() {
  31. alert(‘saveToDatabase‘);
  32. db.transaction(function(tx) {
  33. tx.executeSql("INSERT INTO MyTable (id, data) VALUES (?, ?)",
  34. [$(‘#id‘).val(), $(‘#data‘).val()],
  35. function(tx, rs) {
  36. alert("Your SQLite query was successful!");
  37. },
  38. function(tx, e) {
  39. alert("SQLite Error: " + e.message);
  40. });
  41. });
  42. }
  43. function getFromDatabase() {
  44. alert(‘getFromDatabase‘);
  45. db.transaction(function(tx) {
  46. tx.executeSql("SELECT id,data FROM MyTable ORDER BY id",
  47. [],
  48. function (tx, rs) {
  49. for (var i = 0; i < rs.rows.length; i++) {
  50. alert(rs.rows.item(i).id + "=" + rs.rows.item(i).data);
  51. }
  52. },
  53. function(tx, e) {
  54. alert("SQLite Error: " + e.message);
  55. });
  56. });
  57. }
  58. </script>
  59. </div>

  • www.rar (581.8 KB)
  • 下载次数: 1175
时间： 2024-10-11 09:34:27

Cordova 3.x 基础（7） -- Native API的使用的相关文章

Cordova 3.x 基础（1） -- 环境搭建（Windows / Android）

Cordova 3.x 基础(1) -- 环境搭建(Windows / Android) Mobile App分为三大类:Native App,Hybrid App,Web App.其中Hybrid App介于Native App和Web App之间,它能兼顾Native App的良好用户体验及强大的功能并具有Web App跨平台快速开发的优势.缺点在于依赖于各平台的WebView,WebView的性能好坏直接决定了Hybrid App的性能. 目前国内外的Hybrid App开发框架很多,比较

Native Application 开发详解（直接在程序中调用 ntdll.dll 中的 Native API，有内存小、速度快、安全、API丰富等8大优点）

文章目录:                   1. 引子: 2. Native Application Demo 展示: 3. Native Application 简介: 4. Native Application 有何妙用: 5. MJ0011 关于 Native Application 的文章整理: 6. 互联网上其他关于 Native Application 的文章整理: 7. 小结: 1. 引子: 其实在好久以前就看了 MJ0011 翻译的那个<Native 应用程序详细>系列的文

使用HTML5本地 Drag和Drop API（native API)

人人都爱使用方便..具有互动的用户界面.并且随着智能手机的引入,用户的期望瞬间高了一大截.他们希望网站一目了然,交互动作尽人皆知.总之,他们希望你的网站使用起来超级简单. 让你的用户能在你的网站实现拖拽之类的操作吧,这会让你的网站更加具有交互性.因为人们都知道如何把东西从X拖到Y位置,知道如果把A拖到B前面的话,那么A就会先显示出来. 处理拖动,拖入之类的操作以前总是javascript的事情,开发者们早先也有自己的方法构建交互动作或者使用预制解决方案.随着HTML5 Drag和Drop API

Cordova 3.x 基础（6） -- Sample工程解析

原文http://rensanning.iteye.com/blog/2020843 (1)通过Cordova CLI创建Cordova工程 最简化创建应用: 引用 cordova create app1 ***默认使用package名:io.cordova.hellocordova.应用名:HelloCordova. 指定package名和应用名: 引用 cordova create app2 com.rensanning.app.cordova CordovaSample ***也可以单独只

Cordova 3.x 基础（1） -- 环境搭建（Windows / Android）（转）

原文地址:http://rensanning.iteye.com/blog/2016364 CordovaPhoneGap Mobile App分为三大类:Native App,Hybrid App,Web App.其中Hybrid App介于Native App和Web App之间,它能兼顾Native App的良好用户体验及强大的功能并具有Web App跨平台快速开发的优势.缺点在于依赖于各平台的WebView,WebView的性能好坏直接决定了Hybrid App的性能. 目前国内外的Hy

Unity在Android和iOS中如何调用Native API

本文主要是对unity中如何在Android和iOS中调用Native API进行介绍. 首先unity支持在C#中调用C++ dll,这样可以在Android和iOS中提供C++接口在unity中调用.利用这一特性,可以扩展unity的功能.例如集成和调用第三方库.同时为了满足对unity接口的一致性,可以考虑在android和iOS上提供相同的接口供C#调用. 这里列举以下两个例子. 1. 1. 以弹出一个覆盖部分屏幕的webview为例来说明如何从C#调用Native接口. 2. 2. 简

Cordova 3.x 基础（3） -- 调试Debug工具

Cordova 3.x 基础(3) -- 调试Debug工具 (1)Ripple Emulator 是基于Google Chrome的移动应用模拟器,已经捐赠给了ASF.Apache Ripple:http://ripple.incubator.apache.org/ Chrome Webstore安装地址: https://chrome.google.com/webstore/detail/geelfhphabnejjhdalkjhgipohgpdnoc 安装Ripple Emulator 引

HDFS基础和java api操作

1. 概括 适合一次写入多次查询情况,不支持并发写情况 通过hadoop shell 上传的文件存放在DataNode的block中,通过linux shell只能看见block,看不见文件(HDFS将客户端的大文件存放在很多节点的数据块中,Block本质上是一个逻辑概念,它是hdfs读写数据的基本单位) HDFS中,如果一个文件小于一个数据块的大小,并不占用整个数据块存储空间 2. fs 可以使用hdfs shell操作hdfs,常用 fs命令如下: eg: hadoop fs -cat fi

使用Tcl脚本调用STC平台的Native API实现测试对象、Device、StreamBlock的创建和配置

环境配置如下: 在Windows的Conmand下操作 # # Configuration file(CommonConFig.tcl) # # Initializing the Script. # This script is used to set common configuration paramters used with the STC-300 class. #Step 1: Load Spirent TestCenter Automation API. # Type in the