開篇簡言
我是一名前端工程師蛾默，剛剛完成了一個基于cordova的webapp懦铺，并且安卓和蘋果雙端都已上線，趁熱寫個總結(jié)分享給大家支鸡。（也是剛開始成長的小白冬念，可能寫的不好，大家多多包涵O(∩_∩)O ~）
大致過程
我是先在windows上完成的項目代碼牧挣，然后打包安卓端的apk包并且上傳到各大應用市場（360急前、應用寶等），然后把項目代碼移植到mac本上瀑构，來打包ios端的ipa包并且上傳到app store的裆针。
背景介紹
Cordova是什么？百度詞條中的定義：Cordova提供了一組設備相關(guān)的API寺晌，通過這組API世吨，移動應用能夠以JavaScript訪問原生的設備功能，如攝像頭呻征、麥克風等耘婚。Cordova還提供了一組統(tǒng)一的JavaScript類庫，以及為這些類庫所用的設備相關(guān)的原生后臺代碼陆赋。Cordova支持如下移動操作系統(tǒng)：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian沐祷。
簡單點理解，Cordova是一個工具攒岛，通過它可以將你做的html網(wǎng)頁顯示在WebView里面赖临，而你網(wǎng)頁中用到的JS可以通過他的API去調(diào)用原生的東西，比如照相機等阵子。但它做出來的app比原生做出來的app好在哪里呢思杯？直白點說，簡便挠进，省錢色乾。因為cordova app顯示的頁面全是你做的html頁面，所以說你寫一套code领突，就可以用在Android上暖璧，IOS上，以及Web上君旦。不用去分別找Android工程師澎办，IOS工程師嘲碱。
環(huán)境搭建
1. 安裝node.js （Node.js是一個Javascript運行環(huán)境……）
下載安裝node.js,下載地址：https://nodejs.org/en/，安裝完成之后打開終端執(zhí)行node -v局蚀，如果看到版本號表示安裝成功麦锯。
2. 安裝ant （Ant是一種基于Java的build工具……）
下載地址：http://ant.apache.org/bindownload.cgi，下載完成之后解壓到你想安裝的目錄琅绅，比如D:\ant扶欣。然后將目錄添加到系統(tǒng)變量里（添加環(huán)境變量的步驟：右鍵我的電腦?屬性?高級系統(tǒng)設置?環(huán)境變量?系統(tǒng)變量中添加ANT_HOME,值為D:\ant，在系統(tǒng)環(huán)境變量中的變量path中添加D:\ant\bin）千扶。配置好之后在終端輸入ant -v料祠，看到版本號則表示成功。
Ps：如果是windows7系統(tǒng)澎羞，在添加path的值時髓绽，多個值之間要用分號隔開。
3. 安裝cordova
命令行輸入??npm install –g cordova
npm（node package manager）是nodejs的包管理器妆绞，用于node插件管理（包括安裝顺呕、卸載、管理依賴等）摆碉，但是因為npm安裝插件是從國外服務器下載塘匣，受網(wǎng)絡影響大，可能出現(xiàn)異常巷帝，解決：用淘寶團隊提供的國內(nèi)的cnpm，執(zhí)行命令npm install cnpm -g --registry=https://registry.npm.taobao.org扫夜，安裝完后查看其版本號執(zhí)行命令cnpm –v 楞泼，如果出現(xiàn)版本號則安裝成功，我們就可以用cnpm安裝我們所需要的東西了笤闯，比如 我們上面執(zhí)行的 cnpm install –g cordova 堕阔。關(guān)于npm 和cnpm的詳細講解，可以參考這篇博客颗味。
測試安裝是否成功超陆，終端輸入cordova -v，如果出現(xiàn)版本號表示安裝成功浦马。
4. 安裝jdk
下載地址：http://www.oracle.com/technetwork/java/javase/downloads/index.html 时呀，選擇自己的版本點擊下載。下載下來后晶默，按照提示安裝谨娜，安裝位置比如D:\java\jdk1.8.0_131，然后進行環(huán)境變量的配置即可磺陡。（添加環(huán)境變量的步驟：右鍵我的電腦?屬性?高級系統(tǒng)設置?環(huán)境變量?系統(tǒng)變量中添加JAVA_HOME,值為D:\java\jdk1.8.0_131趴梢，在系統(tǒng)環(huán)境變量中的變量path中添加%JAVA_HOME%\ bin）漠畜。
5. 安裝sdk
下載地址：http://tools.android-studio.org/index.php/sdk/ ，建議大家下載.zip文件不要下載.exe文件坞靶。反正我下載.exe文件就裝不上憔狞。下載下來.zip文件后解壓縮，按照提示安裝彰阴，然后根據(jù)安裝的位置進行環(huán)境變量的配置躯喇。（添加環(huán)境變量的步驟：右鍵我的電腦?屬性?高級系統(tǒng)設置?環(huán)境變量?系統(tǒng)變量中添加ANDROID_SDK_HOME,值為D:\android\android-sdk-windows，在系統(tǒng)環(huán)境變量中的變量path中添加%ANDROID_SDK_HOME%\platform-tools和%ANDROID_SDK_HOME%\ tools）硝枉。
走到現(xiàn)在廉丽，開發(fā)所需的環(huán)境配置過程已經(jīng)基本完成了！妻味！
創(chuàng)建第一個應用
創(chuàng)建基于cordova平臺的hybrid app正压，有下面幾種情況：
1. 原生cordova app（可以配合自己公司開發(fā)的框架）
2. 采用ionic框架（個人理解ionic=angular+cordova）
3. 采用vue、react等其他框架责球，我還沒有研究過焦履。下面只介紹前兩種。
===1 . 原生cordova app===
? a）?在某個目錄下創(chuàng)建cordova項目（cordova create <文件夾名> <包名> < app 名>）雏逾。
命令行輸入?cordova create test com.cordova.test test
創(chuàng)建成功后嘉裤，打開文件目錄如下：
hooks：存放自定義cordova命令的腳本文件。
platforms：平臺目錄栖博，各自的平臺代碼就放在這里屑宠，可以放一下平臺專屬的代碼，現(xiàn)在這個目錄應該是空的仇让，后面會介紹如何創(chuàng)建平臺典奉。
plugins：插件目錄，安裝的插件會放在這里丧叽。后面會介紹如何安裝插件卫玖。
www：最重要的目錄，存放項目的HTML5和JS代碼的目錄踊淳。app一開始打開的就是這個目錄中index.html文件假瞬，也就是項目的入口文件。
config.xml：主要是cordova的一些配置迂尝，比如：項目使用了哪些插件脱茉、應用圖標icon和啟動頁面SplashScreen，修改app的版本雹舀，名字等信息芦劣，還有平臺的配置。
package.json：一個JSON對象说榆，該對象的每一個成員就是當前項目的一項設置虚吟。比如name就是項目名稱寸认，version是版本（遵守“大版本.次要版本.小版本”的格式）。
? b） 添加平臺
進入到剛剛創(chuàng)建的項目文件目錄下串慰，命令行輸入：
cd test （退出當前目錄輸入: cd .. ）
cordova platform add android（添加安卓平臺）
cordova platform add ios（這句添加蘋果平臺需要在mac上執(zhí)行偏塞。如果該項目需要在蘋果端上線，后面會講到代碼移植到mac本上打包ios包的步驟邦鲫。再次先忽略）
沒有報錯的話就是添加成功了灸叼，此時打開項目文件夾里的platforms文件里面有android文件夾了。
如果要移除該平臺庆捺，命令是：cordova platform rm android
到這里我們就把準備工作都做好了古今，現(xiàn)在可以開始寫js 和html代碼了。
? c）添加和刪除項目需要的codova插件
# 添加插件 #
命令行輸入：cordova plugin add cordova-plugin-camera?(cordova plugin add <插件官方名稱>)滔以，如下則證明添加成功捉腥。
如果報錯則可以嘗試：移除android平臺，再重新添加低版本的android平臺（命令行輸入cordova platform add android@6 安裝6.多版本的android你画，因為現(xiàn)在添加android平臺系統(tǒng)默認添加最新的 7.多版本的抵碟，但是有些cordova插件可能還不能兼容。）
去cordova官網(wǎng)找插件：http://cordova.apache.org/
也可以去github上找插件：https://github.com/
# 刪除插件 #
命令行輸入：cordova plugin rm cordova-plugin-camera?（使用rm和remove都可以）
?# 查看已經(jīng)添加了的插件列表 #
命令行輸入：cordova plugin list（查看當前安裝了那些插件）
也可以直接打開項目文件夾下的plugins文件夾查看（android.json和fetch.json都應該存在）
? d）編譯調(diào)試程序
下面的不是每一句代碼都需要運行坏匪，根據(jù)自己的需求進行選擇拟逮。
cordova install android //將編譯好的應用程序安裝到模擬器上。
cordova emulate android //在模擬器上運行（前提是創(chuàng)建好AVD）
cordova serve //在瀏覽器運行
cordova build android //打包cordova項目到android平臺适滓。
cordova run android //通過USB直接安裝到真機（該語句已經(jīng)包括了build命令敦迄，如果你手機電腦連接好，并且打開了手機里的usb調(diào)試模式粒竖，就可以這樣直接run）
最后出現(xiàn)BUILD SUCCESSFUL 則成功颅崩。
執(zhí)行完后到上圖中最后一行那個路徑中去找我們的apk包，這個apk包就是我們打出來的app的debug模式也就是開發(fā)環(huán)境下的包蕊苗，放到手機上就能運行了。但是正式上線到應用市場的包不能這樣打沿彭，后面講朽砰。第一次run/build時間會比較長。最后出現(xiàn)BUILD?SUCCESSFUL 則說明成功喉刘。
到這里我們大致完成了android端的開發(fā)瞧柔。
Ps：我們現(xiàn)在打開項目文件發(fā)現(xiàn)目錄中多了個node_modules文件夾，這里面是我們項目所用到的依賴包睦裳，是系統(tǒng)根據(jù)package.json中的配置對應生成的造锅。如果我們?nèi)ハ螺d別人的開發(fā)好的項目代碼時，下載下來后第一件事就是執(zhí)行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完成深夯。接下來我們在創(chuàng)建less文件時抖格，就會自動生成一個css文件跟隨。
2. 移動端設備大小適配問題rem轉(zhuǎn)px
在www/js中引入rem.js 或者flexible.js （網(wǎng)上有）咕晋，但我用的自己寫的一段代碼雹拄，效果一樣的，只是邏輯上不太一致掌呜。我的方法如下：
新建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改成你的）站辉，在開發(fā)的過程中呢撞，執(zhí)行cordova serve運行在chrome瀏覽器后，F(xiàn)12 > 手機模式 > 設備寬度設置成responsive 720寬饰剥，在此界面下進行開發(fā)調(diào)試殊霞，如果美工圖上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.創(chuàng)建項目：ionic start myproject –type=ionic1（myproject是項目名若厚，后面—type=ionic1是明確創(chuàng)建哪個版本用的的拦英，不寫的話默認是目前最新的3版本）
創(chuàng)建成功，項目文件目錄如圖：
3. 類似上面講到的一系列命令
cd myproject
ionic cordova platform add android
ionic serve?// 瀏覽器調(diào)試
ionic cordova build android????????????
?ionic cordova emulate android?// 模擬器運行ionic cordova run android??// 連接上手機運行测秸，等同于build+emulate
4.安裝插件 命令行輸入：ionic plugin add cordova-plugin-shake（插件名）
ionic結(jié)合cordova 調(diào)用一些原生的api 如攝像頭等疤估，需要引入ng-cordova，具體參考：這篇文章
項目上線
項目源代碼寫完后霎冯，那么該上線了铃拇。下面分別講一下 上線到安卓各大應用市場。（360手機助手沈撞、應用寶等等） 和上線到蘋果的app store的步驟慷荔！
android 端上線 ==> 以360手機助手為例。
1. 將應用打包?命令行輸入：cordova build –release android
這次的打包不同于用上面講到的用cordova build android 打出來的包缠俺，那個是debug的包显晶，是調(diào)試版贷岸，是自動簽名的。（這里解釋一下“簽名”：能在手機上運行的apk都是經(jīng)過簽名的吧碾，沒有簽名的apk是跑不起來的凰盔，debug包也是系統(tǒng)自動簽的名，是用debugkeystore簽過名的倦春，但它不是正式的我們應用唯一的簽名户敬，所以我們需要給我們應用唯一的簽名，所以我們在這步打包時打不簽名的包睁本，如上命令 加 –release尿庐，方便下一步簽app專屬的名）。
2. 生成簽名文件 （首先找到jdk安裝的位置（如我的D:\java\jdk1.8.0_131）呢堰，命令行進入到jdk文件下的bin目錄下抄瑟，在命令行順序輸入如下幾條命令，創(chuàng)建test.keystore）
（1）命令行輸入：cd D:\java\jdk1.8.0_131\bin
（2）命令行輸入：keytool -genkey -alias test.keystore -keyalg RSA -validity 40000 -keystore test.keystore （參數(shù)說明：-genkey 生成文件? -alias 別名? -keyalg 加密算法? -validity 有效期? -keystore 文件名 ）
（3）然后按照提示設置keystore密碼以及你的信息枉疼，接下來不報錯的話就代表已經(jīng)生成了test.keystore文件皮假，在jdk的bin目錄下。
3. 到360移動開放平臺http://dev.#/ 上注冊賬號骂维。
4. 簽名惹资，加固。
下載360加固助手航闺，下載地址褪测，里面有使用手冊，按照提示操作潦刃，完成里面信息的填寫侮措。重要的：里面需要填寫簽名文件路徑，那么就填寫上面步驟2中最后生成的簽名文件路徑乖杠，這樣我們就配置好了分扎。接下來就是把步驟1生成的未被自動簽名的release包放進來，上傳胧洒、簽名笆包、加固。然后最后生成的apk包就是我們可以上傳到360應用市場的包了略荡。
5. 進入360開發(fā)平臺?。
登錄 > 管理中心 > 填寫一系列的app信息和公司信息歉胶，填寫完整點擊提交審核汛兜，一個工作日內(nèi)就得到結(jié)果了。一般審核都能通過通今，如果沒通過會提示給你原因粥谬，按照他說的修改在提交就行肛根，或者直接給他們的客服郵箱發(fā)郵件溝通即可÷┎撸總之a(chǎn)ndroid應用市場很好通過派哲，不像蘋果app store那么嚴(shi)謹(er)。哈哈哈~
ios上線 掺喻。芭届。
---------------------文章太長了，請看 （下）篇感耙。--------------------
