[转载]Cordova 3.x 基础(7) -- Native API的使用 - Fish Where The Fish Are - ITeye技术网站

[转载]Cordova 3.x 基础(7) — Native API的使用 – Fish Where The Fish Are – ITeye技术网站.

移动设备的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.rarAndroid 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=Camera2=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=“rensanning@gmail.com”><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)
  • 下载次数: 601
赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