前言
例子設計上一章中,我們討論了環境的配置,這本章中我們,寫一個小模組來貫通學習,phonegap對網路攝影機的調用,已經phonegap對於拍下來的照片的處理,已經,使用本機資料庫儲存我們的資料,讓在程式重新啟動並執行時候能夠保留我們的結果.先說明一下,為了,減少工作量,很多地方由於,官方文檔已經很詳細了我就難得在描述了,如果有些地方,沒有而官方文檔也沒有的話,可以來問我...
代碼編寫我們一般註冊都有一個,上傳映像的模組,以前,用電腦註冊的話,這個頭像就比較麻煩了,不過,我們用手機的話就基本沒這個問題了,這個例子就是,使用phonegap 調用網路攝影機拍下我們的頭像,上傳到伺服器,然後,也儲存到本地裡面,方便載入.
原型設計:
顯示用的首頁
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" />
調用拍照的頁面
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" />
為了,突顯出我們用jqm的好處的,增加一個swip事件來控制,頁面的切換
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" />
說點題外話1,寫個模板,方便,我們以後的代碼的重用
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!--自適應介面,如果出現,在某些裝置出現介面偏小的話,檢查一下有沒有加入這句 --> <meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, ;> <!--樣式--> <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.min.css" /> <!--end--> <!--匯入的js架構--> <script type="text/javascript" charset="utf-8" src=\'#\'" /script> <script src=\'#\'" /jquery-1.6.4.min"></script> <script src=\'#\'" /jquery.mobile-1.0.1.min.js"></script> <!--end--> <!--自己寫的js--> <script type="text/javascript"> </script> <!--end--></head><body onload="init();"><div data-role="page" id="home"> <div data-role="header"> <h1>Hello,World</h1> </div> <div data-role="content" id="content"> <h1>content</h1> </div> <div data-role="footer"> <h1>footer</h1> </div></div><!--import custom library --><script type="text/javascript" charset="utf-8" src=\'#\'" /camera.js"></script><script type="text/javascript" charset="utf-8" src=\'#\'" /device.js"></script><script type="text/javascript" charset="utf-8" src=\'#\'" /storage.js"></script><!--end--></body></html>
2,模板寫好了,就開始我們實際代碼的編寫吧.
1,首先,編寫我們的device.js檔案進行對應用的初始化工作
function init() { document.addEventListener("deviceready", onDeviceReady, true);}
2,然後接著寫初始化用乾的事情
var onDeviceReady = function() { console.log("deviceready event fired"); // api-camera Photo URI pictureSource=navigator.camera.PictureSourceType; destinationType=navigator.camera.DestinationType; //這裡是初始化首頁,如果,已經有頭像的話,就載入 var saveImage = kget("image"); if(saveImage){ //console.log("have image"+saveImage); var cameraImage = document.getElementById('cameraImage'); cameraImage.style.visibility = 'visible'; cameraImage.src=\'#\'" /jpeg;base64," + saveImage; } //系統的事件,按需求實現自己的回調方法,這裡就預設了.. 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);};
這樣我們的devices.js就簡單的寫完了.
3,寫UI介面,這裡也很簡單
<body><div data-role="page" id="home"><div data-role="header"><h1>個人資訊</h1><a href="#setting" data-icon="home" id="intro" class="ui-btn-right">設定</a></div><div data-role="content" id="homeContent"><p>頭像</p><img id="cameraImage" src=\'#\'" /> <!--這一塊的動態實現你會圖片的讀取和儲存,這個就很簡單了..這裡就不做介紹了..--> <p>名字:阿柴</p> <p>連絡方式:xxxxx</p></div></div> <div data-role="page" id="setting"> <div data-role="header"> <h1>頭像設定</h1> </div> <div data-role="settingContent"> <p>頭像</p> <img id="settingImage" src=\'#\'" /> <div class="ui-grid-a"> <div class="ui-block-a"><div data-role="button" id="takePhoto">take photo</div></div> <div class="ui-block-b"> <div data-role="button" id="upload">upload</div></div> </div> </div> </div><script type="text/javascript" charset="utf-8" src=\'#\'" /camera.js"></script><script type="text/javascript" charset="utf-8" src=\'#\'" /device.js"></script><script type="text/javascript" charset="utf-8" src=\'#\'" /storage.js"></script></body>
上面就是頁面的代碼,就兩個DIV的page,學過,jqm的朋友應該對此毫無壓力了...
4,開始寫點jqm的事件js,寫在模板那個head,自己的那個塊裡面
<script type="text/javascript"> //在頁面初始化的時候,利用phonegap初始化我們的應用 $('body').live("pageinit",function(){ init(); }); //為頁面添加swip 事件 $("#home").live("pageinit",function(){ //當我們向左滑動的時候,進入setting頁面 $('#homeContent').bind("swipeleft",function(){ $.mobile.changePage('#setting', { transition: "fade"}); }); }); $('#setting').live("pageinit",function(){ //顯示頭像圖片 var saveImage = kget("image"); if(saveImage){ //console.log("have image"+saveImage); var cameraImage = document.getElementById('settingImage'); cameraImage.style.visibility = 'visible'; cameraImage.src=\'#\'" /jpeg;base64," + saveImage; } //當我們向右滑動的時候,回到首頁 $('#settingContent').bind("swiperight",function(){ $.mobile.changePage('#home',{ transition: "fade"}); }); //進行拍照 $('#takePhoto').bind("tap",function(){ take_pic(); }); }); </script>
這塊代碼的就要有一點熟悉jqm的人寫好了,有啥不懂的先看一下jqm的官方文檔吧...
5,寫了這麼久,都沒怎麼用到phonegap,接下來就是phonegap大展身手的時刻到了..
phonegap的照片類型
還記得我們在devices.js定義的兩個變數嗎?
//這個是設定圖片是調用網路攝影機還是，本機相簿，預設是調用網路攝影機//更多參見官方文檔pictureSource=navigator.camera.PictureSourceType;//這個是,當phonegap 擷取圖片的時候,我們希望擷取的是路徑?還是//給予base64編碼的映像格式destinationType=navigator.camera.DestinationType;以上就是等下,可能要用到的參數介紹
建立一個camera.js,
function take_pic() { navigator.camera.getPicture(onPhotoDataSuccess, function(ex) { alert("Camera Error!"); }, {//這裡的更多設定參數參見官方文檔 quality : 50, target 320, targetHeight: 240,//用data_url,而不用file_url的原因是,file_url在不同平台有差異//不好編寫,而用data_url就可以不考慮這個,加上,拍張圖片,不要太好的話,就幾十k存到資料庫裡面也沒多慢..destinationType:destinationType.DATA_URL });}function onPhotoDataSuccess(imageData) { console.log("* * * onPhotoDataSuccess"); var cameraImage = document.getElementById('cameraImage'); cameraImage.style.visibility = 'visible';//把圖片存進資料庫裡面 kset("image",imageData); cameraImage.src=\'#\'" /jpeg;base64," + imageData; }
接下來,建立一個storage.js,用來簡單封裝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();}//測試更新方法function kupdate(key,value){window.localStorage.removeItem(key);window.localStorage.setItem(key, value);}以上就是這次的內容了．
研究了一個星期的phonegap,由於在家,沒學校那麼方便可以找同學借iphone來測試應用,說下phonegap在android的體驗吧,在我手頭上一台能在象限跑分到2000的裝置,運行這個,與Java寫的應用相同的顯示,要慢很多....以目前,android 2000分以上的裝置而言,我覺得還不是主流,所以,這個phonegap的應用目前而言,用來開發Iphone程式覺得還可以,Iphone的webview效能還算可以吧...
接下來,說下這次的例子,這個例子裡面有個比較嚴重的拖慢效能的地方,有興趣的可以在swipe幾次以後用backbutton來才一下,代碼的話晚些時候我整理出來在發布吧...
下一次,估計得很久才更新這個系列了,有空的話,我專門搞個視頻,來跟大家示範一下...phonegap目前而言,做android的web native app的效能問題吧....
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
