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
https://www.jianshu.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
https://www.jianshu.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阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    passiontim阅读 15,380评论 2 44
  • afinalAfinal是一个android的ioc,orm框架 https://github.com/yangf...
    wgl0419阅读 6,261评论 1 9
  • 一次次努力换来的确实无尽的痛苦。 多少次想要放弃了,因为实在太痛苦了:再也没力气了。 加油!看到头了,再加把劲1孩...
    想有余找有鱼阅读 497评论 0 0
  • 线下地推主动加人 这里面有一个人员分工的问题需要注意。有一部分人可以下去扫码加人那另外一部分人呢,就负责看管我们的...
    5c42cbe7f078阅读 2,287评论 0 0
  • 2017年9月10日星期天,今天带着杨峰瑞回老家去看爷爷奶奶,在老家爷爷奶奶问他:你学习学的怎么样啊?杨峰...
    航航2阅读 161评论 0 0