步骤一.安装cordova开发环境以及相关软件平台开发环境(Android,IOS等)
该步骤进行的第一步,就是先安装android或者IOS的开发环境,比如android,需要安装相应的jre和sdk.IOS没开发过,还不太清楚。第二步就是安装nodejs,可以参考我的另一篇博客,在这里就不展开叙述啦~
步骤二.本地生成Cordova项目
以命令行生成来演示,过程如下:
- 打开命令行,切换到cordova项目生成的目录下(如下图)
2.在命令行中输入以下命令
codova create 工程名 文件夹名 APP名
3.我们可以看到我们上面的目录下已经生成了一个目录
点击进入platforms文件夹,你会发现里面内容是空的,所以我们还需要为工程指定运行平台
各文件夹的含义:
hooks:存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如:before_build、after_build。没用过,不展开了。
platforms:平台目录,各自的平台代码就放在这里,可以放一下平台专属的代码,现在这个目录应该是空的,后面会介绍如何创建平台。
plugins:插件目录,安装的插件会放在这里。后面会有专门的文章介绍开发插件。
www:最重要的目录,存放项目主题的HTML5和JS代码的目录。app一开始打开的就是这个目录中index.html文件。
config.xml:主要是cordova的一些配置,比如:项目使用了哪些插件、应用图标icon和启动页面SplashScreen,修改app的版本,名字等信息,还有平台的配置。
4.指定平台
命令行指令:cordova platforms add android(/ios)
你会看到输入完之后提示红色的字,所以这条指令执行时,一定要切换到项目的根目录下才可以,切换后,输入指令,下面有一个斜杠会不停的转,这就说明正在生成中。
生成结束后,会看到以下的打印信息,包含了项目路径,包名,应用名称,主界面,android平台的版本,cordova版本以及一些指导性的说明文字。我们再去platforms路径下看,就会看到如下内容。
IOS平台的添加方法是一样的,因为我的电脑是windows,所以出现了一句提示,但还是生成成功啦。大家还可以看到,Android和IOS依托的cordova平台是不一样的。
我们还可以通过以下命令来移除刚创建的平台:
cordova platforms rm ios
移除后,目录结构如图:
步骤三.添加插件
我们cordova项目就搭建完成啦,接下来我们来看一下我们应该如何引入cordova插件用于我们的开发过程中呢,cordova提供了丰富的插件供我们选择,我们使用时只需要在命令行直接进行下载即可。
命令:cordova plugin add 插件名称(可从官网上查询)
插件搜索地址:http://cordova.apache.org/plugins/
这里我搜索到一个比较详细的插件介绍的帖子,可以分享给大家,有需要可以去查找。
https://blog.csdn.net/github_39500961/article/details/76270299
举个例子:
Cordova plugin add cordova-plugin-camera
我们会发现如果我们建立了android和IOS两个平台,则两个平台下都会安装。插件的安装地址如下:
我们还可以再命令行查看我们安装的插件:
命令如下:cordova plugin ls
接下来,我们可以检测一下我们的APP能否运行成功:
可通过以下命令来测试:
- cordova install android //将编译好的应用程序安装到模拟器上。
- cordova emulate android //在模拟器上运行(前提是创建好AVD)
- cordova serve android //在浏览器运行
- cordova build android //打包cordova项目到android平台。
- cordova run android //通过USB直接安装到真机(该语句已经包括了build命令)
因为我的电脑已经使用USB连接到了真机,所以我直接在真机上运行,输入最后一行命令:
cordova run android
如果看到这个结果,就说明编译成功啦,你就可以在真机上看到运行界面,是一个小机器人,下面有一段文字,APACHE CORDOVA,就说明你成功啦~