PhoneGap+jQuery Mobile打造本地化Web App

作者：佚名 2012-03-08 09:09:11

我們沒必要學習苦行僧那樣,用記事本來打代碼.目前而言呢,PhoneGap的IDE工具最好的當然是Dreamweaver CS 5.5.不過,我這里使用Eclipse作為我的開發IDE,因為之前使用過Dreamweaver CS 5.5 ,這次就換個IDE工具.

Eclipse 的配置

1,一站式新建項目 phonegap + jqm

http://svn.codespot.com/a/eclipselabs.org/mobile-web-development-with-phonegap/tags/r1.2/download/

這個插件還是很給力的,已經支持默認支持最新版本的phonegap,jqm,sencha

安裝完以后選擇這個圖標

2,選擇要建何種類型的phoneGap (1),默認已經支持直接創建最新版本的phoneGap

(2),這個插件支持兩大移動js框架jqm & Sencha Touch,當然..這兩個框架只能二選一了,你不選也行…

(3),我這里選擇我最為熟悉的jQm框架,默認已經支持最新版本了

3,接著,創建android項目即可

接下來就不啰嗦了…

完成以后:項目結構,activity都已經寫好的了..

代碼也已經寫好了.

注意:新建完以后,可能androidmainifest會報錯,你把報錯的那行代碼刪掉即可,你也可以根據那個代碼要求找一個支持xlarge包的android版本(4.0吧)(貌似2.2沒有這玩意),我這里省事直接刪掉算了…

自帶例子簡單介紹

在新建一個page,想使用插件幫你打包好的API你需要以下步驟

1,準備JS文件,滑輪到index.html文件最后幾行;

//這個JS是必須的,調用的是設備的初始化//以下API自己按照自己的喜好調用和修改吧

2,在body上調用init()方法,具體使用參見device.js.

3,順便你寫了…

例子演示

感覺,這個跟這個jqm一起的例子,個人感覺比官方那個好很多…截個圖,結束吧…

#p#

前言

上一章中,我們討論了環境的配置,這本章中我們,寫一個小模塊來貫通學習,phonegap對攝像頭的調用,已經phonegap對于拍下來的照片的處理,已經,使用本地數據庫保存我們的數據,讓在程序重新運行的時候能夠保留我們的結果.先說明一下,為了,減少工作量,很多地方由于,官方文檔已經很詳細了我就難得在描述了,如果有些地方,沒有而官方文檔也沒有的話,可以來問我...

例子設計

我們一般注冊都有一個,上傳圖像的模塊,以前,用電腦注冊的話,這個頭像就比較麻煩了,不過,我們用手機的話就基本沒這個問題了,這個例子就是,使用phonegap 調用攝像頭拍下我們的頭像,上傳到服務器,然后,也保存到本地里面,方便加載.

原型設計:

顯示用的主頁

調用拍照的頁面

為了,突顯出我們用jqm的好處的,增加一個swip事件來控制,頁面的切換

代碼編寫

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, width=device-width"> 
    <!--樣式--> 
    <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.1.min.css" /> 
    <!--end--> 
    <!--導入的js框架--> 
    <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script> 
    <script src="jquery.mobile/jquery-1.6.4.min"></script> 
    <script src="jquery.mobile/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="apis/camera.js"></script> 
<script type="text/javascript" charset="utf-8" src="apis/device.js"></script> 
<script type="text/javascript" charset="utf-8" src="apis/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 = "data:image/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="apis/camera.js"></script> 
        <script type="text/javascript" charset="utf-8" src="apis/device.js"></script> 
        <script type="text/javascript" charset="utf-8" src="apis/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 = "data:image/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, 
    targetWidth: 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 = "data:image/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); 
}

以上就是這次的內容了.

責任編輯：佚名來源：互聯網