本文章是由機器翻譯。

跨平臺

在Visual Studio與 Apache 科爾多瓦編寫跨平臺混合應用程式

Kraig Brockschmidt
Mike Jones

下載代碼示例

具有專門知識的標準 HTML、 CSS 和 JavaScript 的 網頁程式開發人員已經知道 Web 應用程式達到最大的廣度,設備和客戶提供一個單一的代碼庫。並與回應式 Web 設計 Web 應用程式還可以提供很大的移動體驗。

然而風似乎已吹往其他地方:資料顯示移動客戶花費大約 80%的時間都在應用程式和在瀏覽器中的 20%。簡單地說,即使最好的移動 Web 解決方案就是不明白的可見度和用法是通過平臺應用程式商店發現的本機應用程式。此外,儘管 W3C 和瀏覽器廠商致力於表面的本機平臺的功能,通過新的 HTML5 標準,它是一個緩慢的過程。與本機應用程式和本機 Api 相比,移動 Web 和 HTML5 通常會處於不利的地位取悅顧客的新的創新的時候。

您必須然後咬緊牙關,寫本機應用程式嗎?你必須學習不同的語言和 UI 模式,肩負著為每個平臺的專案管理成本高和隨後錯過了潛在的市場機會嗎?

一點也不!輸入稱為 Apache 科爾多瓦的開放源碼框架 (cordova.apache.org)、 託管的 Apache 軟體基金會 (ASF)。科爾多瓦允許您使用您的 HTML、 CSS 和 JavaScript 的技能 — — 和巨大的社會資源 — — 為 Android,亞馬遜火,iOS,Mac OS X,Windows,Windows Phone,黑莓手機,創建應用程式的 Web 瀏覽器和更多。更妙的是,Web 應用程式只能瀏覽器支援的能力有限,而科爾多瓦外掛程式模型提供對本機平臺的 Api 完全訪問。

因此,科爾多瓦使您網路的跨平臺好處而不會犧牲功能,提供有吸引力的路徑進入手機應用程式市場。我們將展示這一切是如何工作的建築中所示的簡單的自拍照 app 圖 1

這裡我上午 !在 Android 設備上的應用程式
圖 1 這裡我上午 !在 Android 設備上的應用程式

科爾多瓦在Visual Studio

與科爾多瓦的工作通常是通過節點封裝管理員(npm) 和科爾多瓦命令列介面 (CLI)。根據您的目標平臺,您還需要安裝其他元件,如平臺 Sdk,Apache 科爾多瓦文檔的"平臺指南"部分中所述 (bit.ly/1tJ19fq)。對於許多開發人員想要針對 Android、 iOS 和 Windows,這可需要大量的工作,和它可以花一些時間來學習各種不同的工具的各種複雜問題。

為了方便,給科爾多瓦帶來的力量和生產力的Visual Studio,微軟正在為 Apache 科爾多瓦建Visual Studio工具。此工具組 — — 目前在預覽中,可以作為副檔名Visual Studio2013年更新 4 可 (bit.ly/11m4vKH) 和內置Visual Studio2015年預覽 (bit.ly/1u1dsSQ) — — 正確地安裝和配置每個 Android 和 iOS 的目標 (Windows 帶有自動Visual Studio) 的協力廠商依賴項。它然後自動化科爾多瓦進程分為Visual StudioIDE 中,如安裝外掛程式,運行生成,並部署到設備和模擬程式。此外,它給了你所有的善良,你期望從Visual Studio等IntelliSense、 集成調試、 專案和建構管理、 集成與Visual Studio線上和使用列印稿的能力。

針對 Android 和 Windows 使用Visual Studio,您需要只有 Windows 8 或更高的電腦 (和你可以做安卓系統從 Windows 7)。目標的 ios,你需要 Mac Xcode 5.1 或更高版本,並可對相似之處或 VMware 融合在視窗內運行Visual Studio。(請參見"安裝工具生成的 iOS"MSDN 庫頁 bit.ly/1GqnEuK 有關詳細資訊,包括有關遠端生成代理的資訊 vs mda 遠端,擠兌互委會和允許您生成、 運行和調試從Visual Studio通過本地網路或 VPN 連接。)

Web 主機和回應跨瀏覽器的 CSS

我們會打電話給我們拍照的應用程式,我在這裡 !(克拉的兒子 3 歲時使用的片語)、 其 HTML5 標記是簡單的如中所示圖 2

圖 2 為這裡我上午的 HTML 標籤 !應用程式

