Home > Developer > Web Develop
Preface
Example DesignIn the previous chapter, we discussed the environment configuration. In this chapter, we will write a small module to complete the learning. phonegap calls the camera and processes the photos taken by phonegap, already, use the local database to save our data so that our results can be retained when the program re-runs. first, let me explain that in order to reduce the workload, it is rare for me to describe the official documentation in many places because it is already very detailed. If there are some places, and there is no official documentation, you can ask me...
Code WritingWe generally have a registration module that uploads images. In the past, if we used to register images on a computer, this profile picture would be quite troublesome. However, if we were using a mobile phone, it would be okay, in this example, we use phonegap to call the camera to take our profile picture, upload it to the server, and save it to the local device for easy loading.
Prototype Design:
Display Homepage
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" personal_infor "border =" 0 "alt =" personal_infor "src =" http://www.bkjia.com/uploads/allimg/131228/134HRA1-0.png "width =" 166 "height =" 244 "/>
Call the photo page
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" 2 "border =" 0 "alt =" 2 "src =" http://www.bkjia.com/uploads/allimg/131228/134HUP4-1.png "width =" 166 "height =" 244 "/>
To highlight the benefits of using jqm, add a swip event to control the page switching.
650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" 3 "border =" 0 "alt =" 3 "src =" http://www.bkjia.com/uploads/allimg/131228/134HW352-2.png "width =" 644 "height =" 304 "/>
Digress1. Write a template to facilitate future code reuse.
<! DOCTYPE html>2. After writing the template, let's start writing the actual code.
1. First, write our device. js file to initialize the application.
Function init () {document. addEventListener ("deviceready", onDeviceReady, true );}
2. Then write the initialization tasks.
Var onDeviceReady = function () {console. log ("deviceready event fired"); // api-camera Photo URI pictureSource = navigator. camera. pictureSourceType; destinationType = navigator. camera. destinationType; // initialize the homepage. if an avatar already exists, load var saveImage = kget ("image"); if (saveImage) {// console. log ("have image" + saveImage); var cameraImage = document. getElementById ('cameraimage'); cameraImage. style. visibility = 'visable'; cameraImage. src = \ '# \' "/jpeg; base64," + saveImage;} // system events. Implement your own callback method as needed. The default method is used here .. document. addEventListener ("searchbutton", onSearchKeyDown, false); document. addEventListener ("menubutton", onMenuButtonDown, false); document. addEventListener ("pause", onEventFired, false); document. addEventListener ("resume", onEventFired, false); document. addEventListener ("online", onEventFired, false); document. addEventListener ("offline", onEventFired, false); document. addEventListener ("backbutton", onEventFired, false); document. addEventListener ("batterycritical", onEventFired, false); document. addEventListener ("batterylow", onEventFired, false); document. addEventListener ("batterystatus", onEventFired, false); document. addEventListener ("startcallbutton", onEventFired, false); document. addEventListener ("endcallbutton", onEventFired, false); document. addEventListener ("volumedownbutton", onEventFired, false); document. addEventListener ("volumeupbutton", onEventFired, false );};
In this way, our devices. js is simply written.
3. Write the UI, which is also very simple here
<Body> <div data-role = "page" id = "home"> <div data-role = "header">The above is the page code. after learning the pages of two divs, jqm friends should have no pressure on this...
4. Start to write jqm event js, and write it in the head of the template and the block of your own.
<Script type = "text/javascript"> // during page initialization, use phonegap to initialize our application $ ('body '). live ("pageinit", function () {init () ;}); // Add a swip event to the page $ ("# home "). live ("pageinit", function () {// when we move to the left, enter the setting page $ ('# homecontent '). bind ("swipeleft", function () {$. mobile. changePage ('# setting', {transition: "fade"}) ;}) ;}; $ ('# setting '). live ("pageinit", function () {// display the Avatar image var saveImage = kget ("image"); if (saveImage) {// console. log ("have image" + saveImage); var cameraImage = document. getElementById ('settingimag'); cameraImage. style. visibility = 'visable'; cameraImage. src = \ '# \' "/jpeg; base64," + saveImage;} // when we slide to the right, return to the homepage $ ('# settingcontent '). bind ("swiperight", function () {$. mobile. changePage ('# home', {transition: "fade"}) ;}); // take a photo $ (' # takePhoto '). bind ("tap", function () {take_pic () ;}); </script>
This code should be written by someone familiar with jqm. If you have any questions, please read the official jqm documents first...
5. I haven't used phonegap for so long. Next, it's time for phonegap to show its skills ..
Phonegap photo type
Do you still remember the two variables we defined in devices. js?
// Set whether the image is used to call the camera or the local album. The default is to call the camera. // For more information, see the official documentation pictureSource = navigator. camera. pictureSourceType; // is the path we want to obtain when phonegap obtains an image? Or // The base64 encoded image format destinationType = navigator. camera. DestinationType;The preceding section describes the parameters that may be used.
Create a new camera. js,
Function take_pic () {navigator. camera. getPicture (onPhotoDataSuccess, function (ex) {alert ("Camera Error! ") ;},{// For more parameter settings, see the official document quality: 50, target 320, targetHeight: 240, // use data_url instead of file_url, file_url is different on different platforms // It is not easy to write, but you can ignore this with data_url. In addition, it is not too good to take a picture, it's not slow to store dozens of k in the database .. destinationType: destinationType. DATA_URL });}Function onPhotoDataSuccess (imageData) {console. log ("*** onPhotoDataSuccess"); var cameraImage = document. getElementById ('cameraimage'); cameraImage. style. visibility = 'visable'; // Save the image into the database kset ("image", imageData); cameraImage. src = \ '# \' "/jpeg; base64," + imageData ;}
Next, create a new storage. js for simple encapsulation of the storage api
Function kset (key, value) {console. log ("key" + key + "value" + value); window. localStorage. setItem (key, value);} function kget (key) {console. log (key); return window. localStorage. getItem (key);} function kremove (key) {window. localStorage. removeItem (key);} function kclear () {window. localStorage. clear () ;}// test the update method function kupdate (key, value) {window. localStorage. removeItem (key); window. localStorage. setItem (key, value );}The above is the content of this time.
After studying the phonegap for a week, you can use an iphone to test the app because you are at home and are not in school. Let's talk about the phonegap experience in android, I have a device that can run to 2000 in the quadrant. It is much slower to run this display, which is the same as the display of applications written in Java .... currently, android 2000 + devices are not mainstream. Therefore, this phonegap application is applicable for Iphone development, the webview performance of the Iphone is okay...
Next, let's talk about this example. There is a serious drag-and-drop performance in this example. If you are interested, you can use backbutton several times after swipe, I will sort out the code later and release it...
Next time, it may take a long time to update this series. If you have time, I will make a special video to demonstrate it to you... phonegap is currently concerned with the performance of android web native apps ....
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
