cordova学习

1.两个系统的安装方式

Installation

In your command-line on Windows:


    c:\> npm install -g cordova

In your terminal on Mac OS X/Linux:


    $sudo npm install -g cordova
2.cordova -v 查看版本
D:\phpStudy\WWW\cordova\myapp>cordova -v

8.0.0

3.创建第一个项目
cordova create myapp
4.进入项目
D:\phpStudy\WWW\cordova>cd myapp
5.

输入:cordova  create  test  com.cordova.test   test  (创建cordova工程  <文件夹名> <包名> <app名>)

cordova学习

文件夹目录:

cordova学习

hooks:存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如:before_build、after_build。没用过,不展开了。

platforms:平台目录,各自的平台代码就放在这里,可以放一下平台专属的代码,现在这个目录应该是空的,后面会介绍如何创建平台。

plugins:插件目录,安装的插件会放在这里。后面会有专门的文章介绍开发插件。

www:最重要的目录,存放项目主题的HTML5和JS代码的目录。app一开始打开的就是这个目录中index.html文件。

config.xml:主要是cordova的一些配置,比如:项目使用了哪些插件、应用图标icon和启动页面SplashScreen,修改app的版本,名字等信息,还有平台的配置。


cordova platforms add browser   添加浏览器支持

cordova platforms add andorid  添加安卓  (苹果必须再mac下才能进行添加)

6.执行打开浏览器  备注(cordova platforms rm browser   移除平台)
cordova run browser

7.cordova requirements 查看依赖
报错依赖如下:
D:\phpStudy\WWW\cordova\myapp>cordova requirements
Android Studio project detected

Requirements check results for android:
Java JDK: not installed
Failed to run "javac -version", make sure that you have a JDK installed.
You can get it from: http://www.oracle.com/technetwork/java/javase/downloads.

Android SDK: not installed
Failed to find 'ANDROID_HOME' environment variable. Try setting it manually.
Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.
Android target: not installed
cmd: Command failed with exit code 1 Error output:
'avdmanager' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
Gradle: not installed
Could not find gradle wrapper within Android SDK. Could not find Android SDK directory.
Might need to install Android SDK or set up 'ANDROID_HOME' env variable.
(node:14288) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): CordovaError: Some of requirements check failed
(node:14288) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit
 code.

8.开始下载,准备解决

安装java JDK 地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
点击接受,选择相应的版本!

因为我是x64 windows下本地测试   所以下载

Windows x64 205.95 MB   jdk-8u151-windows-x64.exe

下载好后,双击安装:

cordova学习

然后选择好自己要安装的路径:

cordova学习

安装JDK的时候,会自动给你安装JRE,选择好自己要安装的路径就行了:

cordova学习

然后就不断下一步,到最后安装完成:

cordova学习

安装好后,要配置环境变量。新建一个系统环境变量,变量名为JAVA_HOME,变量值为JDK的安装路径,如下图所示:

cordova学习

然后在系统变量列表中,双击Path变量,并将;%JAVA_HOME%\bin; %JAVA_HOME%\jre\bin追加到变量值后面(注意,在变量的最末尾添加时,要记得加上分号):

cordova学习

现在Oracle JDK成为系统可执行文件搜索路径的一部分了,且该地址很容易找到。为了验证安装是否成功,打开命令行窗口,在命令提示符下执行javac -version。如果安装成功,就会看到Oracle JDK版本号,如下图所示:

cordova学习cordova学习


安装Android SDK

安装Android SDK下载地址:http://www.androiddevtools.cn/
我们可以看到这里面有Android开发所需的各种工具,首先找到SDK Tools:

cordova学习

选择一个最新的版本就行了。注意,这里有exe和zip两种文件可供下载,exe的就是个安装程序,下载下来需要自己双击安装。这里建议下载zip压缩包,下载后,直接解压缩到你想要安装Android的路径就行了。解压后的文件目录如下:

cordova学习

然后就双击“SDK Manager.exe”,启动SDK Manager,如图所示:

cordova学习

增加环境变量   名ANDROID_HOME 值SDK路径  D:\android-sdk-windows
清除缓存  接续执行  cordova requirements 查看 报错

D:\phpStudy\WWW\cordova\myapp>cordova requirements
Android Studio project detected

Requirements check results for android:
Java JDK: installed 1.8.0
Android SDK: installed true
Android target: not installed
cmd: Command failed with exit code 1 Error output:
'avdmanager' �����ڲ����ⲿ���Ҳ���ǿ����еij���
���������ļ���
Gradle: not installed
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
(node:13272) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): CordovaError: Some of requirements check failed
(node:13272) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit
 code.


打开android SDK Manager.exe 点击install 接受安装

  • 移除平台

输入:cordova platforms rm android  (移除android平台支持)

也可以通过@版本号,来添加不同版本的android平台,如:

cordova学习

 

现在就可以在www文件夹内写自己的js和html代码了。

 

3.添加和删除项目插件

  • 添加插件

输入:cordova plugin add cordova-plugin-file (cordova plugin add <插件官方名称>)

插件搜索地址:http://cordova.apache.org/plugins/

cordova学习

也可以通过github查找一些第三方插件,

输入:cordova plugin add https://github.com/phonegap/phonegap-plugin-barcodescanner.git//这个是扫描二维码插件  (github项目地址)

github地址:https://github.com/

cordova学习

  • 删除插件

输入:cordova plugin rm cordova-plugin-file(使用rm和remove都可以)

cordova学习

  • 插件列表

输入:cordova plugin list(查看当前安装了哪些插件)

以下是我之前添加的插件

cordova学习

这里的列表应该与文件目录的列表相同

cordova学习

 

4.编译调试程序

不是每一句代码都需要运行,根据自己的需求进行选择。

  • cordova install android //将编译好的应用程序安装到模拟器上。
  • cordova emulate android //在模拟器上运行(前提是创建好AVD)
  • cordova serve android //在浏览器运行
  • cordova build android //打包cordova项目到android平台。
  • cordova run android //通过USB直接安装到真机(该语句已经包括了build命令)

例如:我现在是手边直接连着测试手机,所以我就会直接用cordova run android

cordova学习

中间省略...

cordova学习

出现LAUNCH SUCCESS则编译成功,已经安装到手机上了。