使用Cordova將網站（Web Applications）封裝為移動Apps
阿新 • • 發佈：2019-01-17
Cordova是一個可將網頁程式（Web Applications）轉換為Apps的框架，支援蘋果、安卓、微軟三大移動商店應用開發。Visual Studio 2015對Cordova有著良好的支撐，包括專案模板、編碼、除錯、打包到部署，一如既往的微軟大包大攬風格。我最近試著用Visual Studio Tools for Apache Cordova包裝了一個手機版的H5網站，未對原始網站做任何改動，就生成了能在Android、iOS和Windows Phone上部署執行的Apps。這麼高的生產力，對管理人員而言，無疑是很有吸引力的！下面說一下我的封裝過程及遇到的坑，供參考。
一、使用
1.安裝Visual Studio Tools for Apache Cordova，參考“http://www.cnblogs.com/UltimateAvalon/p/5328642.html”。安裝中有兩個保持，首先是要保持網路暢通，因為很多檔案（特別是Android SDK）必須從網上下載；再就是要保持耐心，安裝耗費時間與網路狀況有很大的關係。對於Android、iOS的SDK最好是用現成的，如果現下現裝，那就只會增加挫折感。
2.練習，參考“http://www.cnblogs.com/UltimateAvalon/p/5329677.html”。中間會涉及到Android、iOS開發的常識，自己搜文章看，反覆看，反覆練，如果感覺困難重重，那就放棄吧。
3.封裝H5網站成App。
3.1.在Visual Studio 2015中使用專案模板“JavaScript->Apache Cordova Apps->Blank App（ Apache Cordova）”新建一個工程；
3.2.開啟config.xml,在“外掛(Plugins)”標籤頁安裝“InAppBrowser”；
3.3.開啟“www->scripts->index.js”，在“function onDeviceReady”的最後新增如下程式碼，注意填入你要封裝網站的URL：
if (window.cordova && window.cordova.InAppBrowser) {
window.open = window.cordova.InAppBrowser.open;
window.open('此處為你要封裝網站的URL', '_blank', 'location=no,toolbar=no');
}
4.修改配置檔案，開啟config.xml，在“通用（Common）”標籤頁設定App顯示名稱（Display Name），程式包名稱（Package Name），根據需要在“Windows、Android、iOS”標籤頁設定平臺相關引數。
5.除錯，包括Ripple模擬器、Windows、Android、iOS平臺模擬器。
6.調整美化頁面，現在流行使用Ionic框架，參見“http://www.runoob.com/ionic/ionic-tutorial.html”。
7.製作圖示、閃屏圖片替換“resources”及其子目錄下的對應檔案。
8.打包和釋出，參見“http://taco.visualstudio.com/en-us/docs/tutorial-package-publish-readme/”。
二、跳坑
1.真機除錯
Android：在手機端啟用開發者模式，然後USB線連線電腦，在Visual Studio中選擇“裝置（Device）”進行除錯；
iOS：在Mac上用Xcode生成一個繫結名(Bundle Identifier）與config.xml裡設定的程式包名稱（Package Name）完全相同的iOS工程，並用該Xcode工程完成真機除錯，然後在Visual Studio中選擇“遠端裝置（Remote Device）”或“本地裝置 （Local Device）”除錯；
Windows Phone 10：在手機端啟用開發者模式，並且把下面的裝置發現和裝置門戶開啟，然後USB線連線電腦，在Visual Studio中選擇“裝置（Device）”進行除錯。
2.在Android中除錯時提示“Application Error - The connection to the server was unsuccessful.”
這是由於模擬器響應太慢導致的，可通過改名法解決，首先把index.html更名為main.html，然後新建一個index.html頁面，內容如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script> window.location='./main.html'; </script>
</head>
<body >
</body>
</html>
改名法的主要原理就是通過一個過渡頁面，把載入首頁的內容最小化。
3.在Android使用簽名後的apk除錯時提示“Android packages must be signed when debugging using the Release configuration.”
簽名時需要的密碼（storePassword和password）必須是在配置檔案（build.json或ant.properties）中預填入的，不能是在對話方塊中互動輸入的。
4.在Android中部署時提示“INSTALL_PARSE_FAILED_MANIFEST_MALFORMED”
包名（Package Name）的首字母必須小寫。
5.在Android中編譯時提示“No Java files found which extend CordovaActivity”
刪除目錄“platforms”後再編譯，實際上另外兩個動態生成的目錄“bin”和“bld”也可以根據需要刪除。
6.隱藏內嵌瀏覽器（InAppBrowser）位址列和工具欄
將window.cordova.InAppBrowser.open的第三個引數設定為'location=no,toolbar=no'。
如果您是和我一樣骨灰級的IT從業者，順便提醒一下：時代真的變了，微軟現在走open路線了，Visual Studio Community版是免費的，完全支援上述開發任務。
一、使用
1.安裝Visual Studio Tools for Apache Cordova，參考“http://www.cnblogs.com/UltimateAvalon/p/5328642.html”。安裝中有兩個保持，首先是要保持網路暢通，因為很多檔案（特別是Android SDK）必須從網上下載；再就是要保持耐心，安裝耗費時間與網路狀況有很大的關係。對於Android、iOS的SDK最好是用現成的，如果現下現裝，那就只會增加挫折感。
2.練習，參考“http://www.cnblogs.com/UltimateAvalon/p/5329677.html”。中間會涉及到Android、iOS開發的常識，自己搜文章看，反覆看，反覆練，如果感覺困難重重，那就放棄吧。
3.封裝H5網站成App。
3.1.在Visual Studio 2015中使用專案模板“JavaScript->Apache Cordova Apps->Blank App（ Apache Cordova）”新建一個工程；
3.2.開啟config.xml,在“外掛(Plugins)”標籤頁安裝“InAppBrowser”；
3.3.開啟“www->scripts->index.js”，在“function onDeviceReady”的最後新增如下程式碼，注意填入你要封裝網站的URL：
if (window.cordova && window.cordova.InAppBrowser) {
window.open = window.cordova.InAppBrowser.open;
window.open('此處為你要封裝網站的URL', '_blank', 'location=no,toolbar=no');
}
4.修改配置檔案，開啟config.xml，在“通用（Common）”標籤頁設定App顯示名稱（Display Name），程式包名稱（Package Name），根據需要在“Windows、Android、iOS”標籤頁設定平臺相關引數。
5.除錯，包括Ripple模擬器、Windows、Android、iOS平臺模擬器。
6.調整美化頁面，現在流行使用Ionic框架，參見“http://www.runoob.com/ionic/ionic-tutorial.html”。
7.製作圖示、閃屏圖片替換“resources”及其子目錄下的對應檔案。
8.打包和釋出，參見“http://taco.visualstudio.com/en-us/docs/tutorial-package-publish-readme/”。
二、跳坑
1.真機除錯
Android：在手機端啟用開發者模式，然後USB線連線電腦，在Visual Studio中選擇“裝置（Device）”進行除錯；
iOS：在Mac上用Xcode生成一個繫結名(Bundle Identifier）與config.xml裡設定的程式包名稱（Package Name）完全相同的iOS工程，並用該Xcode工程完成真機除錯，然後在Visual Studio中選擇“遠端裝置（Remote Device）”或“本地裝置 （Local Device）”除錯；
Windows Phone 10：在手機端啟用開發者模式，並且把下面的裝置發現和裝置門戶開啟，然後USB線連線電腦，在Visual Studio中選擇“裝置（Device）”進行除錯。
2.在Android中除錯時提示“Application Error - The connection to the server was unsuccessful.”
這是由於模擬器響應太慢導致的，可通過改名法解決，首先把index.html更名為main.html，然後新建一個index.html頁面，內容如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script> window.location='./main.html'; </script>
</head>
<body >
</body>
</html>
改名法的主要原理就是通過一個過渡頁面，把載入首頁的內容最小化。
3.在Android使用簽名後的apk除錯時提示“Android packages must be signed when debugging using the Release configuration.”
簽名時需要的密碼（storePassword和password）必須是在配置檔案（build.json或ant.properties）中預填入的，不能是在對話方塊中互動輸入的。
4.在Android中部署時提示“INSTALL_PARSE_FAILED_MANIFEST_MALFORMED”
包名（Package Name）的首字母必須小寫。
5.在Android中編譯時提示“No Java files found which extend CordovaActivity”
刪除目錄“platforms”後再編譯，實際上另外兩個動態生成的目錄“bin”和“bld”也可以根據需要刪除。
6.隱藏內嵌瀏覽器（InAppBrowser）位址列和工具欄
將window.cordova.InAppBrowser.open的第三個引數設定為'location=no,toolbar=no'。
如果您是和我一樣骨灰級的IT從業者，順便提醒一下：時代真的變了，微軟現在走open路線了，Visual Studio Community版是免費的，完全支援上述開發任務。