PhoneGap+jQuery Mobile打造本地化Web App

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

我們沒(méi)必要學(xué)習(xí)苦行僧那樣,用記事本來(lái)打代碼.目前而言呢,PhoneGap的IDE工具最好的當(dāng)然是Dreamweaver CS 5.5.不過(guò),我這里使用Eclipse作為我的開(kāi)發(fā)IDE,因?yàn)橹笆褂眠^(guò)Dreamweaver CS 5.5 ,這次就換個(gè)IDE工具.

Eclipse 的配置

1,一站式新建項(xiàng)目 phonegap + jqm

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

這個(gè)插件還是很給力的,已經(jīng)支持默認(rèn)支持最新版本的phonegap,jqm,sencha

安裝完以后選擇這個(gè)圖標(biāo)

2,選擇要建何種類(lèi)型的phoneGap (1),默認(rèn)已經(jīng)支持直接創(chuàng)建最新版本的phoneGap

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

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

3,接著,創(chuàng)建android項(xiàng)目即可

接下來(lái)就不啰嗦了…

完成以后:項(xiàng)目結(jié)構(gòu),activity都已經(jīng)寫(xiě)好的了..

代碼也已經(jīng)寫(xiě)好了.

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

自帶例子簡(jiǎn)單介紹

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

1,準(zhǔn)備JS文件,滑輪到index.html文件最后幾行;

//這個(gè)JS是必須的,調(diào)用的是設(shè)備的初始化//以下API自己按照自己的喜好調(diào)用和修改吧

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

3,順便你寫(xiě)了…

例子演示

感覺(jué),這個(gè)跟這個(gè)jqm一起的例子,個(gè)人感覺(jué)比官方那個(gè)好很多…截個(gè)圖,結(jié)束吧…

#p#

前言

上一章中,我們討論了環(huán)境的配置,這本章中我們,寫(xiě)一個(gè)小模塊來(lái)貫通學(xué)習(xí),phonegap對(duì)攝像頭的調(diào)用,已經(jīng)phonegap對(duì)于拍下來(lái)的照片的處理,已經(jīng),使用本地?cái)?shù)據(jù)庫(kù)保存我們的數(shù)據(jù),讓在程序重新運(yùn)行的時(shí)候能夠保留我們的結(jié)果.先說(shuō)明一下,為了,減少工作量,很多地方由于,官方文檔已經(jīng)很詳細(xì)了我就難得在描述了,如果有些地方,沒(méi)有而官方文檔也沒(méi)有的話,可以來(lái)問(wèn)我...

例子設(shè)計(jì)

我們一般注冊(cè)都有一個(gè),上傳圖像的模塊,以前,用電腦注冊(cè)的話,這個(gè)頭像就比較麻煩了,不過(guò),我們用手機(jī)的話就基本沒(méi)這個(gè)問(wèn)題了,這個(gè)例子就是,使用phonegap 調(diào)用攝像頭拍下我們的頭像,上傳到服務(wù)器,然后,也保存到本地里面,方便加載.

原型設(shè)計(jì):

顯示用的主頁(yè)

調(diào)用拍照的頁(yè)面

為了,突顯出我們用jqm的好處的,增加一個(gè)swip事件來(lái)控制,頁(yè)面的切換

代碼編寫(xiě)

1,寫(xiě)個(gè)模板,方便,我們以后的代碼的重用

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8"> 
    <!--自適應(yīng)界面,如果出現(xiàn),在某些設(shè)備出現(xiàn)界面偏小的話,檢查一下有沒(méi)有加入這句 --> 
    <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--> 
    <!--導(dǎo)入的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--> 
    <!--自己寫(xiě)的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,模板寫(xiě)好了,就開(kāi)始我們實(shí)際代碼的編寫(xiě)吧.

1,首先,編寫(xiě)我們的device.js文件進(jìn)行對(duì)應(yīng)用的初始化工作

function init() { 
document.addEventListener("deviceready", onDeviceReady, true); 
}

2,然后接著寫(xiě)初始化用干的事情

var onDeviceReady = function() { 
    console.log("deviceready event fired"); 
      
// api-camera  Photo URI 
    pictureSource=navigator.camera.PictureSourceType; 
    destinationType=navigator.camera.DestinationType; 
    //這里是初始化主頁(yè),如果,已經(jīng)有頭像的話,就加載 
    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; 
           
    } 
    //系統(tǒng)的事件,按需求實(shí)現(xiàn)自己的回調(diào)方法,這里就默認(rèn)了.. 
    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就簡(jiǎn)單的寫(xiě)完了.

