[转载]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.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;
21.     document.addEventListener(‘deviceready’, onDeviceReady, false);
22.     function onDeviceReady() {
23.       $(“#startWatch”).on(“click”, startWatch);
24.       $(“#stopWatch”).on(“click”, stopWatch);
25.       $(“#startWatchOrientation”).on(“click”, startWatchOrientation);
26.       $(“#stopWatchOrientation”).on(“click”, stopWatchOrientation);
27.     }
29.     function startWatch() {
30.       alert(“startWatch”);
32.       var options = { frequency: 3000 };
33.       watchID = navigator.accelerometer.watchAcceleration(onAccelSuccess, onAccelError, options);
34.     }
36.     function stopWatch() {
37.       alert(“stopWatch”);
39.       if (watchID) {
40.         navigator.accelerometer.clearWatch(watchID);
41.         watchID = null;
42.       }
43.     }
45.     function onAccelSuccess(acceleration) {
46.       var element = document.getElementById(‘accvals’);
47.       element.innerHTML = ‘<strong>Accel X:</strong> ‘ + acceleration.x.toFixed(1) * -1 + ‘<br />‘ +
48.                           ‘<strong>Accel Y:</strong> ‘ + acceleration.y.toFixed(1) + ‘<br />‘ +
49.                           ‘<strong>Accel Z:</strong> ‘ + acceleration.z.toFixed(1) + ‘<br />‘ +
50.                           ‘<strong>Timestamp:</strong> ‘ + acceleration.timestamp + ‘<br />‘;
51.     }
53.     function onAccelError() {
54.       alert(‘Could not Retrieve Accelerometer Data!’);
55.     }
57.     function deviceOrientationEvent(eventData) {
58.       var alpha = Math.round(eventData.alpha);
59.       var beta = Math.round(eventData.beta);
60.       var gamma = Math.round(eventData.gamma);
61.       var element = document.getElementById(‘orivals’);
62.       element.innerHTML = (“alpha = ” + alpha + “ beta = ” + beta + “ gamma = ” + gamma);
63.     }
64.     function startWatchOrientation() {
65.       alert(“startWatchOrientation”);
66.       window.addEventListener(‘deviceorientation’, deviceOrientationEvent);
67.     }
68.     function stopWatchOrientation() {
69.       alert(“stopWatchOrientation”);
70.       window.removeEventListener(‘deviceorientation’, deviceOrientationEvent);
71.     }
72.   </script>
73. </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; //
19.     document.addEventListener(‘deviceready’, onDeviceReady, false);
20.     function onDeviceReady() {
21.       pictureSource = navigator.camera.PictureSourceType;
22.       destinationType = navigator.camera.DestinationType;
24.       $(“#capturePhoto”).on(“click”, capturePhoto);
25.       $(“#browsePhoto”).on(“click”, browsePhoto);
26.     }
28.     function capturePhoto() {
29.       alert(“capturePhoto”);
31.       if (!navigator.camera) {
32.           alert(“Camera API not supported”, “Error”);
33.           return;
34.       }
35.       navigator.camera.getPicture(onPhotoDataSuccess, onFail,
36.           { quality: 50,
37.             allowEdit: true,
38.             destinationType: destinationType.DATA_URL });
39.     }
41.     function browsePhoto() {
42.       alert(“browsePhoto”);
44.       navigator.camera.getPicture(onPhotoURISuccess, onFail,
45.           { quality: 50,
46.             destinationType: destinationType.FILE_URI,
47.             sourceType: pictureSource.PHOTOLIBRARY });
48.     }
49.     //sourceType 0:Photo Library, 1=Camera, 2=Saved Album
50.     //encodingType 0=JPG 1=PNG
52.     function onFail(message) {
53.       alert(‘Response: ‘ + message);
54.     }
56.     function onPhotoDataSuccess(imageData) {
57.       var smallImage = document.getElementById(‘smallImage’);
58.       smallImage.style.display = ‘block’;
59.       smallImage.src = “data:image/jpeg;base64,” + imageData;
60.     }
62.     function onPhotoURISuccess(imageURI) {
63.       var largeImage = document.getElementById(‘largeImage’);
64.       largeImage.style.display = ‘block’;
65.       largeImage.src = imageURI;
66.     }
67.   </script>
68. </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;
17.     document.addEventListener(“deviceready”, onDeviceReady, false);
18.     function onDeviceReady() {
19.       $(“#startWatchCompass”).on(“click”, startWatchCompass);
20.       $(“#stopWatchCompass”).on(“click”, stopWatchCompass);
21.     }
22.     function startWatchCompass() {
23.       alert(“startWatchCompass”);
25.       var options = { frequency: 3000 };
26.       watchIDCompass = navigator.compass.watchHeading(onCompassSuccess, onCompassError, options);
27.     }
28.     function stopWatchCompass() {
29.       alert(“stopWatchCompass”);
31.       if (watchIDCompass) {
32.         navigator.compass.clearWatchCompass(watchIDCompass);
33.         watchIDCompass = null;
34.       }
35.     }
36.     function onCompassSuccess(heading) {
37.      var element = document.getElementById(‘heading’);
38.       element.innerHTML = ‘Current Heading: ‘ + (heading.magneticHeading).toFixed(2);
39.     }
40.     function onCompassError(compassError) {
41.       alert(‘Compass error: ‘ + compassError.code);
42.     }
43.   </script>
44. </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.     }
19.     function checkConnection() {
20.       alert(“checkConnection”);
22.       var networkState = navigator.connection.type;
23.       var states = {};
24.       states[Connection.UNKNOWN] = ‘Unknown connection’;
25.       states[Connection.ETHERNET] = ‘Ethernet connection’;
26.       states[Connection.WIFI] = ‘WiFi connection’;
27.       states[Connection.CELL_2G] = ‘Cell 2G connection’;
28.       states[Connection.CELL_3G] = ‘Cell 3G connection’;
29.       states[Connection.CELL_4G] = ‘Cell 4G connection’;
30.       states[Connection.CELL] = ‘Cell generic connection’;
31.       states[Connection.NONE] = ‘No network connection’;
33.       var element = document.getElementById(‘connectiontype’);
34.       element.innerHTML = ‘Connection type: ‘ + states[networkState];
35.     }
36.   </script>
37. </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.     }
19.     function getDeviceProperties() {
20.        alert(“getDeviceProperties”);
22.        var element = document.getElementById(‘deviceProperties’);
23.        element.innerHTML = ‘Device Model (Android: product name): ‘ + device.model + ‘<br />‘ +
24.        ‘Cordova version: ‘ + device.cordova + ‘<br />‘ +
25.        ‘Operating system: ‘ + device.platform + ‘<br />‘ +
26.        ‘Device UUID: ‘ + device.uuid + ‘<br />‘ +
27.        ‘Operating system version: ‘ + device.version + ‘<br />‘;
28.     }
29.   </script>
30. </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;
19.     document.addEventListener(“deviceready”, onDeviceReady, false);
20.     function onDeviceReady() {
21.       $(“#startGeolocationg”).on(“click”, startGeolocationg);
22.       $(“#stopGeolocationg”).on(“click”, stopGeolocationg);
23.       $(“#getCurrentPosition”).on(“click”, getCurrentPosition);
24.     }
26.     function startGeolocationg() {
27.       alert(‘startGeolocationg’);
28.       var element = document.getElementById(‘geovals’);
29.       element.innerHTML = ‘Finding geolocation every 30 seconds…’
30.       var options = { enableHighAccuracy: true, timeout: 30000 };
31.       watchGeoID = navigator.geolocation.watchPosition(onGeoSuccess, onGeoError, options);
32.     }
34.     function onGeoSuccess(position) {
35.       var element = document.getElementById(‘geovals’);
36.       element.innerHTML =
37.       ‘<strong>Latitude:</strong> ‘ + position.coords.latitude + ‘<br />‘ +
38.       ‘<strong>Longitude: </strong> ‘ + position.coords.longitude + ‘ <br />‘ +
39.       ‘<strong>Altitude</strong> (in meters): ‘ + position.coords.altitude + ‘ <br />‘ +
40.       ‘<strong>Accuracy</strong> (in meters): ‘ + position.coords.accuracy + ‘ <br />‘ +
41.       ‘<strong>Altitude Accuracy:</strong> ‘ + position.coords.altitudeAccuracy + ‘ <br />‘ +
42.       ‘<strong>Heading</strong> (direction of travel): ‘ + position.coords.heading + ‘ <br />‘ +
43.       ‘<strong>Speed</strong> (meters per second): ‘ + position.coords.speed + ‘ <br />‘ +
44.       ‘<strong>Timestamp:</strong> ‘ + position.timestamp + ‘ <br />‘;
45.     }
46.     function onGeoError(error) {
47.       var element = document.getElementById(‘geovals’);
48.       element.innerHTML =+ ‘<br>‘ + error.code + error.message;
49.     }
51.     function stopGeolocationg() {
52.       alert(‘stopGeolocationg’);
54.       var element = document.getElementById(‘geovals’);
55.       element.innerHTML = ‘<span style=”color:red”>Geolocation turned off.</span>’;
56.       if (watchGeoID) {
57.         navigator.geolocation.clearWatch(watchGeoID);
58.         watchGeoID = null;
59.       }
60.     }
62.     function getCurrentPosition() {
63.       alert(‘getCurrentPosition’);
64.       navigator.geolocation.getCurrentPosition(onPositionSuccess, onPositionError);
65.     }
66.     function onPositionSuccess(position) {
67.       var element = document.getElementById(‘geovals’);
68.       element.innerHTML =+ (‘Latitude: ‘ + position.coords.latitude + ‘\n’ +
69.                             ‘Longitude: ‘ + position.coords.longitude + ‘\n’);
70.     };
71.     function onPositionError(error) {
72.       var element = document.getElementById(‘geovals’);
73.       element.innerHTML =+(‘Error getting GPS Data’);
74.     }
75.   </script>
76. </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;
21.     document.addEventListener(“deviceready”, onDeviceReady, false);
22.     function onDeviceReady() {
23.       $(“#showAlert”).on(“click”, showAlert);
24.       $(“#showConfirm”).on(“click”, showConfirm);
25.       $(“#showPrompt”).on(“click”, showPrompt);
26.       $(“#playBeep”).on(“click”, playBeep);
27.       $(“#vibrate”).on(“click”, vibrate);
28.     }
30.     function showAlert() {
31.       navigator.notification.alert(
32.         ‘Alert dialog: You are on fire!’,
33.         alertDismissed, //callback
34.         ‘Game Over’,
35.         ‘Done’
36.       );
37.     }
38.     /*
39.     // Override default HTML alert with native dialog
40.     document.addEventListener(‘deviceready’, function () {
41.         if (navigator.notification) {
42.             window.alert = function (message) {
43.                 navigator.notification.alert(
44.                     message,
45.                     null,
46.                     “My App”,
47.                     ‘OK’
48.                 );
49.             };
50.         }
51.     }, false);
52.     */
53.     function alertDismissed() {
54.       alert(‘You dismissed the Alert.’);
55.     }
56.     function onConfirm(buttonIndex) {
57.       alert(‘You selected button ‘ + buttonIndex + ‘\n(button 1 = Restart, button 2 = Exit.)’);
58.     }
59.     function showConfirm() {
60.       navigator.notification.confirm(
61.         ‘Confirm dialog: You are the winner!’,
62.         onConfirm,
63.         ‘Game Over’,
64.         [‘Restart’,’Exit’]
65.       );
66.     }
67.     function onPrompt(results) {
68.       alert(“You selected button number ” + results.buttonIndex + ” and entered ” + results.input1 + ‘\n(button 2 = Exit, button 1 = OK.)’);
69.     }
70.     function showPrompt() {
71.       navigator.notification.prompt(
72.         ‘Please enter your name’,
73.         onPrompt,
74.         ‘Registration’,
75.         [‘Ok’,’Exit’],
76.         ‘Jane Doe?’
77.       );
78.     }
79.     function playBeep() {
80.       navigator.notification.beep(3);
81.     }
82.     function vibrate() {
83.       navigator.notification.vibrate(2000);
84.     }
85.   </script>
86. </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”>
23.     document.addEventListener(“deviceready”, onDeviceReady, false);
24.     function onDeviceReady() {
25.       $(“#saveContacts”).on(“click”, saveContacts);
26.     }
28.     function saveContacts() {
29.       alert(‘saveContacts’);
31.       if (!navigator.contacts) {
32.           alert(“Contacts API not supported”, “Error”);
33.           return;
34.       }
35.       var contact = navigator.contacts.create();
36.       var name = new ContactName();
37.       name.givenName = $(‘#fname’).val();
38.       name.familyName = $(‘#lname’).val();
39.       contact.name = name;
40.       contact.displayName = $(‘#fname’).val() + ” ” + $(‘#lname’).val();
41.       contact.emails = [new ContactField(‘home’, $(‘#email’).val(), false)];
42.       contact.phoneNumbers = [new ContactField(‘home’, $(‘#tel’).val(), false)];
43.       contact.save(
44.         function() {
45.           alert(“OK!”);
46.         },
47.         function() {
48.           alert(“Error!”);
49.         }
50.       );
51.     }
52.   </script>
53. </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>
14.     <a href=“#” data-role=“button” id=“readFile”>Read File</a><br>
15.     <p id=“data1”></p><p id=“data2”></p><br>
17.     <a href=“#” data-role=“button” id=“deleteFile”>Delete File</a><br>
18.   </div>
19.   <script type=“text/javascript”>
21.     document.addEventListener(“deviceready”, onDeviceReady, false);
22.     function onDeviceReady() {
23.       $(“#writeToFile”).on(“click”, writeToFile);
24.       $(“#readFile”).on(“click”, readFile);
25.       $(“#deleteFile”).on(“click”, deleteFile);
26.     }
28.     function writeToFile() {
29.       window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFSForWrite, fail);
30.     }
31.     function gotFSForWrite(fileSystem) {
32.       fileSystem.root.getFile(“CordovaSample.txt”, {create: true, exclusive: false}, gotWriteFileEntry, fail);
33.     }
34.     function gotWriteFileEntry(fileEntry) {
35.       fileEntry.createWriter(gotFileWriter, fail);
36.     }
37.     function gotFileWriter(writer) {
38.      var userText = $(‘#userInput’).val();
39.      writer.seek(writer.length);
40.      writer.write(‘\n\n’ + userText);
41.      writer.onwriteend = function(evt){
42.        alert(“You wrote ‘ ” + userText + ” ‘ at the end of the file.”);
43.      }
44.      $(‘#userInput’).val(“”);
45.     }
47.     function readFile() {
48.       window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFSForRead, fail);
49.     }
50.     function gotFSForRead(fileSystem) {
51.       fileSystem.root.getFile(“CordovaSample.txt”, null, gotReadFileEntry, fail);
52.     }
53.     function gotReadFileEntry(fileEntry) {
54.       fileEntry.file(gotFileRead, fail);
55.     }
56.     function gotFileRead(file){
57.       readDataUrl(file);
58.       readAsText(file);
59.     }
60.     function readDataUrl(file) {
61.       var reader = new FileReader();
62.       reader.onloadend = function(evt) {
63.         var element = document.getElementById(‘data1’);
64.         element.innerHTML = ‘<strong>Read as data URL:</strong> <br><pre>’ + evt.target.result + ‘</pre>‘;
65.       };
66.       reader.readAsDataURL(file);
67.     }
68.     function readAsText(file) {
69.       var reader = new FileReader();
70.       reader.onloadend = function(evt) {
71.         var element = document.getElementById(‘data2’);
72.         element.innerHTML = ‘<strong>Read as data text:</strong> <br><pre>’ + evt.target.result + ‘</pre>‘;
73.       };
74.       reader.readAsText(file);
75.     }
77.     function deleteFile() {
78.       window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFSForRemove, fail);
79.     }
80.     function gotFSForRemove(fileSystem) {
81.       fileSystem.root.getFile(“CordovaSample.txt”, {create: false, exclusive: false}, gotRemoveFileEntry, fail);
82.     }
83.     function gotRemoveFileEntry(fileEntry){
84.       fileEntry.remove(
85.         function(entry) {
86.           alert(“Removal succeeded”);
87.         },
88.         function(error) {
89.           alert(“Error removing file: ” + error.code);
90.       });
91.     }
93.     function fail(error) {
94.       alert(error.code);
95.     }
96.   </script>
97. </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.     }
20.     function openURL() {
21.       alert(‘openURL’);
23.       var ref = window.open($(‘#url’).val(), ‘_blank’, ‘location=yes‘);
24.       ref.addEventListener(‘loadstart’, function(event) { alert(‘start: ‘ + event.url); });
25.       ref.addEventListener(‘loadstop’, function(event) { alert(‘stop: ‘ + event.url); });
26.       ref.addEventListener(‘loaderror’, function(event) { alert(‘error: ‘ + event.message); });
27.       ref.addEventListener(‘exit’, function(event) { alert(event.type); });
28.     }
29.   </script>
30. </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.     }
24.     function saveItem() {
25.       alert(‘saveItem’);
26.       window.localStorage.setItem($(‘#key’).val(), $(‘#val’).val());
27.     }
28.     function getItem() {
29.       alert(‘getItem’);
30.       var item_value = window.localStorage.getItem($(‘#key’).val());
31.       alert(item_value);
32.     }
33.     function deleteItem() {
34.       alert(‘deleteItem’);
35.       window.localStorage.removeItem($(‘#key’).val());
36.     }
37.   </script>
38. </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;
18.     document.addEventListener(“deviceready”, onDeviceReady, false);
19.     function onDeviceReady() {
20.       $(“#saveToDatabase”).on(“click”, saveToDatabase);
21.       $(“#getFromDatabase”).on(“click”, getFromDatabase);
23.       db = window.openDatabase(“MyDatabase”, “1.0”, “Cordova Sample”, 200000);
24.       db.transaction(function(tx) {
25.           tx.executeSQL(‘DROP TABLE IF EXISTS MyTable’);
26.           tx.executeSQL(‘CREATE TABLE IF NOT EXISTS MyTable (id unique, data)’);
27.         },
28.         function(err) {
29.           alert(“Error processing SQL: ” + err.code);
30.         });
31.     }
33.     function saveToDatabase() {
34.       alert(‘saveToDatabase’);
36.       db.transaction(function(tx) {
37.         tx.executeSql(“INSERT INTO MyTable (id, data) VALUES (?, ?)”,
38.                       [$(‘#id’).val(), $(‘#data’).val()],
39.                       function(tx, rs) {
40.                           alert(“Your SQLite query was successful!”);
41.                       },
42.                       function(tx, e) {
43.                           alert(“SQLite Error: ” + e.message);
44.                       });
45.       });
46.     }
47.     function getFromDatabase() {
48.       alert(‘getFromDatabase’);
50.       db.transaction(function(tx) {
51.         tx.executeSql(“SELECT id,data FROM MyTable ORDER BY id”,
52.                       [],
53.                       function (tx, rs) {
54.                           for (var i = 0; i < rs.rows.length; i++) {
55.                               alert(rs.rows.item(i).id + “=” + rs.rows.item(i).data);
56.                           }
57.                       },
58.                       function(tx, e) {
59.                           alert(“SQLite Error: ” + e.message);
60.                       });
61.       });
62.     }
63.   </script>
64. </div>

[转载]Cordova 3.x 基础（10） — UI框架Ionic Framework – Fish Where The Fish Are – ITeye技术网站.

Ionic是Drifty继Codiqa（基于 Web 的 JQuery Mobile构建工具）和Jetstrap（基于 Web 的 Twitter Bootstrap 构建工具）之后的第三个项目。面向使用HTML5开发混合式应用的的前端UI开源框架。

http://ionicframework.com/

Demos http://codepen.io/ionic/public-list
Showcase http://showcase.ionicframework.com/
Forum http://forum.ionicframework.com/
Documentation http://ionicframework.com/docs/
Learn Ionic http://learn.ionicframework.com/
Ionic Crash Course https://www.youtube.com/watch?v=C-UwOWB9Io4
Ionic Tutorial http://ccoenraets.github.io/ionic-tutorial/
Structure of an Ionic App http://mcgivery.com/structure-of-an-ionic-app/

Book:
Manning: Ionic in Action

ngCordova：Cordova API的AngularJS 扩展
Ionicons：免费的icon font
Ionic Creator：在线可视化工具

https://github.com/ecofic/ngCordovaMocks：ngCordovaMocks
https://github.com/driftyco/ionic-cordova-android-vagrant：Ionic Cordova Android Vagrant

官方Blog上推荐的Built with Ionic应用：

• Songhop https://songhop.fm/
• Mallzee http://mallzee.com/
• Sworkit http://sworkit.com/
• Coride https://coride.co/
• Throwback http://www.throwbacknow.com/
• HabitRPG https://habitrpg.com/static/front
• Crafted Here http://www.craft-boom.com/
• FitRPG http://fitrpg.co/

目前版本发布的速度很快，具体可以参考https://github.com/driftyco/ionic/blob/master/CHANGELOG.md

需要注意的是：

• 目前还是Beta版
• 面向Hybrid Mobile App而不是Mobile Web App
• 只支持iOS 6+ / Android 4+

和JQuery Mobile不同的是Ionic只关注的是UI部分，类似的还有Twitter Bootstrap, Foundation, Ratchet, Topcoat 等。可以看看官方对框架的解释：Where does the Ionic Framework fit in?。熟悉Bootstrap的还可以试试基于Angularjs和Bootstrap 3的 Mobile Angular UI with Bootstrap 3。

来源：http://coenraets.org

• 采用Sass/Gulp、基于AngularJS、零JQuery、最小化DOM操作
• 非常棒的性能、漂亮的界面设计、详细的文档、活跃的社区

Ionic提供了很多Directive指令（使用JavaScript来实现语义化标签，类似于jsp的taglib）实现丰富的UI控件、大量的常用icon （Icon Pack）、使用AngularUI Router模块来记录页面路由、采用Hammer.js做多点触控、通过AngularJS的扩展做UI交互、左右滑动菜单、下拉更新、自定义主题（核心CSS基于Sass）…….。官方网站也提供了很详细的使用说明。

安装ionic

引用

$ npm install -g cordova gulp ionic

新建项目

引用

$ ionic start myApp blank  新建一个空白页面
$ ionic start myApp tabs  新建一个带底部标签的页面
$ ionic start myApp sidemenu 新建一个带侧边栏的页面

运行项目

引用

$ cd MyApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

另外项目用到gulp来做自动化项目构建。

其中start一个项目的时候是从github上下载seed工程后展开使用，所以也可以通过Cordova CLI创建一个工程后删除www文件夹，从github上下载seed工程后解压覆盖www文件夹即可。

也可以从http://code.ionicframework.com/手动下载。

–> 2014/05/19
安装或更新时候的错误：

①提示以下错误是因为没有安装Python：

引用

gyp ERR! configure error
gyp ERR! stack Error: Can’t find Python executable “python”, you can set the PYTHON env variable.
gyp ERR! stack     at failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:113:14)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:81:11
gyp ERR! stack     at Object.oncomplete (fs.js:107:15)

②如果安装的是python3比如python-3.4.0，会提示以下错误，安装python-2.7.6就OK啦。

引用

gyp ERR! configure error
gyp ERR! stack Error: Python executable “python” is v3.4.0, which is not supported by gyp.
gyp ERR! stack You can pass the –python switch to point to Python >= v2.5.0 & < 3.0.0.
gyp ERR! stack     at failPythonVersion (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:118:14)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:107:9
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:635:7)
gyp ERR! stack     at ChildProcess.EventEmitter.emit (events.js:98:17)
gyp ERR! stack     at maybeClose (child_process.js:735:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (child_process.js:802:5)

【原因】
查看了一下CLI的源代码，ionic引入了vinyl-fs的依赖，用于npm\node_modules\ionic\lib\ionic \serve.js中，vinyl-fs的vfs.watch(‘www/**/*’)，而它又有子依赖：vinyl-fs@0.1.4 -> glob-watcher@0.0.6 -> gaze@0.6.4。gaze的源码是C++的，需要做本地编译，node-gyp是Node.js本地代码编译构建工具，查看它的安装说明，需要Python2不支持Python3，还需要Visual Studio C++的支持。再查看ionic-cli的修改历史记录，发现是为了支持Livereload才引入了vinyl-fs。

本地测试：

（1）启动Python
进入工程的www文件夹，执行“python -m SimpleHTTPServer 8000”后，在Chrome或Safari中输入“http://localhost:8000”就可以测试了。

（2）启动Gulp
项目用到gulp来做自动化项目构建

修改gulpfile.js

Js代码  

1. var gulp = require(‘gulp’),
2.   connect = require(‘gulp-connect’);
4. gulp.task(‘connect’, function() {
5.   connect.server({
6.     root: ‘www’,
7.     livereload: true
8.   });
9. });
11. gulp.task(‘html’, function () {
12.   gulp.src(‘./www/*.html’).pipe(connect.reload());
13. });
15. gulp.task(‘watch’, function () {
16.   gulp.watch([‘./www/*.html’], [‘html’]);
17. });
19. gulp.task(‘default’, [‘connect’, ‘watch’]);

引用

$ cd myApp
$ npm install -g gulp
$ npm install
$ gulp

访问： http://localhost:8080

（3）其他HTTP server
还有很多其他的Simple HTTP server，比如：http-server 就是一个NodeJS 下很好用的HTTP Server

引用

npm install http-server -g

基本使用：

Html代码  

1. <!DOCTYPE html>
2. <html>
3.   <head>
4.     <meta charset=“utf-8”>
5.     <meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>
6.     <!– Ionic的CSS –>
7.     <link href=“lib/ionic/css/ionic.css” rel=“stylesheet”>
8.     <!– 包含了Ionic核心JS、AngularJS、Ionic的AngularJS扩展、ngAnimate/ngSanitize/ui.router模块 –>
9.     <script src=“lib/ionic/js/ionic.bundle.js”></script>
10.     <SCRIPT LANGUAGE=“JavaScript”>
11.     <!–
12.       // 创建一个AngularJS模块并告诉Angular初期化它
13.       angular.module(‘starter’, [‘ionic’]);
14.     //–>
15.     </SCRIPT>
16.   </head>
17.   <body ng-app=“starter”>
18.     <ion-header-bar class=“bar-positive”>
19.       <h1 class=“title”>header</h1>
20.     </ion-header-bar>
21.     <ion-content padding=“true”>
22.       <h1>Hello wrold!</h1>
23.     </ion-content>
24.     <ion-footer-bar align-title=“left” class=“bar-assertive”>
25.       <h1 class=“title”>footer</h1>
26.     </ion-footer-bar>
27.   </body>
28. </html>

• 整体是 SPA（Single Page Application)
• 除过index.html外的所有页面（放入templates文件夹下）通过Ajax加载
• 基于Angular UI做页面路由
• Controller中做事件绑定和数据绑定
• View复杂的处理使用Directive・Filter
• Model中的共通处理委托给Service、Factory

单纯使用CSS（ionic很多功能是通过JS实现的所以只使用单纯CSS意义不大）：

Html代码  

1. <!DOCTYPE html>
2. <html>
3.   <head>
4.     <meta charset=“utf-8”>
5.     <meta name=“viewport” content=“initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”>
6.     <link href=“lib/ionic/css/ionic.css” rel=“stylesheet”>
7.   </head>
8.   <body>
9.     <div class=“bar bar-header bar-positive”>
10.       <h1 class=“title”>header</h1>
11.     </div>
12.     <div class=“scroll-content has-header has-footer”>
13.       <div class=“card”>
14.         <div class=“item item-divider”>
15.           I’m a Header in a Card!
16.         </div>
17.         <div class=“item item-text-wrap”>
18.           This is a basic Card with some text.
19.         </div>
20.         <div class=“item item-divider”>
21.           I’m a Footer in a Card!
22.         </div>
23.       </div>
24.       <div class=“card”>
25.         <div class=“item item-divider”>
26.           I’m a Header in a Card!
27.         </div>
28.         <div class=“item item-text-wrap”>
29.           This is a basic Card with some text.
30.         </div>
31.         <div class=“item item-divider”>
32.           I’m a Footer in a Card!
33.         </div>
34.       </div>
35.     </div>
36.     <div class=“bar bar-footer bar-positive”>
37.       <h1 class=“title”>footer</h1>
38.     </div>
39.   </body>
40. </html>

AngularJS Chrome调试插件Batarang
Building Beautiful Mobile Apps In Visualforce Using AngularJS And Ionic Part 1、 Part 2、 Part 3
http://www.zhouwenbin.com/tag/ionic/
http://julienrenaux.fr/2014/05/09/ionic-framework-features-you-may-have-missed/

• ionic.rar (6.1 KB)
• 下载次数: 11

[转载]Cordova 3.x 基础（1） — 环境搭建（Windows / Android） – Fish Where The Fish Are – ITeye技术网站.Mobile App分为三大类：Native App,Hybrid App,Web App。其中Hybrid App介于Native App和Web App之间，它能兼顾Native App的良好用户体验及强大的功能并具有Web App跨平台快速开发的优势。缺点在于依赖于各平台的WebView，WebView的性能好坏直接决定了Hybrid App的性能。

目前国内外的Hybrid App开发框架很多，比较有代表的是国外的Cordova(aka PhoneGap)、Sencha Touch、Titanium、Intel XDK、RhoMobile、Xamarin等和国内的AppCan、Rexsee、xFace，而Dr. Dobb’s Journal颁布的2014年度移动开发工具类Jolt大奖中 PhoneGap和Titanium获得Jolt生产力奖。Titanium应该属于Web到Native的Converter，还有一种就是 Native JavaScript的应用，比如Chrome Apps／Firefox OS／Windows 8 apps。

基于开源的Cordova，各大公司都推出了自己的产品，比如：Adobe PhoneGap、Oracle ADF Mobile、SAP Kapsel、IBM Worklight、Microsoft的Visual Studio也支持Cordova。

安装运行

（1）前提环境
安装Ant，把%ANT_HOME%\bin加到Path环境变量中，不然会报Error “executing command ‘ant’”错。

安装Android SDK， 把%Android_HOME%\tools;%Android_HOME%\platform-tools加到Path环境变量中，不然会 报”Error: An error occurred while listing Android targets”错，并提前创建好一个AVD。

关于API版本：

• 3.0需要的是android-17（Android 4.2.2）
• 3.1和3.2需要android-18（Android 4.3）
• 3.3和3.4需要android-19（Android 4.4.2）

安装Node.js

如果需要从git地址安装插件，好需要安装Git

（2）安装Cordova CLI

安装路径：
C:\Documents and Settings\RenSanNing\Application Data\npm\node_modules\cordova

更新Cordova版本

如果安装速度很慢的话可以设置代理：

或者使用国内的镜像站：http://cnpmjs.org

现在最新版本：3.7.0（2014/10/01 发布）

（3）创建并运行project

a.新建一个目录pro，并进入

b.创建一个“myapp”工程

c.进入工程目录

d.添加平台支持

CLI使用各个平台的SDK来创建工程。

更新Cordova工程的版本
cordova platform check
如果有类似“android @ 3.3.0 could be updated to: 3.4.0”的提示可以执行更新
也可以查看platforms\android\assets\www\cordova.js确认当前版本信息
cordova platform update android
如果提示“All platforms are up-to-date.”说明不需要更新。

e.添加插件

插件可以从很多地方安装：
插件名（从plugin repository下载）：cordova plugin add org.apache.cordova.console
git地址：cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
本地地址：cordova plugin add d:\cordova-3.3.0\cordova-plugin-camera
本地文件：cordova plugin add plugin.tar.gz
指定版本
cordova plugin add org.apache.cordova.console@0.2.1
cordova plugin add https://github.com/apache/cordova-plugin-console.git#r0.2.0
cordova plugin add https://github.com/someone/aplugin.git#:/my/sub/dir
cordova plugin add https://github.com/someone/aplugin.git#r0.0.1:/my/sub/dir
等等

f.编译代码

g.运行代码
在模拟器上运行（前提是创建好AVD）

Windows下convert命令冲突，直接“cordova emulate android”会报Error: spawn ENOENT，需要先启动模拟器。

h.在浏览器运行

浏览器访问地址：http://localhost:8000/，就可以和调试页面一样调试app的布局了。如果app中使用了cordova的Native API调用，会弹出以下对话框：

这是因为浏览器无法提供@JavaScriptInterface的接口，Cordova视图通过prompt()和Native交互，这样做是因为Android2.3 simulator的Bug。所以调试页面布局，无视即可。

i.通过USB直接安装到真机

Cordova CLI 采用 Lazy Loading的方式，当你创建Cordova工程、添加平台支持，安装插件等等的时候从服务器上下载相应的文件解压到相应的文件夹中。lazy- loaded的文件存放在系统用户的文件夹下，比如Windows XP是C:\Documents and
Settings\RenSanNing\.cordova。所以第一次使用的时候会比较慢。

常用命令

（1）create <directory> [<id> [<name>]]
创建一个cordova工程，id为package名。

（2）platform [ls | list]
列出该工程支持哪些平台

（3）platform add <platform> [<platform> …]
为工程添加一个或多个平台支持

（4）platform [rm | remove] <platform> [<platform> …]
删除该工程的某个平台支持

（5）platform [up | update] <platform>
更新该工程某个平台的Cordova版本

（6）plugin [ls | list]
列出该工程包含哪些插件

（7）plugin add <path-to-plugin> [<path-to-plugin> …]
为工程添加一个或多个插件

（8）plugin [rm | remove] <plugin-name> [<plugin-name> …]
从该工程中删除某个插件

（9）plugin search [<keyword1> <keyword2> …]
根据关键字从registry中搜索插件

（10）compile [platform…]
编译指定平台的app包

（11）build [<platform> [<platform> […]]]
先做prepare（拷贝文件）后做compile

（12）emulate [<platform> [<platform> […]]]
启动模拟器运行应用

（13）serve [port]
启动本地web服务来访问www，默认端口是8000

详细的内容可以通过cordova help命令查看。

目录结构

（1）目录一览：

（2）config.xml
cordova的配置文件

（3）hooks目录
存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook，比如：before_build、after_build。
Hook可以采用任何编程语言来写，Cordova CLI采用的是Node.js，所以一般都是用它来写。

这里提供了3个常用的Hook脚本：
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

（4）merges目录
存放各个平台特殊的文件，会和www进行合并编译，相同的文件merges下的文件优先。

比如：

编译成iOS应用的话，包含merges/ios/app.js；而Android应用的话，包含www/app.js、merges/android/android.js

（5）platforms目录
各个平台的原生代码工程，不要手动修改，因为在build的时候会被覆盖。

（6）plugins目录
插件目录（cordova提供的原生API也是以插件的形式提供的）。

（7）www目录
源代码目录，在cordova prepare的时候会被copy到各个平台工程的assets\www目录中。
其中index.html为应用的入口文件。

更多：http://cordova.apache.org/docs/en/3.4.0/index.html

[转载]Cordova 3.x 基础（15） — 云端Cordova (Cloud-based Build Services) – Fish Where The Fish Are – ITeye技术网站.通过Web界面上传HTML/CSS/JavaScript源代码后，在云环境（ICE）中把这些代码转换成不同平台的app。以下简单试用了一下PhoneGap Build、AppBuilder、Appery.io、Monaca、SAE云窗调试器等5个服务。

• 编译出来的APK文件除过Monaca获取的权限太多无法安装、SAE云窗调试器只是调试工具，基本都能够很好的实现自动化编译。
• Appery.io编译出来的APK文件最大2.3M、PhoneGap Build编译出来的最小210K。
• PhoneGap Build只是打包所以操作最简单。
• AppBuilder（Icenium）在各个方面都表现良好。

（1）PhoneGap Build https://build.phonegap.com/
①可以通过Git地址或者zip文件上传代码

②上传代码

③点击“Ready to Build”

④左下角各个平台开始编译

⑤红色代表有错误，蓝色代表编译成功，点击成功的图标即可下载app

⑥点击项目名“PG Build App”进入应用详细

同时Phonegap Build被集成到了Adobe的其他产品中，比如Dreamweaver CC、Edge Code CC中。相关的Key需要提前设置，比如：在Apple的开发中心创建认证文件，Cert File->p12 File->App ID->Device ID->Provisioning profile。然后在Phonegap的Account中，在Signing Keys中“add a key”选择p12和mobileprovision文件。具体参考：http://docs.build.phonegap.com/en_US/signing_signing-ios.md.html

（2）AppBuilder（Icenium）  http://www.telerik.com/appbuilder
①创建项目

②IDE主界面

③选择菜单Add > Add from Archive

④确认上传文件的位置及内容

⑤选择菜单Run > build

⑥build成功后即可下载app

（3）Appery.io（Tiggzi）  http://appery.io/
①Dashboard主界面

②创建项目

③IDE主界面

④App设置中可以看到使用的PhoneGap3.3.0

⑤不能上传文件，所以可以通过”Create New”来新建页面

⑥从菜单“Export”导出app

⑦导出中

⑧导出完成后即可下载app

（4）Monaca http://monaca.mobi/
①Dashboard主界面

②创建项目（有很多模板可以选择）

③选择一个模板后输入项目名称

④项目创建完成

⑤点击“Launch IDE”进入IDE主界面

⑥选择Build

⑦Build中

⑧Build完成后可下载app

（5）SAE云窗调试器 http://sae.sina.com.cn/?m=mobile
①需要在SAE应用管理中心新建一个移动应用的托管后编辑代码

②修改完代码后可以在 移动应用 > 应用打包 处build

③Build成功后可下载app

④安装的云窗户调试器

Popular ICEs for mobile hybrid app development

[转载]sencha touch 学习笔记- 安装与环境（2013网页装在兜里） – 互联网Fans – 博客园.

sencha generate app GS ../GS

如果没有问题 就说明 创建项目成功了

然后用iis创建一个虚拟目录，并添加.json mime，就可以直接访问了，

通常作为测试和安装都需要打包

首先打包，打一个测试包，测试包

将目录切换到 项目目录 例如 我创建的目录是E:\extjs\GS2，

1 打包 文件目录包（在phonegap里面是按照本地文件浏览的）

命令：sencha app build package，如果没有问题打包就成功，通常出的问题都是ruby版本安装不对，

打包后在这个目录下E:\extjs\GS2\build\GS2\package 可以浏览，是直接浏览，打开文件即可

再打包一个测试包 为了平时测试号调试

命令：sencha app build testing

浏览目录E:\extjs\GS2\build\GS2\testing

看 js 没有压缩， url也没加时间戳，可以方便调试设断点等

[转载]第二步 使用Cordova 3.0(及以上版本) 创建安卓项目-Android实例教程-eoe 移动开发者论坛 – Powered by Discuz!.环境搭建视频共享链接
百度网盘:http://pan.baidu.com/s/1c0EHfqC

参考资料：
http://www.cnblogs.com/numtech/p/3233469.html
http://blog.sina.com.cn/s/blog_9e245c690101jurr.html
http://roger-588.iteye.com/blog/785682
需要eclipse、Andriod SDK、java、Apache ant、Node.js

一.安装adt-eclipse配置Andriod SDK
1、下载adt-eclipse，地址http://developer.Android.com/sdk/index.html

2、解压到指定路径，例如F:\adt-eclipse，运行SDK Manager.exe

更新，因为谷歌有时候会被墙，所以在不能访问谷歌服务器时请修改hosts文件，参考：http://blog.csdn.net/chinaeran/article/details/10565055
3、打开计算机属性——高级系统设置——环境变量（如上文）
4、配置环境变量
变量：       Android_HOME          值：F:\adt-eclipse\sdk（以你安装目录为准,确认里面有tools和add-ons等多个文件夹）
变量：       Path                      添加值：F:\adt-eclipse\sdk\tools
用户变量： PATH                           值：%Android_HOME%\platform-tools
5、Android SDK配置完成，接下来验证配置是否成功。
6、点击运行——输入cmd——回车——输入adb——回车,如果出现一堆英文，即表示配置成功

二.安装java
1、先下载JAVA，下载地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html
2、安装到指定路径，例如F:\Java
3、打开计算机属性——高级系统设置——环境变量（如上文）
4、配置环境变量
变量： JAVA_HOME          值： 安装路径：F:\Java\jdk1.6.0_10
变量： Path                添加值：%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
变量： CLASSPATH          值：.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar
5、JAVA配置完成，接下来验证配置是否成功。
6、点击运行——输入cmd——回车——输入javac——回车，如果出现一堆英文，即表示配置成功。

三.安装Apache Ant
1、下载Apache ant，地址: http://ant.apache.org/bindownload.cgi
2、解压到指定路径，例如F:\apache-ant
3、打开计算机属性——高级系统设置——环境变量（如上文）
4、配置环境变量
变量： ANT_HOME          值： 你刚解压到的路径：F:\apache-ant
变量： Path              添加值：%ANT_HOME%\bin
5、Apache Ant配置完成，接下来验证配置是否成功。
6、点击运行——输入cmd——回车——输入ANT——回车
如果没有指定build.xml就会输出：
Buildfile: build.xml does not exist!         Build failed
有指定会输出：
BUILD SUCCESSFUL

四.使用Cordova3.0创建安卓项目
1、安装Node.js,下载地址：http://nodejs.org/。
2、打开命令行，运行：npm install -g cordova
注意加@版本号可以安装指定版本，如
npm install -g cordova@3.0.0
3、把盘符转到想要创建项目的目录，比如d:\。
4、运行：cordova create hello com.example.hello HelloWorld
将在d:\hello下创建名为HelloWorld的项目，HTML5文件在d:\hello\www目录里。
5、运行：cd hello
6、运行：cordova platform add android 之后可以看到d:\hello\platforms\android里出现Android项目。
7. 打开Eclispe，导入项目d:\hello\platforms\android，HelloWorld。
8. 可能项目有一些错误，把Android Project Build Target设置为最高等级的API Level一般就能解决。
9. 然后就可以用Eclipse启动项目了。

[转载]Express4 启航指南 – 聂微东 – 博客园.

　　确实有感而发，Nodejs真的发展太快了，这么 说的原因有两点：自己去年冬天买了本《了不起的Node.js》，里面介绍Express的版本还是2.x.x；前些天小伙伴买了本《Node.js实 战》，结果依赖的Express是3.x.x。尼玛如果安装目前新版的Express4，那么这些书中的例子连项目都无法正常跑起来。

　　Nodejs相关的纸版书一上市就已经过时了！

　　此文的背景是由于俺某天手欠，升级了最新Express V4+后，发现项目不可用了(还好是公司内部的小工具)，查找资料后整理了些许总结，介绍如何使用Express4搭建项目。　

　　情况差不多就是这样，那么咱们”深入浅出”一把Express项目吧。

　　如果看官想了解Express 4之前的安装、使用可查看：http://www.cnblogs.com/Darren_code/p/node_express.html

————————— 分割线 —————————

1. 建立工程环境
2. npm安装细节
3. 全局模式安装的意义
4. 创建项目
5. 目录结构
6. 配置文件之神奇的package.json

建立工程环境

　　先介绍下各种环境吧：

　　进入俺们的项目所在目录:

　　cd /home/work/node/project

　　npm安装express , -g 指令让express进入全局安装：

　　$ npm install -g express

　　如果是express 4.0之前版本，那么执行“express -V”就可以得到版本号了，可express 4.0之后还需要再安装express-generator包，如果没有安装还执行“express -V”命令会报错。

　　执行安装express-generator包：

　　$ npm install -g express-generator

　　现在执行“$ express -V”可查看express版本信息了。

　　发生这种情况的原因是，express4.0之后把创建一个APP的功能分离出来为express-generator，没它你创建不了应用程序。

NPM和模块

　　以下两张express目录(安装samba，Windows下查看无压力)的图片可以更直观的对比express包的变化，下图左侧是V3.15.0，下图右侧是V4.7.0：

　　目录结构上看就缺少一个bin文件，这个bin目录内存放的就是内部命令(下图)，只不过它们都是以独立的文件形式存在的。

　　PS：bin是binary的缩写，有关bin和sbin目录的含义需要看官对linux的目录结构有一点点了解，使用Google 百度一下”linux 目录”即可找到对应资料。

　　再从模块信息(node_modules/express/package.json)看它们的重要不同:

　　"bin": {
　　     "express": "./bin/express"
　　}

　　需要注意npm模块中的信息都在package.json里面，包括各种配置信息。

　　其中”bin”这个key就是申明用户可以使用“command-name”这个命令，而输入该命令后就会去执行“command-file”这个文件。如下：

　　{
　　     ...
 　　    "bin": {
　　          "command-name” : “command-file”
 　　    }
 　　    ...
　　}

　　所以在命令行输入express命令时，其实对应的其实是去执行bin目录下的express程序。

　　如果自己要制作模块包，且希望可以命令行工具使用时，需要配置好bin字段，当全局模式安装之后就可以在命令行直接执行使用。有关package.json的信息会再配置章节中再详细介绍，”$ npm help json”可以获取官方的详细信息。

全局模式安装的意义

　　npm安装的时候区分本地模式安装和全局模式安装，“-g”就表示全局模式安装，这种模式会被安装在node安装目录的lib所在目录的node_modules文件夹中，全局使用。

　　NPM是由Isaac Z.Schlueter创建的，提供给Node服务的Node包管理器，最开始需要独立安装，后来当Nodev0.6.3版本默认集成了NPM作为Node包管理器，所以在那之后，只要使用NPM安装的全局包地址，都可以推算出来。

　　如Node在/usr/local/bin/node，那么模块目录就是/usr/local/lib/node_modules/下。

　　非全局那么就是本地模式安装，这类模式安装会被安装在当前目录的node_modules文件夹中，非全局使用。

　　如果express-generator不是全局模式安装怎么办？

　　非常不爽的就是命令行工具中直接使用”express [option] [dir]”就没法完成了，只能手动的找到执行文件执行才可以，如本地模式安装的时只能只能在当前目录下执行

　　$ ./node_modules/express-generator/bin/express -V
　　4.2.0

创建项目

　　东扯西扯完毕，各方面也已经Ready，创建个Express项目开心一下:)

　　再确认一下所在的目录位置

　　express myapp

　　$ cd myapp && npm install

　　npm install完成之后就可以run起来咯，执行：

　　$ DEBUG=myapp ./bin/www

　　执行“npm start”其效果一样，下图分别是这两条语句执行情况：

　　PS：红框中的内容是访问时打印的信息。

　　可以看到俩条命令打印出来的信息有一行不一样，执行完“Debug=myapp ./bin/www”后会打印出：“myapp Express server listening on port 8898 +0ms”

　　让俺们来看看为神马，执行命令：

　　$ vi ./bin/www

　　PS:默认PORT其实3000(红框中的部分)，俺手动修改后使用的是8898端口

　　Express4中引入了著名的Debug模块，所以debug模式让我们更方便的玩转Node中的模块，其使用方法介绍起来较长，建议大家看看其官方的介绍：https://www.npmjs.org/package/debug

　　重要的package.json文件马上会介绍，创建Express4项目俺们就说到这里。

目录结构

　　 了解目录结构是玩转一切项目的第一步：

• app.js，程序启动文件
• bin，创建项目时已经提到，是真实的执行程序
• node_modules, 存放所有的项目依赖库
  
• package.json，项目依赖配置及开发者信息
• public，静态文件(css,js,img)
  
• routes，路由文件
  
• views，页面文件
  

配置文件之神奇的package.json

　　在Nodejs项目中，package.json文件用来声明项目基本信息和使用的模块，这样在新的环境部署时，只要在package.json文件所在的目录执行npm install命令即可按照所需要的模块啦。

　　下面俺们通过这个package.json文件再Build Express项目玩玩(生命不息折腾不止嘛)。

　　回到project目录：

　　在project目录下新加testpackage项目

　　$ mkdir testpackage && cd testpackage

　　把myapp中的package.json copy过来

　　$ cp ../myapp/package.json ./

　　创建个server.js，写入简单的几行代码，运行一把：

　　上面俩图就是运行结果。

　　查看package.json中的内容如下

　　会议下由package.json实现的快速项目搭建，俺们再来了解其内容意义：

• name
  ~ 在package.json中最重要的就是name和version字段。他们都是必须的，如果没有就无法install；
  ~ 想好名字之前先去npm registry查看一下这个名字是否已经被使用了，http://registry.npmjs.org/
  
• version
  ~ version必须能被 node-semver解析，它被包在npm的依赖中；
  ~ name和version一起组成的标识在假设中是唯一的。改变包应该同时改变version
• private
  ~ 如果你设置”private”: true，npm就不会发布它；
  ~ 这是一个防止意外发布私有库的方式。如果你要确定给定的包是只发布在特定registry（如内部registry）的，用publishConfighash的描述来重写registry的publish-time配置参数
  
• scripts
  ~ “scripts”是一个由脚本命令组成的hash对象，他们在包不同的生命周期中被执行。key是生命周期事件，value是要运行的命令。
• dependencies
  ~ 依赖是给一组包名指定版本范围的一个hash。这个版本范围是一个由一个或多个空格分隔的字符串。依赖还可以用tarball或者git URL

　　以上五项仅仅是Express4 package.json使用的，其他细节可参考文档 传送门https://www.npmjs.org/doc/files/package.json.html

小结一下

　　文章在偏应用的层面上介绍了NPM和模块信息，希望能对大家了解有所帮忙吧。

　　8月份的文章补上，俺们下一章再来介绍用Express+mongodb搭建个人网站，保佑老子千万别跳票了…吼吼:)

　　资料

• http://expressjs.com
• http://www.npmjs.com/
• (英语)https://www.npmjs.org/doc/files/package.json.html
• (中文)http://mujiang.info/translation/npmjs/files/package.json.html

[转载]ecshop分页类assign_pager分析和扩展_ecshop二次开发_ecshop模板_ecmall二次开发_模板_善仁网.

[转载]Ecshop 中的assign_dynamic($tmp)函数分析 – 劈里啪啦wxx的日志 – 网易博客.

Ecshop 中的assign_dynamic($tmp)函数分析
近日需要在ecshop中新增一个php页面，里面涉及到一些动态文章内容的调用。

因 为之前没有做过所以就对照index.php来写了。首先自己新增了一个dwt文件，在里面设置一个可编辑区域。在admin/includes /lib_template.php里面，在$template_files这个数组中添加了一个可以设置内容的模板,news.dwt, 在$page_libs这个每个模板允许设置的库项目的数组里面添加了’news’ => array(

‘/library/ur_here.lbi’ => 0,

‘/library/cart.lbi’ => 0,

‘/library/category_tree.lbi’ => 0,

‘/library/history.lbi’ => 0,

‘/library/pages.lbi’ => 0,

‘/library/exchange_hot.lbi’ => 5,

‘/library/exchange_list.lbi’ => 0,

),然后在后台”设置模板”这里，在languages/zh_cn/admin/template.php里面对这个模板文件添加相应的语言,$_LANG[‘template_files’][‘news’] = ‘新闻页面’;

经过以上这样设置之后，在”后台模板”—“设置模板”这里的下拉框这里就可以看到这个新添加的模板了。测试发现，如果想在这个页面内显示一些动态的内容。就必须加上:assign_dynamic(‘news’).

assign_dynamic($tmp)这个函数的作用是活的指定页面的动态内容，动态处理一些 局部信息更新而不被缓存的机制，其中$tmp为模板名称。

$SQL = ‘SELECT id, number, type FROM ‘ . $GLOBALS[‘ecs’]->table(‘template’) . ” WHERE filename = ‘$tmp’ AND type > 0 AND remarks =” AND theme=’” . $GLOBALS[‘_CFG’][‘template’] . “‘”;$res = $GLOBALS[‘db’]->getAll($SQL) 其中字段number控制每次显示多少个值，而字段type则控制属于哪个动态项,0为 固定项,1为分类下的商品，2为品牌下的商品，3为文章列表,4为广告位.

通 过过这个条件，分别执行相应的函数，例如 用$GLOBALS[‘smarty’]->assign(‘goods_cat_’.$row[‘id’],assign_cat_goods($row[‘id’],$row[‘number’])); 给不同的模块赋值。比如在分类，就调用ssign_cat_goods()函数，传递给模板参数’goods_cat_’ . $row[‘id’].

在 最后ecshop smarty将会调用dyna_libs_replace()函数，对不同的模块，给予template,通过例如 $str = ‘{assign var=”cat_goods” value=$cat_goods_’ .$row[‘id’]. ‘}{assign var=”goods_cat” value=$goods_cat_’ .$row[‘id’]. ‘}’;方式传递。所以在模板里面，可以看到$cat_goods.就是这么来的。

所有的调用，就是这个机制。

[转载]PHP调试环境 – 岁月无声 – 博客园.

PHP调试总是那么让人觉得不满意，但还是要用呀：），就如xampp,LAMP,LNMP,等配置，总是随着版本升级有这样那样的变化，有空写一个通用的配置工具与大家共享，呵呵。

Step 1:IDE选择

由于以前用的工具太多，常会在eclipse中加载Android,maven,j2ee,SSH,CXF等一系经工具，导致出现莫名其妙的问题。于是有了下面的建议:

下载Eclipse for PHP Developers，地址 http://www.eclipse.org/downloads/packages/eclipse-php-developers/heliossr2

当然，你也可以选择去下载PDT插件，或直接从eclipse上安装这个插件。

Step 2: Debugger 选择

有两个Debugger可以选择，Zend Debugger,另一个是Xdebug,当然由于Xdebug完全免费，下载简单。首先它，地址 http://xdebug.org/download.php

下载时，要针对你所使用的平台下载对应的文件，如果在windows下，可以下载相应的binaries.也就是动态库，至于64位的问题，你一定要下载 与你的PHP所使用的环境一致。比如，虽然你用的是windows 64操作系统，但使用的是32位的php编译版本，你也要使用对应的32位的xdebug.这个我在配置时，花了不少时间去解决这个问题

Step 3: PHP与debugger整合

解压xdebug,把得到的dll 放到你的Web 服务器所用的php相对应的扩展目录中，因为我常会在一台机器上有数十种开发环境，所以会遇到各样的问题，你在配置时一定放到你调试时所使用的php环境 下。Eclipse for PHP自己并不带有php环境。具体方法就是：

a,把php_xdebug-2.2.1-5.4-vc9.dll放到php的 ext目录下。

b.修改php.ini 在文件后面加下如下：

[Xdebug]

zend_extension =”D:/Develop/Web/PHP549/ext/php_xdebug-2.2.1-5.4-vc9.dll” ;（路径根据自己情况设置）

xdebug.auto_trace = On
xdebug.show_exception_trace = On
xdebug.remote_autostart = On
xdebug.remote_enable = On

切记一点就是zend_extension这个指令的使用，在PHP5.3以前的版本，要根据PHP对线程的安全设置，或者根据DEBUG BUILD设置情况使用不同的zend_extension指令

比如，如果PHP设置了线程安全，就要用zend_extension_ts =  =”D:/Develop/Web/PHP549/ext/php_xdebug-2.2.1-5.4-vc9.dll” 来代替zend_extension.否则就出错，而在PHP5.3以后的版本

就不必这样麻烦了，都直接使用zend_extension而zend_extension_ts不再被使用。

测试配置是否成功的方法很简单，启动web服务器，用phpinfo()打印php环境数据，如果看到Xdebug 一大堆的参数及参数值，你就成功了。如果没有，你就慢慢配置吧，如果遇到问题，你就要去读那些英文资料了。

资料地址：http://www.eclipse.org/pdt/articles/debugger/os-php-eclipse-pdt-debug-pdf.pdf 如果不成功，就是你英文水平的问题了：）

Step 4: 配置 PDT与xdebug进行整合。

a. 打开eclipse for php developers中的Preferences->PHP->Executables. 加入第三方的PHP环境，就是我们刚才配置过的那个PHP目录（假设你有很多PHP环境的话，就要选对哟），这里Add后，主要是录入PHP executable path,就是PHP.exe或者php-cgi.exe，这是不同的php执行方式。选哪一个都一样。同时要选择debugger,你要选择 xdebug.

b. 打开eclipse for php developers中的Preferences->PHP->Debug ,在Default Setting中，PHP Debugger选择Xdebug, Server可以选择 Default PHP Web Server PHP Executable就选持刚刚加入的executable就可以了。

Step 5: 进行初步脚本调试。

经过以上的配置，就可以创建PHP项目，并对项目中的php进行脚本直接调试了。在项目上右键选择Debug as ->PHP Script进行调试，当在，这个Debug要配置一个Debug的Configuration.在这个调试configuration,中选择 Alternate PHP 为刚才创建的 PHP 的Executable. 下面的PHP File就是选择你想单步调试的php文件即可。

这里会有一个bug，就是本置完以上步聚时，一定要重启一下eclipse for PHP，不然会出现xdebug工作，但eclipse for PHP不显示调试过程的情况，即看不到断点是否被执行到。重启一下就ok.

Step6: 进行远程Web调试

在上面的基础之上，你要对Default PHP Web Server进行配置。主要是映谢URL到你的php文件。比如网站调试时，第一个是index.php在你的项目里是 myproject/index.php,就要在web server的配置里的mapping里映射

http://localhost/myproject  ——— myproject/ 这样在调试时访问http://localhost/myproject/时，就会映谢到你的index.php文件了。这里的更多细节就不想写了

主要是理解调试的 原理：

PHP Script 调试就是用第三方的PHP.exe来执行你的项目中的php文件，会通过xdebug把执行的过程信息通过9000网络端口传给你的eclipse for PHP.然后eclipse 把调试信息再传给xdebug.