如何创建Cordova APP

步骤一.安装cordova开发环境以及相关软件平台开发环境(Android,IOS等)

该步骤进行的第一步,就是先安装android或者IOS的开发环境,比如android,需要安装相应的jre和sdk.IOS没开发过,还不太清楚。第二步就是安装nodejs,可以参考我的另一篇博客,在这里就不展开叙述啦~

步骤二.本地生成Cordova项目

以命令行生成来演示,过程如下:

  1. 打开命令行,切换到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,就说明你成功啦~

猜你喜欢

转载自blog.csdn.net/qq_31490071/article/details/81317006