3,寫(xiě)UI界面,這里也很簡(jiǎn)單

<body> 
        <div data-role="page" id="home"> 
            <div data-role="header"> 
                <h1>個(gè)人信息</h1> 
                <a href="#setting" data-icon="home" id="intro" class="ui-btn-right">設(shè)置</a> 
            </div> 
            <div data-role="content" id="homeContent"> 
                <p>頭像</p> 
                <img id="cameraImage" src="" /> 
                <!--這一塊的動(dòng)態(tài)實(shí)現(xiàn)你會(huì)圖片的讀取和存儲(chǔ),這個(gè)就很簡(jiǎn)單了..這里就不做介紹了..--> 
                <p>名字:阿柴</p> 
                <p>聯(lián)系方式:xxxxx</p> 
            </div> 
        </div> 
        <div data-role="page" id="setting"> 
            <div data-role="header"> 
                <h1>頭像設(shè)置</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>

上面就是頁(yè)面的代碼,就兩個(gè)DIV的page,學(xué)過(guò),jqm的朋友應(yīng)該對(duì)此毫無(wú)壓力了...

4,開(kāi)始寫(xiě)點(diǎn)jqm的事件js,寫(xiě)在模板那個(gè)head,自己的那個(gè)塊里面

<script type="text/javascript"> 
            //在頁(yè)面初始化的時(shí)候,利用phonegap初始化我們的應(yīng)用 
            $('body').live("pageinit",function(){ 
               init(); 
            }); 
            //為頁(yè)面添加swip 事件 
            $("#home").live("pageinit",function(){ 
                //當(dāng)我們向左滑動(dòng)的時(shí)候,進(jìn)入setting頁(yè)面 
                $('#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; 
 
                } 
                //當(dāng)我們向右滑動(dòng)的時(shí)候,回到主頁(yè) 
                $('#settingContent').bind("swiperight",function(){ 
                    $.mobile.changePage('#home',{ transition: "fade"}); 
                }); 
                //進(jìn)行拍照 
                $('#takePhoto').bind("tap",function(){ 
                    take_pic(); 
                }); 
            }); 
 
        </script>

這塊代碼的就要有一點(diǎn)熟悉jqm的人寫(xiě)好了,有啥不懂的先看一下jqm的官方文檔吧...

5,寫(xiě)了這么久,都沒(méi)怎么用到phonegap,接下來(lái)就是phonegap大展身手的時(shí)刻到了..

phonegap的照片類(lèi)型

還記得我們?cè)赿evices.js定義的兩個(gè)變量嗎?

//這個(gè)是設(shè)置圖片是調(diào)用攝像頭還是，本機(jī)相冊(cè)，默認(rèn)是調(diào)用攝像頭 
//更多參見(jiàn)官方文檔 
pictureSource=navigator.camera.PictureSourceType; 
//這個(gè)是,當(dāng)phonegap 獲取圖片的時(shí)候,我們希望獲取的是路徑?還是 
//給予base64編碼的圖像格式 
destinationType=navigator.camera.DestinationType;

以上就是等下,可能要用到的參數(shù)介紹

新建一個(gè)camera.js,

function take_pic() { 
    navigator.camera.getPicture(onPhotoDataSuccess, function(ex) { 
        alert("Camera Error!"); 
    }, { 
    //這里的更多設(shè)置參數(shù)參見(jiàn)官方文檔 
        quality : 50, 
    targetWidth: 320, 
    targetHeight: 240, 
    //用data_url,而不用file_url的原因是,file_url在不同平臺(tái)有差異 
    //不好編寫(xiě),而用data_url就可以不考慮這個(gè),加上,拍張圖片,不要太好的話,就幾十k存到數(shù)據(jù)庫(kù)里面也沒(méi)多慢.. 
    destinationType:destinationType.DATA_URL 
        }); 
} 
function onPhotoDataSuccess(imageData) { 
    console.log("* * * onPhotoDataSuccess"); 
    var cameraImage = document.getElementById('cameraImage'); 
    cameraImage.style.visibility = 'visible'; 
    //把圖片存進(jìn)數(shù)據(jù)庫(kù)里面 
    kset("image",imageData); 
   cameraImage.src = "data:image/jpeg;base64," + imageData; 
     
}

接下來(lái),新建一個(gè)storage.js,用來(lái)簡(jiǎn)單封裝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(); 
} 
 
//測(cè)試更新方法 
function kupdate(key,value){ 
    window.localStorage.removeItem(key); 
    window.localStorage.setItem(key, value); 
}