cordova環境安裝和插件使用

cordova基于HTML、CSS和JavaScript的,用于創建跨平臺移動應用程序的快速開發平臺。
能夠利用iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry等智能手機的核心
功能——包括地理定位、加速器、聯系人、聲音、振動、拍照、拍攝視屏等!(手機原生功能)!

環境安裝和下載:
java工具下載 http://www.oracle.com/technetwork/java/javase/downloads/index.html
http://www.oracle.com/technetwork/java/javase/downloads/java-archive-javase8-2177648.html
node工具下載 https://nodejs.org
android studio工具下載
https://developer.android.com/sdk/index.html (需要翻墻)
http://www.android-studio.org
http://www.androiddevtools.cn
下載完后,基本上是傻瓜式安裝!
Tip: java、node 的版本不要過高 Android Studio 主題選擇深色的好看一些!

9.png

我的默認都是 安裝在C盤下的,后面有關路勁的都是以C盤的為基準
Java安裝,我選擇的是SE 8這個版本的,Java安裝就沒截圖了,下一步下一步就好了!
Node安裝,基本默認!
Android Studio 安裝:
1.png

2.png

3.png

4.png

5.png

6.png

7.png

8.png

9.png

10.png

11.png

12.png

14.png
選擇這個是因為,后面如果,測試 React-Native 官網推薦的這個版本
15.png

終端驗證:
java驗證:輸入 java -version


15.png

Node驗證:輸入 node -v
v8.11.1
Android Studio驗證:輸入adb 和 android


17.png

環境變量的配置:
1、如何打開: 我的電腦右擊 -> 選擇屬性 -> 高級系統設置 -> 環境變量


22.png

23.png

24.png

20.png

19.png

21.png

2、系統變量:

默認C盤基準:
    變量名                        變量值
JAVA_HOME            C:\Program Files\Java\jdk-10.0.1
CLASSPATH .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools (注意最前面的 . )
ANDROID_HOME     C:\Users\Administrator\AppData\Local\Android\Sdk



已安裝D盤為基準(把SDK提取放到了D盤下):

變量             變量值
ANDROID_HOME     D:\SDK
CLASSPATH        .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
JAVA_HOME        D:\Java\jdk1.8.0_91

系統變量 Path 中添加:
C:\Program Files\Java\jdk1.8.0_91\bin
D:\SDK\platform-tools
D:\SDK\tools

系統變量下的 Path 變量(win10下面分開寫):
java -            %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
android studio -  %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools

至此環境和環境變量基本搭建好了!

相關參考:

Java https://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html
https://jingyan.baidu.com/article/3c343ff70bc6ea0d377963df.html
https://www.cnblogs.com/boringwind/p/8001300.html
https://www.cnblogs.com/smyhvae/p/3788534.html
Android Studio
http://www.lxweimin.com/p/f7de559b9752
https://blog.csdn.net/siwuxie095/article/details/53431818
https://blog.csdn.net/feixiangsmile/article/details/67639664
https://jingyan.baidu.com/article/17bd8e52f514d985ab2bb800.html
http://www.lxweimin.com/p/14a67f3347ce
https://www.cnblogs.com/yanglh6-jyx/p/Android_AS_Configuration.html


使用 cordova 來創建第一個 App
項目基本操作:
1)、安裝 npm install -g cordova
2)、創建項目 cordova create MyApp
3)、進入項目 cd MyApp
3)、添加平臺 cordova platform add <platform name>
3-1、查看平臺 corodva platform
android ~7.0.0
ios ~4.5.4
osx ~4.0.1
browser ~5.0.2
windows ~5.0.0
www ^3.12.0
3-2、添加插件 cordova plugin add cordova-plugin-badge
cordova platform add android
4)、運行App cordova run <platform name>
cordova run android

目錄說明:
platforms: 平臺源碼資源
plugins: cordova插件目錄
www: 前端工程目錄
res: 桌面圖標圖片和啟動頁面
config.xml app的一些配置文件(如App的啟動頁面(Android、Ios)、App桌面圖標設置(Android、Ios)、App名稱描述等)
如我們添加一個 頂部狀態欄的插件:
cd MyApp
終端輸入:cordova plugin add cordova-plugin-statusbar
在 config.xml 文件 <widget></widget> 添加:
<preference name="StatusBarOverlaysWebView" value="true" />
<preference name="StatusBarBackgroundColor" value="#0093dd" />
<preference name="StatusBarStyle" value="lightcontent" />
注意:StatusBarBackgroundColor 不要寫 red、orange不支持的,最好使用#

插件和安裝:

cordova plugin add cordova-plugin-device //設備API

cordovaplugin add cordova-plugin-network-information //網絡(事件)

cordova plugin add cordova-plugin-battery-status //電池(事件)

cordova plugin add cordova-plugin-device-motion //加速器

cordova plugin add cordova-plugin-device-orientation //羅盤
https://github.com/apache/cordova-plugin-device-orientation
http://www.cnblogs.com/LO-ME/p/4579441.html

cordova plugin add cordova-plugin-geolocation //定位

cordova plugin add cordova-plugin-camera //攝像頭

