開篇簡言
我是一名前端工程師，剛剛完成了一個基于cordova的webapp，并且安卓和蘋果雙端都已上線，趁熱寫個總結分享給大家。（也是剛開始成長的小白，可能寫的不好，大家多多包涵O(∩_∩)O ~）
大致過程
我是先在windows上完成的項目代碼，然后打包安卓端的apk包并且上傳到各大應用市場（360、應用寶等），然后把項目代碼移植到mac本上，來打包ios端的ipa包并且上傳到app store的。
背景介紹
Cordova是什么？百度詞條中的定義：Cordova提供了一組設備相關的API，通過這組API，移動應用能夠以JavaScript訪問原生的設備功能，如攝像頭、麥克風等。Cordova還提供了一組統一的JavaScript類庫，以及為這些類庫所用的設備相關的原生后臺代碼。Cordova支持如下移動操作系統：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。
簡單點理解，Cordova是一個工具，通過它可以將你做的html網頁顯示在WebView里面，而你網頁中用到的JS可以通過他的API去調用原生的東西，比如照相機等。但它做出來的app比原生做出來的app好在哪里呢？直白點說，簡便，省錢。因為cordova app顯示的頁面全是你做的html頁面，所以說你寫一套code，就可以用在Android上，IOS上，以及Web上。不用去分別找Android工程師，IOS工程師。
環境搭建
1. 安裝node.js （Node.js是一個Javascript運行環境……）
下載安裝node.js,下載地址：https://nodejs.org/en/，安裝完成之后打開終端執行node -v，如果看到版本號表示安裝成功。
2. 安裝ant （Ant是一種基于Java的build工具……）
下載地址：http://ant.apache.org/bindownload.cgi，下載完成之后解壓到你想安裝的目錄，比如D:\ant。然后將目錄添加到系統變量里（添加環境變量的步驟：右鍵我的電腦?屬性?高級系統設置?環境變量?系統變量中添加ANT_HOME,值為D:\ant，在系統環境變量中的變量path中添加D:\ant\bin）。配置好之后在終端輸入ant -v，看到版本號則表示成功。
Ps：如果是windows7系統，在添加path的值時，多個值之間要用分號隔開。
3. 安裝cordova
命令行輸入??npm install –g cordova
npm（node package manager）是nodejs的包管理器，用于node插件管理（包括安裝、卸載、管理依賴等），但是因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，解決：用淘寶團隊提供的國內的cnpm，執行命令npm install cnpm -g --registry=https://registry.npm.taobao.org，安裝完后查看其版本號執行命令cnpm –v ，如果出現版本號則安裝成功，我們就可以用cnpm安裝我們所需要的東西了，比如 我們上面執行的 cnpm install –g cordova 。關于npm 和cnpm的詳細講解，可以參考這篇博客。
測試安裝是否成功，終端輸入cordova -v，如果出現版本號表示安裝成功。
4. 安裝jdk
下載地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html ，選擇自己的版本點擊下載。下載下來后，按照提示安裝，安裝位置比如D:\java\jdk1.8.0_131，然后進行環境變量的配置即可。（添加環境變量的步驟：右鍵我的電腦?屬性?高級系統設置?環境變量?系統變量中添加JAVA_HOME,值為D:\java\jdk1.8.0_131，在系統環境變量中的變量path中添加%JAVA_HOME%\ bin）。
5. 安裝sdk
下載地址：http://tools.android-studio.org/index.php/sdk/ ，建議大家下載.zip文件不要下載.exe文件。反正我下載.exe文件就裝不上。下載下來.zip文件后解壓縮，按照提示安裝，然后根據安裝的位置進行環境變量的配置。（添加環境變量的步驟：右鍵我的電腦?屬性?高級系統設置?環境變量?系統變量中添加ANDROID_SDK_HOME,值為D:\android\android-sdk-windows，在系統環境變量中的變量path中添加%ANDROID_SDK_HOME%\platform-tools和%ANDROID_SDK_HOME%\ tools）。
走到現在，開發所需的環境配置過程已經基本完成了！！
創建第一個應用
創建基于cordova平臺的hybrid app，有下面幾種情況：
1. 原生cordova app（可以配合自己公司開發的框架）
2. 采用ionic框架（個人理解ionic=angular+cordova）
3. 采用vue、react等其他框架，我還沒有研究過。下面只介紹前兩種。
===1 . 原生cordova app===
? a）?在某個目錄下創建cordova項目（cordova create <文件夾名> <包名> < app 名>）。
命令行輸入?cordova create test com.cordova.test test
創建成功后，打開文件目錄如下：
hooks：存放自定義cordova命令的腳本文件。
platforms：平臺目錄，各自的平臺代碼就放在這里，可以放一下平臺專屬的代碼，現在這個目錄應該是空的，后面會介紹如何創建平臺。
plugins：插件目錄，安裝的插件會放在這里。后面會介紹如何安裝插件。
www：最重要的目錄，存放項目的HTML5和JS代碼的目錄。app一開始打開的就是這個目錄中index.html文件，也就是項目的入口文件。
config.xml：主要是cordova的一些配置，比如：項目使用了哪些插件、應用圖標icon和啟動頁面SplashScreen，修改app的版本，名字等信息，還有平臺的配置。
package.json：一個JSON對象，該對象的每一個成員就是當前項目的一項設置。比如name就是項目名稱，version是版本（遵守“大版本.次要版本.小版本”的格式）。
? b） 添加平臺
進入到剛剛創建的項目文件目錄下，命令行輸入：
cd test （退出當前目錄輸入: cd .. ）
cordova platform add android（添加安卓平臺）
cordova platform add ios（這句添加蘋果平臺需要在mac上執行。如果該項目需要在蘋果端上線，后面會講到代碼移植到mac本上打包ios包的步驟。再次先忽略）
沒有報錯的話就是添加成功了，此時打開項目文件夾里的platforms文件里面有android文件夾了。
如果要移除該平臺，命令是：cordova platform rm android
到這里我們就把準備工作都做好了，現在可以開始寫js 和html代碼了。
? c）添加和刪除項目需要的codova插件
# 添加插件 #
命令行輸入：cordova plugin add cordova-plugin-camera?(cordova plugin add <插件官方名稱>)，如下則證明添加成功。
如果報錯則可以嘗試：移除android平臺，再重新添加低版本的android平臺（命令行輸入cordova platform add android@6 安裝6.多版本的android，因為現在添加android平臺系統默認添加最新的 7.多版本的，但是有些cordova插件可能還不能兼容。）
去cordova官網找插件：http://cordova.apache.org/
也可以去github上找插件：https://github.com/
# 刪除插件 #
命令行輸入：cordova plugin rm cordova-plugin-camera?（使用rm和remove都可以）
?# 查看已經添加了的插件列表 #
命令行輸入：cordova plugin list（查看當前安裝了那些插件）
也可以直接打開項目文件夾下的plugins文件夾查看（android.json和fetch.json都應該存在）
? d）編譯調試程序
下面的不是每一句代碼都需要運行，根據自己的需求進行選擇。
cordova install android //將編譯好的應用程序安裝到模擬器上。
cordova emulate android //在模擬器上運行（前提是創建好AVD）
cordova serve //在瀏覽器運行
cordova build android //打包cordova項目到android平臺。
cordova run android //通過USB直接安裝到真機（該語句已經包括了build命令，如果你手機電腦連接好，并且打開了手機里的usb調試模式，就可以這樣直接run）
最后出現BUILD SUCCESSFUL 則成功。
執行完后到上圖中最后一行那個路徑中去找我們的apk包，這個apk包就是我們打出來的app的debug模式也就是開發環境下的包，放到手機上就能運行了。但是正式上線到應用市場的包不能這樣打，后面講。第一次run/build時間會比較長。最后出現BUILD?SUCCESSFUL 則說明成功。
到這里我們大致完成了android端的開發。
Ps：我們現在打開項目文件發現目錄中多了個node_modules文件夾，這里面是我們項目所用到的依賴包，是系統根據package.json中的配置對應生成的。如果我們去下載別人的開發好的項目代碼時，下載下來后第一件事就是執行npm install 來安裝package.json中的配置和依賴，生成node_modules文件。然后再cordova platform? add android添加平臺。
下面說一下我們在www文件里寫代碼時可能需要用到的一些知識：
1. 使用less 寫樣式文件：（我用的編輯器是webstorm）
????1. 命令行輸入：npm install –g less
????2. 找到C:\Users\用戶名\AppData\Roaming\npm\lessc.cmd，打開webstorm > file > settings
? ? 3.點擊 “+”，在下拉菜單中選擇less，然后把剛剛的那個路徑填到下圖中的紅框中。ok完成。接下來我們在創建less文件時，就會自動生成一個css文件跟隨。
2. 移動端設備大小適配問題rem轉px
在www/js中引入rem.js 或者flexible.js （網上有），但我用的自己寫的一段代碼，效果一樣的，只是邏輯上不太一致。我的方法如下：
新建rem.js,引入到www下的index.html這個入口文件中，然后寫入以下代碼：
!function(n){
??? var?e=n.document,t=e.documentElement,i=720,d=i/100,
???????? o="orientationchange"inn?"orientationchange":"resize",
???????? a=function(){
???????????? varn=t.clientWidth||320;n>720&&(n=720);
???????????? t.style.fontSize=n/d+"px"
???????? };
????????e.addEventListener&&? ? ? ?(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);
這段代碼的邏輯是：美工給的圖一般是720px寬的，（如果你的美工給的不是720可以修改上面的代碼中的720改成你的），在開發的過程中，執行cordova serve運行在chrome瀏覽器后，F12 > 手機模式 > 設備寬度設置成responsive 720寬，在此界面下進行開發調試，如果美工圖上100px的元素，我們在寫less/css時，該元素div的寬就寫1rem，即1rem=100px。
===2 . 選用ionic框架做hybrid app===
剛剛講了cordova 原生app的步驟，下面簡單講一下選用ionic框架的做法。命令行基本一致。
Ionic的一系列命令：（類似corodva原生app）
1.npm安裝ionic：npm install –g cordova ionic
2.創建項目：ionic start myproject –type=ionic1（myproject是項目名，后面—type=ionic1是明確創建哪個版本用的的，不寫的話默認是目前最新的3版本）
創建成功，項目文件目錄如圖：
3. 類似上面講到的一系列命令
cd myproject
ionic cordova platform add android
ionic serve?// 瀏覽器調試
ionic cordova build android????????????
?ionic cordova emulate android?// 模擬器運行ionic cordova run android??// 連接上手機運行，等同于build+emulate
4.安裝插件 命令行輸入：ionic plugin add cordova-plugin-shake（插件名）
ionic結合cordova 調用一些原生的api 如攝像頭等，需要引入ng-cordova，具體參考：這篇文章
項目上線
項目源代碼寫完后，那么該上線了。下面分別講一下 上線到安卓各大應用市場。（360手機助手、應用寶等等） 和上線到蘋果的app store的步驟！
android 端上線 ==> 以360手機助手為例。
1. 將應用打包?命令行輸入：cordova build –release android
這次的打包不同于用上面講到的用cordova build android 打出來的包，那個是debug的包，是調試版，是自動簽名的。（這里解釋一下“簽名”：能在手機上運行的apk都是經過簽名的，沒有簽名的apk是跑不起來的，debug包也是系統自動簽的名，是用debugkeystore簽過名的，但它不是正式的我們應用唯一的簽名，所以我們需要給我們應用唯一的簽名，所以我們在這步打包時打不簽名的包，如上命令 加 –release，方便下一步簽app專屬的名）。
2. 生成簽名文件 （首先找到jdk安裝的位置（如我的D:\java\jdk1.8.0_131），命令行進入到jdk文件下的bin目錄下，在命令行順序輸入如下幾條命令，創建test.keystore）
（1）命令行輸入：cd D:\java\jdk1.8.0_131\bin
（2）命令行輸入：keytool -genkey -alias test.keystore -keyalg RSA -validity 40000 -keystore test.keystore （參數說明：-genkey 生成文件? -alias 別名? -keyalg 加密算法? -validity 有效期? -keystore 文件名 ）
（3）然后按照提示設置keystore密碼以及你的信息，接下來不報錯的話就代表已經生成了test.keystore文件，在jdk的bin目錄下。
3. 到360移動開放平臺http://dev.360.cn/ 上注冊賬號。
4. 簽名，加固。
下載360加固助手，下載地址，里面有使用手冊，按照提示操作，完成里面信息的填寫。重要的：里面需要填寫簽名文件路徑，那么就填寫上面步驟2中最后生成的簽名文件路徑，這樣我們就配置好了。接下來就是把步驟1生成的未被自動簽名的release包放進來，上傳、簽名、加固。然后最后生成的apk包就是我們可以上傳到360應用市場的包了。
5. 進入360開發平臺?。
登錄 > 管理中心 > 填寫一系列的app信息和公司信息，填寫完整點擊提交審核，一個工作日內就得到結果了。一般審核都能通過，如果沒通過會提示給你原因，按照他說的修改在提交就行，或者直接給他們的客服郵箱發郵件溝通即可。總之android應用市場很好通過，不像蘋果app store那么嚴(shi)謹(er)。哈哈哈~
ios上線 。。
---------------------文章太長了，請看 （下）篇。--------------------