<body>
  <div class="mainContainer">
    <div class="title mainChild">
      <h1 class="titlearea ">Here My Am!</h1>
    </div>
    <div id="locationSection" class="mainChild subsection">
      <h2 class="section-title">Here:</h2>
        <div id="locationControls">
          <input id="txtLocation" type="text" placeholder="tap to edit" />
            <button id="btnLocate" class="iconGlobe"></button>
        </div>
    </div>
    <div id="photoSection" class="mainChild subsection">
      <h2 id="photoHeading" class="section-title">My:</h2>
        <div id="photo">
          <img id="photoImg" src="#" draggable="false"
          alt="Tap to capture image from camera" />
        </div>
    </div>
    <div id="shareSection" class="mainChild">
      <button id="btnShare" class="shareButton" disabled>Share</button>
    </div>
  </div>
</body>

接下來,我們需要的適當的樣式,以匹配圖 1,這給了我們一個機會,探討科爾多瓦的核心性質。

本機的移動應用程式,通常從已編譯的可執行檔運行:你在等目標 C、 斯威夫特、JAVA、 C# 和 c + + 語言編寫的代碼編譯成移動作業系統理解的二進位格式。HTML、 CSS 和 JavaScript,另一方面,必須喂給主機 — — 例如瀏覽器 — — 解析,呈現和在運行時執行的原始程式碼。一些平臺如 Windows 8/8.1 和 Windows Phone 8.1,提供系統級的主機,呈現 HTML、 CSS 和 JavaScript 直接作為本機應用程式。如果要想瞭解更多此類資訊,請參閱免費的電子書,"程式設計 Windows 應用商店應用程式與 HTML、 CSS 和 JavaScript,第二版"(微軟出版社,2014年),通過在克拉 Brockschmidt bit.ly/1jyOYLC。科爾多瓦使用這種能力,在可能的情況。否則,iOS 和 Android 目前,它使用類似瀏覽器的 web 視圖元素裡面一個本機應用程式的包裝,如中所示圖 3。無論哪種方式,你有一種環境,在其中一個應用程式的上下文中運行的 Web 標準代碼。

科爾多瓦運行 HTML,CSS 和 JavaScript 在本機應用程式環境
圖 3 科爾多瓦運行 HTML,CSS 和 JavaScript 在本機應用程式環境

問題在於這些主機環境中不平等。每個是在作業系統中,本機的瀏覽器的一個變種,如中所示圖 4

圖 4 基礎主機環境

移動平臺 主機的基礎
Windows 8/8.1,Windows Phone 8/8.1 Internet Explorer 10/11
Android 4.x 5.0 Android 的瀏覽器 4.x 5.0 (4.4 或更高版本推薦的最佳做法)
iOS7、 iOS8 iOS Safari 7.1/8 或更高版本,具體取決於更新

因此,科爾多瓦應用 CSS 必須工作在每個目標平臺網路主機,就像 Web 應用程式必須使用首碼和 nonprefixed 的風格,各種工作在不同的瀏覽器,您可以使用類似的方法。例如,樂於助人,是下降您的應用程式的 Web 主機上的檔和打開他們在 Internet explorer 中,鉻和 Safari (Mac) 上的,然後使用瀏覽器開發人員工具來測試你在不同的視窗大小的造型。此外,交叉引用你的造型,在 caniuse.com、 確定到底哪個 HTML5 和 CSS3 功能中的瀏覽器和移動環境下支援 (和別忘了看看 Android 的瀏覽器和 iOS Safari,具體)。當然,將適應性更強,更簡單的佈局,您可以使用 CSS 框架 jQuery 移動、 離子和引導等。也可以使用 CSS 預處理器等較少或出言不遜,支援哪種截至Visual Studio2013年更新 2,但需要運行事先向科爾多瓦生成。

大致相似,移動應用程式也會遇到很多組合的螢幕尺寸和方向,如中所述圖 5

圖 5 常見的螢幕大小組合

畫像寬度/景觀高度 肖像高地/橫向寬度
240 (低端手機) 320, 400, 480
320 (中級電話) 462、 480、 470,568 和更大的高度,在 Windows 上以狹隘的視角。
480 (中級電話) 640、 800、 854 和其他高地在 Windows 上的使用比 500 px 縱向方向。
720,768 (片) 960,1024年或更大。IPad 是 1024 x 768,正如在 Windows 上的一些看法。
大於 768 iPad 2 和以後 ; 大多數 Windows 筆記本電腦和平板電腦和許多 Android 平板電腦。