cordova plugin add cordova-plugin-media-capture //媒體文件處理

cordova plugin add cordova-plugin-media //媒體文件處理

cordova plugin add cordova-plugin-file //文件訪問

cordova plugin add cordova-plugin-file-transfer //文件傳輸

cordova plugin add cordova-plugin-dialogs //對話框

cordova plugin add cordova-plugin-vibration //震動

cordova plugin add cordova-plugin-contacts //聯系人

cordova plugin add cordova-plugin-globalization //全球化

cordova plugin add cordova-plugin-splashscreen //Cordova快速添加Icon圖標和Splash閃屏頁
https://github.com/apache/cordova-plugin-splashscreen
https://blog.csdn.net/itCatface/article/details/51028002
https://blog.csdn.net/Ouchieve_111/article/details/51478943
https://blog.csdn.net/farmwang/article/details/78240112

cordova plugin add cordova-plugin-inappbrowser //打開新的瀏覽器窗口

cordova plugin add cordova-plugin-console //調試控制臺

cordova plugin add cordova-plugin-device-orientation // 指南針,添加compass插件

查看所有已經安裝的插件: cordova plugin ls

使用以下命令刪除插件如:cordova plugin rm cordova-plugin-camera

注意:
所有的插件的使用都是在 onDeviceReady 這個事件后去使用!
以 cordova-plugin-dialogs 為列:
1、cordova plugin add cordova-plugin-dialogs
2、打開 www/index.js

                            var app = {
                                  // App
                                          init: function(){
                                             document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
                                          },
                                          // 把使用插件的地方,放到該方法里面執行
                                         onDeviceReady: function(){
                                              // cordova-plugin-dialogs 的 4個方法
                                              window.alert = navigator.notification.alert;
                                              window.confirm = navigator.notification.confirm;
                                              window.prompt = navigator.notification.prompt;
                                              window.beep = navigator.notification.beep;
                                              this.bindEvent();
                                         },
                                         bindEvent: function(){
                                              // 手機系統的 彈出框!
                                              alert('Hello Cordova!');
                                         }
                                   }
                                   app.init(); 

常用命令:
npm update -g cordova
npm install -g cordova@3.1.0-0.2.0
npm info cordova version
cordova create myApp cordova-plugin-myApp myApp // 生成基于web的應用程序的骨骼,項目的主頁是 www/index.html 文件
cordova plugin add cordova-plugin-camera
cordova platform add android
cordova plugin add cordova-plugin-camera --nosave
cordova platform add android --nosave
cordova requirements android // 檢測你是否滿足構建平臺的要求:
cordova build android --verbose
cordova run android
cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --alias=mykey
cordova config ls
cordova platform ls 檢查你當前平臺設置狀況
cordova plugin search 插件名 會打開cordova插件頁面,搜索需要搜索的插件
cordova platform update android --save 更新目標項目的平臺
cordova platform update ios --save
cordova prepare andorid 配合 Android Studio 來打包
cordova requirements andorid 檢查平臺需要的東西


25.png

26.png

通過Android Studio 來運行項目:
1、Android Studio 打開 platform/android
2、下載 Gradle 的一些包


27.png

3、點擊 綠色播放按鈕 可以進行安裝(需要你有一臺連接電腦的android手機)


29.png

每次你修改 www 目錄下的文件后,執行 cordova prepare andorid,然后在 Android Studio 中 重新打包到手機就好了!
這樣就不需要每次都去 打包一個 Apk 文件!

如何來調試打包到 Android 手機上的 app:
1、手機USB 調到 傳輸文件 模式
2、打開打包的 App
3、在 chrome 瀏覽器中輸入:
chrome://inspect

30.png

然后你就可以審查元素、打斷點等操作了!

好了,愉快的玩去!

關于Android Virsual Device 后面再補上!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 230,321評論 6 543
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,559評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 178,442評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,835評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,581評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,922評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,931評論 3 447
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 43,096評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,639評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,374評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,591評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,104評論 5 364
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,789評論 3 349
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,196評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,524評論 1 295
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,322評論 3 400
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,554評論 2 379

推薦閱讀更多精彩內容

  • afinalAfinal是一個android的ioc,orm框架 https://github.com/yangf...
    passiontim閱讀 15,485評論 2 45
  • afinalAfinal是一個android的ioc,orm框架 https://github.com/yangf...
    wgl0419閱讀 6,312評論 1 9
  • 一次次努力換來的確實無盡的痛苦。 多少次想要放棄了,因為實在太痛苦了:再也沒力氣了。 加油!看到頭了,再加把勁1孩...
    想有余找有魚閱讀 520評論 0 0
  • 線下地推主動加人 這里面有一個人員分工的問題需要注意。有一部分人可以下去掃碼加人那另外一部分人呢,就負責看管我們的...
    5c42cbe7f078閱讀 2,313評論 0 0
  • 2017年9月10日星期天,今天帶著楊峰瑞回老家去看爺爺奶奶,在老家爺爺奶奶問他:你學習學的怎么樣啊?楊峰...
    航航2閱讀 175評論 0 0