使用PhoneGap開發windows phone 7 應用（1）-初識PhoneGap

本文轉載自查看原文 2011-12-25 01:50 2064

windows phone 7允許使用silverlight和XNA開發原生的應用程序，兩者都是非常成熟的框架，並且有功能強大的工具支持。那么為什么還要使用HTML5和 javascript來開發WP7的應用程序呢？個人認為是為了開發跨平台的移動應用程序，HTML5/javascript應用可以運行在 Android、IPhone、BlackBerry，現在也同樣可以運行在WP7上。

HTML5應用程序的基本思想在於：你的本機應用程序僅僅是一個全屏幕的WebBrowser，承載你的JavaScript應用程序邏輯，你需要將你的HTML、javascript、css以及其它一些資源打包到一個XAP文件中，然后使用 WebBrowser的API在你的javascript代碼和本機原生API之間傳遞消息，以訪問手機的功能，如：camera和 accelerometer。

已經有不少哥們開發出了輔助HTML5應用程序開發的框架，我推薦其中的PhoneGap框架，顧名思義，該框架將會填充javascript代碼和原生的手機功能之間的“溝壑”,作為一個開源項目，PhoneGap已經運行了很多年，目前已經支持多種手機，也就是說，可以使用同一javascript API訪問Android、iPhone、黑莓和更多的手機中的功能。

PhoneGap入門

1：下載

2：復制callback-phonegap-1.3.0-0-gb81151f.zip 到 C:\Users\Administrator\Documents\Visual Studio 2010\Templates\ProjectTemplates\Visual C#目錄下。

3：使用PhoneGapStarter模板創建應用程序。

運行后：

剖析示例應用代碼：

在www文件夾中包含了HTML5應用的源代碼，這里你可以放圖片、HTML、JavaScript和CSS，這些文件被標記為content，改項目包含了一個GapSourceDictionary.xml文件，列舉了HTML應用的資源，當啟動應用時，會讀取這個xml文件，xml中所列的文件會被增加到獨立存儲中，服務於WebBrowser控件。

 
 
 
         
  
  
  
          <?xml version="1.0" encoding="utf-8"?>
<!-- This file is auto-generated, do not edit! -jm -->
<GapSourceDictionary>
    <FilePath Value="www\index.html"/>
    <FilePath Value="www\master.css"/>
    <FilePath Value="www\phonegap-1.3.0.js"/>
</GapSourceDictionary>
 
 
 
         

在MainPage.xaml中，在silverlight UI中包含了PGView的一個實例。

 
 
 
         
  
  
  
              <Grid x:Name="LayoutRoot" Background="Transparent" HorizontalAlignment="Stretch">
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <my:PGView HorizontalAlignment="Stretch" 
                   Margin="0,0,0,0"  
                   Name="PGView" 
                   VerticalAlignment="Stretch" />
    </Grid>
 
 
 
         

PGView定義在WP7GapClassLib中，它是承載了WebBroeser的UserControl，並且包含了充當PhoneGap javascript API和wp7 api

之間的橋梁。啟動后，會加載文件到獨立存儲中，並將WebBroeser導航到www/index.html。（可能會自定義配置）

模板里的index.html文件內容：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>PhoneGap WP7</title>
    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"
        charset="utf-8" />
    <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
    <script type="text/javascript">

        document.addEventListener("deviceready", onDeviceReady, false);

        // once the device ready event fires, you can safely do your thing! -jm
        function onDeviceReady() {
            document.getElementById("welcomeMsg").innerHTML += "PhoneGap is ready! version=" + window.device.phonegap;
            console.log("onDeviceReady. You should see this message in Visual Studio's output window.");

        }

    </script>
</head>
<body>
    <h1>
        Hello PhoneGap</h1>
    <div id="welcomeMsg">
    </div>
</body>
</html>

當DOM加載完畢后，為deviceready事件添加一個handler，deviceready是最重要的一個事件，如果沒有它，你的應用程序不知道PhoneGap是否已經完全加載，該事件被觸發后，就可以安全調用PhoneGap函數，同時也可以安全訪問原生API。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 《深入淺出Windows Phone 8應用開發》 Windows phone應用開發[16]-數據加密 Windows Phone 雲應用開發實踐之（二）Windows Live SDK Mac下使用Phonegap（Apache Cordorva）開發iOS應用 Windows phone應用開發[22]-再談下拉刷新 Windows Phone開發之路(1) 認識Windows Phone 使用jQuery Mobile和Phone Gap開發Android應用程序 Windows Phone 8初學者開發—第3部分：編寫第一個Windows Phone 8應用程序在windows phone Mango中使用原生代碼開發程序 Windows Phone 7(WP7)開發在ViewModel中使用NavigationService