快速回應 Web 設計的所有原則 — — 使用媒體查詢來調整邊距、 字體大小、 佈局、 動畫等等 — — 是必要的與科爾多瓦應用程式 (並保持事情很簡單,我在這裡 ! 應用程式支援僅肖像模式)。要用心,太,設備的物理螢幕尺寸不一定向 CSS 呈現引擎報告。高 DPI 顯示器通常有意義中的大小的縮放因數應用, 圖 5 適用于 [min | 最大]-[寬度 | 高度] 媒體查詢而不是 [min | 最大]-設備-[寬度 | 高度] 查詢。在某些情況下的縮放不可能確切地說,要麼 ; 在 iPad 上的名義 768 px 維度可能出現在 CSS 作為 767。 及早並經常,測試及再考慮一個 CSS 框架或預處理工具。

科爾多瓦 App 專案結構

我們的標記和 CSS 是體面的外形後,我們便可以納入科爾多瓦的應用程式。在Visual Studio,科爾多瓦應用程式創建的檔 |新 |專案,選擇 JavaScript |Apache 科爾多瓦應用程式 |空白的應用程式 (Apache 科爾多瓦),給出了在所示的專案結構圖 6 (注意,這是變動作為科爾多瓦方法 RTM 的工具)。

圖 6 中Visual Studio的專案結構

