Visual Studio 2015 和 Apache Cordova 跨平臺開發入門(一)

基於 Windows 10 的 Visual Studio 2015 跨平臺的應用開發主要分爲基於Visual Studio 安裝 Xamarin 擴展的跨Android、iOS 和 Windows的應用開發，基於Apache Cordova 的 Visual Studio 工具開發跨Windows、Android 和 iOS 設備的應用，基於Visual C++ 建立跨 Android 和 Windows 的應用，以及Visual Studio tools for Unity 建立跨 Android、iOS 和 Windows平臺的遊戲。

此係列文章主要針對於基於Apache Cordova 的 Visual Studio 工具，介紹開發跨Windows、Android 和 iOS 應用的實戰。使用Apache Cordova的前提是您比較熟悉 HTML 和 JavaScript，不必定很是精通 JavaScript就能夠使用Apache Cordova 的 Visual Studio 工具開發跨Windows、Android 和 iOS 的應用。

本系列文章主要內容：

在 Windows 10 中安裝 Visual Studio 和Visual Studio Tools for Apache Cordova

建立Cordova 跨平臺應用

Cordova 應用與 Microsoft Azure 的數據互聯

適用於 Android 的 Visual Studio 仿真程序

打包和發佈Cordova應用程序

 

Cordova 是什麼？

簡單地說，它是一個跨平臺開發的框架。 此框架包括插件模型，插件模型提供了一個可運行於全部三個平臺（iOS、Android 和 Windows）設備功能的 JavaScript API。

因爲這些 API 是跨平臺的，所以你能夠在三個平臺之間共享所編寫的大部分代碼，減小開發和維護成本。 此外，無需從頭開始。 若是已建立了其餘類型的 Web 應用程序，則能夠與 Cordova 應用共享這些文件，而無需以任何方式修改或從新設計。

 

安裝開發環境

在Windows 10中安裝 Visual Studio 2015和Visual Studio Tools for Apache Cordova

於 https://www.visualstudio.com/downloads/visual-studio-2015-downloads-vs 可下載 Visual Studio 2015（當前微軟提供的RC版），您能夠選擇 Community 版本（免費）或者 Enterprise 版本（商業版）。

 

說明：

在Visual Studio 2013中 Cordova 工具是做爲單獨的擴展安裝，在 Visual Studio 2015中已經集成於Visual Studio中，建議您使用Visual Studio 2015開發Cordova的跨平臺應用。

 

1. 運行Visual Studio 2015安裝程序，確保安裝如下功能：

• HTML/JavaScript (Apache Cordova)
• Windows 8.1 和 Windows Phone 8.0/8.1 工具

確保容許安裝程序安裝第三方軟件依賴項，或者能夠清空軟件選項並手動安裝之後要使用的依賴項。

Visual Studio 2015 的安裝程序包括支持 Cordova 應用開發的第三方開源軟件：

• Joyent Node.js 讓 Visual Studio 能與 Apache Cordova 命令行界面 (CLI) 和 Apache Ripple 仿真器集成
• 爲特定的 Cordova 插件手動添加 Git URI 時須要使用的 Git CLI。
• 使用 Google Chrome在 iOS 和 Android 上運行 Apache Ripple 仿真器
• Android 生成過程須要用到的 Apache Ant 1.8.0 或更高版本。
• Android 生成過程須要用到 32 位的 Oracle Java JDK 7。注意： 不支持 64 位的 Java。
• Android 生成過程和 Ripple 須要用到的 Android SDK。
• Apple iTunes將應用部署到iOS 設備。

 

1. 安裝針對iOS的工具

若要使用 Visual Studio 在 iOS 模擬器或 iOS 設備上建立和運行 iOS 應用，必須 Mac 計算機上安裝並配置遠程代理 vs-mda-remote，並在 PC 上的 Visual Studio 中配置遠程代理。此部分的配置請讀者參考 Configure the Visual Studio Tools for Apache Cordova ( https://msdn.microsoft.com/en-us/library/dn771551(v=vs.140).aspx )中的iOS部分。

 

安裝擴展後，打開 Visual Studio 並建立空白應用 (Apache Cordova) 項目。 而後，即可使用 JavaScript 或 TypeScript 來開發應用了。 也能夠添加插件來擴展應用的功能，編寫代碼時插件的 API 會出如今 IntelliSense 中。

若是已準備好運行應用並逐行執行代碼，請選擇一個仿真程序（如 Apache Ripple 仿真程序或適用於 Android 的 Visual Studio 仿真程序）或一個已直接鏈接到計算機的設備。 而後，啓動應用。 若是是在 Windows PC 上開發的應用程序，則可在其中運行。 全部這些選項都做爲 Visual Studio Tools for Apache Cordova 擴展的一部份內置於 Visual Studio 中。

手動安裝Cordova依賴項

一般咱們會選擇不安裝一個或多個帶擴展的依賴項，待之後手動安裝。或者像做者同樣安裝Android SDK時遇到下載失敗的狀況。此時，咱們都須要用到手動安裝依賴項的技能。

請注意Java的安裝請選擇32位安裝包，由於不支持64位的Java。

 

使用這些連接來手動安裝依賴項。

Joyent Node.js

推薦安裝 x86 版本的 Node.js。

Google Chrome

Git 命令行工具

在安裝 Git 命令行工具時選擇將 Git 添加到你的命令提示符路徑這一選項。

Apache Ant

下載 Ant 並將其解壓到 C:/ant-1.x.x 之類的位置

將 ANT_HOME 環境變量設置爲指向以前的位置。

將 %ANT_HOME%\bin 添加到系統路徑。

32 位 Oracle Java 7

將 JAVA_HOME 環境變量設置爲 C:/Program Files/Java/jdk1.7.0_55

將此項添加到系統路徑：%JAVA_HOME%\bin

帶 SDK 程序包的 Android SDK

Android SDK 工具（最新版本）

Android SDK 平臺工具（最新版本）

Android SDK 生成工具（19.一、19.0.3 和 21）

帶如下程序包的 Android 4.4.x（API 級別 21）：

SDK 平臺

ARM EABI v7a 系統映像

Intel x86 Atom 系統映像

Google API（x86 系統映像）

Google API（ARM 系統映像）

下面的插圖顯示了 Android SDK 管理器中所需的最小程序包。

將 ADT_HOME 環境變量設置爲 SDK 安裝位置。

將此項添加到系統路徑：%ADT_HOME%\tools;%ADT_HOME%\platform-tools

Apple iTunes (x86 、x64 )

WebSocket4Net（在 Windows 7 上開發應用時須要使用）

1. 從 CodePlex 上下載 WebSocket4Net(0.9).Binaries.zip。
2. 從下載的 zip 文件中將 net45\Release\WebSocket4Net.dll 複製到你計算機上的 %ProgramFiles(x86)%\Microsoft Visual Studio 12.0\Common7\IDE\CommonExtensions\Microsoft\WebClient\Diagnostics\ToolWindows 文件夾中。

 

重置環境變量

可以使用Visual Studio檢測和維護下列環境變量中的安裝路徑：

• ADT_HOME 指向 Android 安裝路徑。
• ANT_HOME 指向你計算機上的 Ant 文件夾。
• GIT_HOME 指向 Git 安裝路徑。
• JAVA_HOME 指向 Java 安裝路徑。

Visual Studio 在建立並運行你的應用時會使用這些環境變量。 你能夠經過 Visual Studio"選項"對話框來查看環境變量並修改它們的值。

1. 在 Visual Studio 菜單欄上依次選擇"工具"和"選項"。
2. 在選項對話框中，選擇 適用於 Apache Cordova 的工具，而後選擇Environment Variable Overrides。
3. 請選中要修改項的複選框，而後修改該值。

若要將環境變量重置爲默認值，請取消選中其複選框或選擇"重置爲默認"。

 

建立Cordova跨平臺應用

建立新項目

1. 以管理員用戶打開 Visual Studio。 在菜單欄上，依次選擇"文件"、"新建"、"項目"。

 

1. 在"新項目"對話框中，在"模板"下，選擇"JavaScript"和"Apache Cordova 應用"，而後選擇"空白應用"模板。

 

Visual Studio 建立新的工程，在Solution Explorer 中包含如下的文件

全新的Cordova 項目目錄結構：

• merges 存放各個平臺的特殊的代碼，與www目錄合併編譯，相同的文件merges下的代碼文件優先。

• plugins 即插件目錄，cordova 訪問本地設備屬性的原生API也是以插件的形式提供。
• res 適用於各個平臺的特殊資源（圖標和啓動畫面）。
• www 包含應用程序代碼。
  • css 包含默認空白模板的基本CSS樣式。
  • images 建議應用的圖片保存於此。
  • scripts 是JavaScript 和 TypeScript 文件默認的保存目錄。

 

• config.xml 包含工程的配置文件
• taco.json 存儲使 Visual Studio 打造非 Windows 操做系統像 mac 上的項目元數據
• www\index.html 是應用默認的主頁面。
• Project_Readme.html 包含有用的信息連接。

 

 

參考

https://www.visualstudio.com/en-US/explore/cordova-vs

https://msdn.microsoft.com/en-us/library/dn771552(v=vs.140).aspx

https://cordova.apache.org/

https://xamarin.com/msdn

 

做者：雪松

Microsoft MVP -- Windows Platform Development,

Hortonworks Certified Apache Hadoop 2.0 Developer