資料夾或檔 可以重命名嗎? 說明
css 可以 用於樣式表的資料夾。Css、 圖片和腳本資料夾可以所有重命名任意並從您的 HTML 檔案引用。
影像 可以 預設為非特定于平臺的圖形的 (空) 的資料夾。
合併 特定于平臺的 JavaScript 的的資料夾。生成工具取決於此資料夾的名稱,與 res。
res 資料夾中的特定于平臺的資源 (例如圖示、 閃屏和清單。
指令碼 可以 JavaScript 檔的預設資料夾。
config.xml 符合 W3C 打包 Web 應用程式 (小部件) 規範全域設定檔。它可以作為一個通用的清單,其設置轉化為特定于平臺的清單條目。Visual Studio為 config.xml,提供了一個設計器,您可以編輯原始 XML,如某些設置不會被顯示在設計器中。
index.html 可以 預設啟動該應用程式,所指的公共頁面 |開始頁欄位的 config.xml。 如果您重命名它,config.xml 進行相應的更新。

為我們的應用程式,我們會將標記到 index.html 與我們到 css/index.css 的風格。 我們也會帶來各種好吃的東西,我們已經複製到 css/框架、 css/字體和腳本/框架,以保持一切組織跨平臺 WinJS 3.0 庫中 (和當然你可以使用任意數量的其他庫 (如 AngularJS 和引導)。這裡是 < 頭 > index.html 元素:

<!-- Recommended to prevent pinch zoom in webviews -->
<meta name="viewport" content="user-scalable=no" />
<link href="css/frameworks/ui-dark.css" 
  rel="stylesheet" /> <!-- WinJS -->
<link href="css/index.css" rel="stylesheet" /> <!-- App styles -->
<script src="cordova.js"></script> <!-- Cordova standard -->
<!-- WinJS -->
<script src="scripts/frameworks/base.js"></script>
<script src="scripts/frameworks/ui.js"></script>
<script src="scripts/frameworks/winjs.js"></script>
<!-- Project references -->
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>

注意到 cordova.js,你不會找到任何地方在您的專案 ; 提到 它是帶來了自動作為生成過程的一部分。

至於 platformOverrides.js,具有此名稱的根腳本資料夾中的檔是空的但還有另一個合併/windows/腳本載入了被稱為 winstore jscompat.js (以説明容納協力廠商庫) 的另一個檔中。在生成時間,所有檔和資料夾下合併 / < 平臺 > 複製到最後的資料夾結構,覆蓋任何檔具有相同的名稱在根專案中。在 Windows 上,scripts/platformOverrides.js merges/windows/scripts/platformoverrides.js 被替換。 這是如何將特定于平臺的代碼中,如果需要,和同一檔級別合併也適用于 CSS、 圖像和任何其他的東西。只是記住它是檔級合併,不合並檔的內容 !此外注意到為了支援功能檢測方法,可能否決合併資料夾。

Res 資料夾中的內容有相似,但更多樣的行為,因為應用程式套裝軟體,而不是代碼中的 web 視圖或主機運行需要這些資源。記得科爾多瓦生成 web 視圖是在必要時,意味著它創建一個包作為所需的目標平臺的本機應用程式的資料夾結構的本機應用程式包裝。圖 7 說明了Visual Studio專案的不同部分在生成中的結束位置。如果你建立一個專案,然後打開 bld/調試/平臺資料夾,您可以看到的結果。我們將稍後使用此行為可自訂的 Windows/Windows Phone 應用程式清單。

不同部分如何在特定于平臺的源專案最終生成資料夾 (如有變動)
圖 7 不同部分如何在特定于平臺的源專案最終生成資料夾 (如有變動)

本機 Api 和外掛程式

現在我們已經準備好向我們的應用程式,在 JavaScript 中添加行為。預設情況下,Visual Studio中的科爾多瓦應用程式範本用品中所示的代碼圖 8 (省略的大多數評論)、 哪裡科爾多瓦 deviceready、 暫停和恢復事件抽象類別似的應用程式生命週期事件,在各種平臺上 (請參閱 Apache 科爾多瓦文檔的"事件"部分 bit.ly/1u1hT1n 完整名冊)。

圖 8 從科爾多瓦應用程式範本的預設代碼

(function () {
  "use strict";
  document.addEventListener('deviceready', 
    onDeviceReady.bind(this), false);
  function onDeviceReady() {
    document.addEventListener('pause', onPause.bind(this), false);
    document.addEventListener('resume', onResume.bind(this), false);
    // Perform other initialization here.
  };
  function onPause() {
  };
  function onResume() {
  };
} )();

為簡單起見,我們不會堅持在這裡我的任何資料 !,所以我們已經刪除的暫停和恢復處理常式。

請注意,deviceready 通常觸發後 DOMContentLoaded,所以你可以做你 deviceready 處理常式內的 DOM 相關的初始化。在一些調試方案中,然而,如使用Visual Studio遠端偵錯在無線網路中,它是可能為 deviceready 烈火之前 DOMContentLoaded,導致 null 物件例外。在這裡我上午 ! 使用一些標誌來處理這種差異。

這裡是我們現在需要做的我們的應用程式:

  • 這裡用初始化欄位,使用者的位置和電線上的查找按鈕。
  • 初始化的預設消息的照片區域並將其連接到相機捕獲。
  • 啟用共用的位置和形象。
  • 鎖定顯示方向為縱向。

雖然我們可以使用 HTML5 地理位置 API,並寫一大堆代碼分享到特定的社會網路,我們開始跑入相機捕捉的問題可以影響到科爾多瓦發展 (例如,在 iOS 和 Android) 的兩個主要的 web 視圖限制:

  1. WebViews 可阻止 JavaScript 訪問任何本機平臺的 Api,因為從一個潛在的遠端資料源載入不受信任的 JavaScript 代碼的安全威脅。(在 Windows 平臺上,包在 JavaScript 受信任,並且可以調用本機 Api,但遠端載入的腳本不能。
  2. WebViews 通常支援 HTML5 Api 的一個子集 (由平臺各不相同,請檢查 caniuse.com),和許多的本機功能是不會得到適當的 HTML5 標準。

幸運的是,一個本機應用程式和它包含的任何 web 視圖,可以通過由作業系統提供的特殊機制聯繫。科爾多瓦文摘這些機制通過外掛程式,如中所示圖 9。簡單地說,外掛程式包含一個通用的 JavaScript 介面載入到 web 視圖,反過來使用該平臺的通信通道談談一塊本機代碼編譯為該平臺,可以使用本機 Api。再次,在底層平臺支援本機的 JavaScript 應用程式,並非必要經過這樣一座橋,但外掛程式仍能夠抽象平臺差異。

結構的科爾多瓦外掛程式橋接時是必需的作為對 iOS 和安卓系統
圖 9 結構的科爾多瓦外掛程式橋接時是必需的作為對 iOS 和安卓系統

ASF 為存儲、 媒體、 網路、 地理位置、 感應器、 對話方塊、 媒體捕獲、 通知、 設備資訊和全球化等常見本機 Api 提供了一套核心的科爾多瓦外掛程式。當您選擇這些外掛程式Visual Studioconfig.xml 編輯器內時,適當的代碼被自動拉到您的生成。

您還可以流覽健康的生態系統的協力廠商外掛程式在科爾多瓦外掛程式註冊表 (plugins.cordova.io) 和其他網站如 plugreg.com。其中包括所有的功能,包括廣告、 微軟 Azure 移動服務、Bluetooth通訊、 社交分享和更多的方式。並因為外掛程式並不強制到只是表面的本機 Api,在 1 到 1 的基礎上,通過構建更高級的功能,如條碼掃描以及與 Web 服務的集成情況下外掛程式開發人員經常添加值。該外掛程式為 Windows Phone 的聲樂助理柯塔娜是一個偉大的例子。由微軟打開技術公司,專注于開放源碼技術,微軟全資子公司開發的它受到熱烈開發人員在一天的 PhoneGap 在 2014 年 10 月。 不過,要用心,平臺支援差別在外掛程式之間。例如,賓館外掛程式支援僅 Windows Phone 8.1。

無論如何,Visual Studioconfig.xml 編輯器可以説明您輕鬆地拉入您的專案的外掛程式來源如科爾多瓦註冊表或 GitHub,在 MSDN 庫文章中,"管理外掛程式為應用程式建立與 Apache 科爾多瓦Visual Studio工具"所述在 bit.ly/10ov6Fo。我們不久就會舉一個例子。Visual Studio自動拉在正確的檔,所以適當的方法而無需顯式引用插頭的 JavaScript 檔添加到全域命名空間。

總體來看,當思考本機 Api,科爾多瓦與公約 》 是第一次尋找一個適當的外掛程式,而不是特定于平臺的代碼添加到您的應用程式。如果你找到一個接近你想要什麼,把它擴展 — — 畢竟,很多人都如你,開發人員編寫和貢獻是在 GitHub 上受歡迎。否則,請參閱 Apache 科爾多瓦文檔,以創建您自己的外掛程式你然後可以與共享科爾多瓦社區"外掛程式開發指南"部分。

完成應用程式

瞭解通過外掛程式訪問本機 Api 的方式,我們可以完成我們的應用程式的功能。地理位置,我們拉在科爾多瓦地理位置外掛程式並將此代碼添加到我們的 deviceready 處理常式,以初始化位置欄位和線上的查找按鈕:

locate();
document.getElementById("btnLocate").addEventListener("click", locate);

然後我們實現定位的方法,如中所示圖 10

圖 10 執行地理位置

function locate() {
  navigator.geolocation.getCurrentPosition(function (position) {
    App.lastPosition = {
      latitude: position.coords.latitude, 
        longitude: position.coords.longitude,
      address: "(" + position.coords.latitude + ", 
        "      + position.coords.longitude + ")"
    };
    // Go translate the coordinates into an address using the Bing Map Web API.
    updatePosition();
  }, function (error) {
    WinJS.log && WinJS.log("Unable to get location: "
     + error.message, "app");
  }, {
    maximumAge: 3000, timeout: 10000, enableHighAccuracy: true
  });
}

等待一分鐘 — — 不是 navigator.geolocation 只是 HTML5 API 嗎?嗯,也許吧:該外掛程式可以智慧地使用 HTML5 執行是否可用,否則它將相同的函數添加到全域命名空間使用本機 Api 實現的 (或如果沒有平臺支援優雅地將失敗)。這種方式,代碼遷移從 Web 網站不會被改寫。

獲得位置,我們在 App.lastPosition 中存儲座標和創建預設的 App.address 字串,我們使用 txtLocation UI 元素和共用。我們 (未顯示) 的 updatePosition 函數然後嘗試使用 Bing 地圖 Web API 來翻譯成一個有意義的位址這些座標在設置 txtLocation 值之前。請參閱附帶的代碼下載的詳細資訊。

對於攝像機捕獲,我們最初創建預設圖像和照片區做捕捉線:

setPlaceholderImage();
document.getElementById("photo").addEventListener("click",
  capturePhoto.bind(photo));

科爾多瓦觀景窗外掛程式添加方法往往­tor.camera.getPicture 到全域命名空間。如果成功,此調用提供一個 URI 到圖像設備的本地檔案系統,我們可以只是將其分配給一個 img.src 屬性上。在所示的代碼圖 11,轉讓發生在我們是否要保持圖像的長寬比的藏寶的 scaleImageToFit 函數內。

圖 11 和科爾多瓦觀景窗外掛程式一起工作

function capturePhoto() {
  var photoDiv = this;
  // Capture camera image into a file.
  navigator.camera.getPicture(cameraSuccess, cameraError, {
    quality: 50,
    destinationType: Camera.DestinationType.FILE_URL,
    encodingType: Camera.EncodingType.JPEG,
    mediaType: Camera.MediaType.PICTURE,
    allotEdits: true
    correctOrientation: true // Corrects Android orientation quirks.
  });
  function cameraSuccess(imageFile) {
    // Save for share and enable Share button.
    App.lastCapture = imageFile;
    document.getElementById("btnShare").disabled = false;
    // Do letterboxing and assign to img.src.
    scaleImageToFit(photoDiv.querySelector("img"), 
      photoDiv, App.lastCapture);
  };
  function cameraError(error) {
    WinJS.log && WinJS.log("Unable to obtain picture: " + error, "app");
  };
}

實現共用,其中啟用了當我們有一個圖像時,我們發現渦流維爾布魯根社會­共用外掛程式上 plugreg.com,該作品與文本和圖像。當我們將其添加為自訂外掛程式直接從 GitHub,如中所示圖 12,Visual Studio下載我們需要自動的一切。(此過程將從存儲庫,下載一切但唯一的本質部分是插頭中的 plugin.xml 檔和 src 及 www 資料夾中 ; 一切都可以被刪除。)

從 GitHub 添加自訂外掛程式
圖 12 從 GitHub 添加自訂外掛程式

現在我們可以共用按鈕接通並調用外掛程式中的 socialsharing.share API (window.plugin 命名空間) 中,所得到的可愛的 UI 中所示圖 13 ,提供了多種的共用選項類似于在 Windows 8 的份額魅力 / 8.1:

document.getElementById("btnShare").addEventListener("click", App.share);
function share() {
  var txtLocation = document.getElementById("txtLocation").value;
  plugins.socialsharing.share("At " + txtLocation, "Here My Am!",
    App.lastCapture);
}

共用關於 Android、 iOS 和 Windows Phone 8 (圖像禮貌的 SocialSharing 外掛程式)
圖 13 共用關於 Android、 iOS 和 Windows Phone 8 (圖像禮貌的 SocialSharing 外掛程式)

但這裡有一個障礙:SocialSharing 支援 Android、 iOS 和 Windows Phone 8,但沒有 Windows 8/8.1 和 Windows Phone 8.1。很多協力廠商外掛程式平臺支援,事實上,提出明確的機會,説明改善該外掛程式為社會的利益被有限。為這篇文章,不過,它給我們一個機會來演示如何使用合併資料夾中,因為一個科爾多瓦在 Windows 應用程式運行在系統主機在那裡我們可以直接從 JavaScript 調用本機 Api 和外掛程式完全繞過內。

首先,我們會將上述共用功能移動到一個 share.js 檔並將其作為 App.share 公開:

WinJS.Namespace.define("App", {
  configurePlatformSharing: function () { },
  share: share
});
function share() {
  var txtLocation = document.getElementById("txtLocation").value;
  plugins.socialsharing.share("At " + txtLocation, "Here My Am!",
    App.lastCapture);
}

接下來,在 merges/windows/share.js,將取代非特定平臺 share.js,我們提供一個不同的 App.share 函數,調用共用魅力:

function share() {
  Windows.ApplicationModel.DataTransfer.DataTransferManager.showShareUI();
}

若要使這項工作,不過,我們必須接通一個處理常式在初始化為 DataTransferManager.ondatarequested 事件程序中。這是此存根 (stub) 方法 configurePlatformSharing,沒有到非 Windows 平臺,當我們在 deviceready 處理常式中調用它:

App.configurePlatformSharing();
In the Windows-specific share.js, however, we do more:
WinJS.Namespace.define("App", {
  configurePlatformSharing: configurePlatformSharing,
  share: share
});
function configurePlatformSharing() {
  var dataTransferManager = 
    Windows.ApplicationModel.DataTransfer.
    DataTransferManager.getForCurrentView();
  dataTransferManager.addEventListener("datarequested", provideData);
}

在前面的代碼中,provideData 將創建適當的資料包,結果是本土魅力經驗分享關於 Windows 8.1 和 Windows Phone 8.1 中所示圖 14

共用 Windows 8.1 和 Windows Phone 8.1
圖 14 共用 Windows 8.1 和 Windows Phone 8.1

我們的應用程式的最後一塊是執行僅肖像的視圖,使我們有機會看看如何我們通過 res/本機資料夾有完全控制特定于平臺的清單在必要的時候。在這種情況下,設置共同 |肖像在 config.xml 編輯器中的定位是足夠的 android 作業系統,但撰寫本文時不影響 Windows 和 Windows Phone。沒問題 — — 我們可以在應用程式清單中將某些自訂項。

要做到這一點,請運行生成和去 bld/平臺/視窗你將在這裡找到名為 package.windows.appxmanifest (Windows 8.1)、 package.phone.appxmanifest (Windows Phone 8.1) 和 package.windows80.appxmanifest (Windows 8) 生成的清單。複製任何那些你需要到 res/本機/windows 並進行更改。若要強制縱向方向,這是我們需要在應用程式內的一切 |應用程式 |VisualElements 節點 (顯示 Windows 8.1 ; 使用命名空間首碼 m3:對於 Windows Phone 8.1 和沒有針對 Windows 8 的首碼):

<m2:InitialRotationPreference>
  <m2:Rotation Preference="portrait" />
  <m2:Rotation Preference="portraitFlipped" />
</m2:InitialRotationPreference>

在生成時,科爾多瓦轉化的開始版面設定和個人喜好在 config.xml 中的為特定于平臺的清單,以及從外掛程式的特定于平臺的詳細資訊。具體來說,如果你看在 plugin.xml 檔中任何外掛程式的資料夾,您將看到這樣的條目:

<platform name="windows">
  <config-file target="package.windows.appxmanifest"
    parent="/Package/Capabilities">
    <Capability Name="picturesLibrary" />
    <DeviceCapability Name="webcam" />
  </config-file>  <!-- ... -->
</platform>

前面的代碼中說,"對於 Windows 的目標,我在 package.windows.appxmanifest 檔中,將這些能力和 DeviceCapability 的元素包下添加 |功能節點"。所以,很明顯,定位外掛程式可以做同樣的工作,我們做了手動。,我們有一個功能的應用程式 !

調試、 部署和其他應用程式生命週期問題

作為開發人員,你清楚地知道編寫的代碼只是一部分的生產市場準備好軟體的整個過程和Visual Studio有點有提供在這裡,如中所示圖 15

圖 15 附加Visual Studio功能科爾多瓦的應用程式

Feature 描述或筆記
偵錯

在編寫本報告時,下列設備和模擬程式支援Visual Studio中調試 JavaScript Console 與 DOM 資源管理器中:

  • Android 2.3.3 及更高版本 (4.4 或更高版本是最好的)
  • iOS 6,7 8
  • Windows 8 和 8.1
  • Apache 的 Android 和 iOS 波紋 (基於 Chrome 的模擬器)

調試 Windows Phone 8 和 8.1 目前不受支援,但您可以使用 Web 督察遠端 (weinre) 在微軟開放技術博客中所述在 bit.ly/1y9k0zr

當在波動中運行,您可能會遇到的臭名昭著的消息,"我熱影響區起士漢堡?!?!"對此資訊,請參閱在Visual Studio工具常見問題解答 bit.ly/1x71P0q,如果有疑問,只是打成功按鈕。說要在 JavaScript 主控台中初始化的代碼 ; 進行調試運行 window.location.reload 函數的預設 index.js 檔還有一份說明 當心這重新載入最新生成和不重新生成該應用程式或應用到原始程式碼檔的任何更改。

IntelliSense Visual Studio給你IntelliSenseHTML、 CSS 和 JavaScript 代碼,包括越來越多的 JQuery、 Backbone.js 和 Require.js 等協力廠商庫。
Test Appium 和厚顏無恥是流行的開源自動化工具。Visual Studio厚顏無恥測試執行程式集成了Visual Studio測試資源管理器和Team Foundation建設。廣泛的設備測試可以使用完美移動服務。
應用程式開發週期管理 Visual StudioALM 功能提供的 (Team FoundationServer 或 GitHub 上承載) 的敏捷規劃、 原始程式碼管理、 團隊協作和跨平臺專案和團隊成員使用其他 Ide 的版本管理。

這是很有説明,因為走進建築科爾多瓦的應用程式,讓你知道你會發現在每個平臺上的古怪行為。這是開發的就是開發的跨平臺,目前,這意味著你應該指望做盡可能每個平臺調試,正如你會寫本機應用程式為每個目標的天性。同樣地,部署發生與每個應用程式商店單獨使用特定于這些平臺的工具。科爾多瓦這些進程不是快捷方式。

特定于平臺的生成會拉你專案 res 資料夾中適當的資源:一定要審查該內容並確認您擁有所有正確的圖形和其他檔為每個平臺。當在一起讓你最後的包,也仔細檢查清單以確保正確地確定了您的應用程式和您的公司和你沒有攜帶資料從預設的專案範本。

當您的應用程式準備好去真正的客戶,就把自己奉獻給回應及時的應用程式更新的問題。甚至一個單一的平臺,有效地將客戶您現場測試人員在領土內的這麼多設備相差並不是 — — 一定要尊敬這種作用與快速更新。

在即將舉行的Visual Studio的版本中會發生什麼

最後,我們已經看到如何為 Apache 科爾多瓦Visual Studio工具走很長的路到簡化跨平臺科爾多瓦發展。微軟開放技術是科爾多瓦專案本身,有重大貢獻和Visual Studio工具團隊,致力於使體驗更好 — — 我們已經在這篇文章是只是一個預覽 !向前邁進,團隊正在看應用程式功能,如更多IntelliSense,更好地在多個平臺、 HTML/CSS 設計師、 改進的單元測試,團隊建設,支援支援上進行調試和加快,支援標準的 Web 開發者工作流程推式通知。是否有你想要看看其他功能嗎?給我們您的回饋意見通過 Microsoft UserVoice 網站 (visualstudio.uservoice.com) 或 @VSCordovaTools 上 Twitter,並加入有關在計算機上工具組討論 (bit.ly/1yCReYa)。

提示、 技巧和筆記

運動目標:若要輕鬆地切換目標平臺,解決方案平臺將控制項添加到您的工具列中"創建您第一次你好世界 App,"MSDN 庫文章所述在 bit.ly/1th836k

PhoneGap 和科爾多瓦:科爾多瓦開始作為移動框架和生成系統稱為 PhoneGap 由 Nitobi 軟體有限公司,旨在通過抽象背後一個框架的差異在不同的手機平臺之間的差距。Adobe 系統公司 在 2011 年取得聯繫,隨後打開來源給 Apache 軟體基金會框架作為 Apache 科爾多瓦到哪個微軟打開科技股份有限公司 是作出重大的貢獻。Adobe 運行從 Web 代碼中創建本機應用程式套裝軟體,所以你不需要在您自己的電腦上的本機 Sdk 基於雲計算的 PhoneGap 生成系統。

Android 模擬器:有原始的 Android SDK 模擬器是值得避免像撥號上網,除非您將配置虛擬機器 (VM) 加速度的開發者社區的接近普遍協定。Visual Studio2015年預覽包括安卓系統的快速超-V/基於 x86 的Visual Studio模擬器 (bit.ly/1xlRwFT),這是與 Windows Phone 模擬器相容 (和,一旦安裝,配合Visual Studio2013年更新 4)。如果您不想安裝Visual Studio2015年預覽,您還可以為 Android 使用 GenyMotion 模擬器。

科爾多瓦的甜蜜點:開發人員通常意識到科爾多瓦應用程式內運行 HTML、 CSS 和 JavaScript,總是不會產生真正本土的經驗,在每個平臺上。科爾多瓦的應用程式,然後,是不必符合本機的 UI 模式的高度品牌體驗和企業應用程式的理想跨平臺的分化不所需的地方。科爾多瓦也是快速生成生產應用程式在市場上測試的想法的一種有效手段説明您瞭解在何處進行更深層次的業務投資。

引用遠端腳本:Web 應用程式經常從遠端資料源,載入 JavaScript 庫,這合情合理,因為使用者必須連線才能看到該 Web 網站。移動應用程式,但是,應該提供一個偉大的經驗,沒有連接,所以最好要下載遠端腳本並將其包括在您的專案中直接。這被必需的 Windows 8/8.1 和 Windows Phone 8.1 哪裡系統主機不允許遠端腳本 ; 載入一個庫,它將嘗試載入其他遠端腳本會帶來的問題在這裡,和你可能需要做一些修補,使其所有工作的手冊。

在一段時間的一個平臺:使用跨平臺工具,諸如科爾多瓦並不意味著你必須船舶應用程式在多個平臺同時。你可能知道你的投資將應用於其他平臺稍後最初,目標只有一個單一的平臺。這種方式,您可以優化您的 UI 和 CSS 為一個平臺在一段時間。


Kraig Brockschmidt 作為高級內容開發人員在微軟開發部工作,側重于為移動雲計算連接的應用程式的開發人員指南上的窗戶,iOS 和 Android。他是作者"與 HTML、 CSS 和 JavaScript 程式設計 Windows 應用商店應用程式"(兩個版本) 從微軟出版社和共用其他見解上 kraigbrockschmidt.com/blog

Mike Jones 是一位已經在微軟的手機上工作了 10 年,從緊湊框架到 Silverlight 為 Windows PhoneVisual Studio工具為 Apache 科爾多瓦的程式師作家。他一直享有 JavaScript 後長的、 有趣的戀情,與 C# 中,過去的幾年 et al。

感謝以下的微軟技術專家對本文的審閱:查克 · 蘭特、EricMittelette、 帕拉舒拉姆汗,Ryan薩爾、 艾曼達銀、 謝麗爾 · 西蒙斯和 Priyank 辛格