cordova入门教程

1、新建cordova项目

1.1环境配置

安装node.js,下载地址:https://nodejs.org/en/ node安装完成并配置环境变量,我们就可以在终端执行npm命令。在终端中使用如下命令安装Cordova:

npm install -g cordova
1.2 创建项目

打开cmd命令窗口进入文件目录,如下图所示:

cordova 导入 android studio 调试 cordova文档_cordova 开发


然后输入:cordova create 项目名称 包名,回车执行命令;如下图所示:

cordova create Test com.xxx.test

cordova 导入 android studio 调试 cordova文档_Android_02


命令执行后,进入相应的文件查看工程,如图:

cordova 导入 android studio 调试 cordova文档_cordova 开发_03


项目创建成功,在对应的文件路径下可以看到以上内容;

platforms: 文件目录存放对平台的文件,如Android,iOS的文件

plugins: 文件目录存放我们引用的插件

www: 文件目录存放css、js、html文件

项目创建成功,接下来就是添加平台,如添加Android平台,首先进入到platforms目录,输入命令:

cordova platforms add android

回车执行命令。如下图:

cordova 导入 android studio 调试 cordova文档_Android_04


Android平台添加成功,查看文件路径新增了android文件路径,如下图:

cordova 导入 android studio 调试 cordova文档_根目录_05


进入android文件目录

cordova 导入 android studio 调试 cordova文档_android_06


这里就是我们熟悉的android目录了;CordovaLib 是android依赖cordova的依赖module。我们可直接在app路径下进行代码的编写

cordova 导入 android studio 调试 cordova文档_根目录_07


assets目录下面存有我们的js、css、html代码

java目录下面存有Java代码

libs目录下面存有我们引用的jar、aar的第三方依赖包

res目录下面存有资源文件

然后进入项目根目录,输入:cordova build 编译项目,如图所示:

cordova build / cordova build android

cordova 导入 android studio 调试 cordova文档_cordova 开发_08


cordova 导入 android studio 调试 cordova文档_Android_09


编译成功输出 BUILD SUCCESSFUL 的信息,编译成功后进行apk安装,输入命令:cordova run android ,如下图:

cordova run android

cordova 导入 android studio 调试 cordova文档_根目录_10


cordova 导入 android studio 调试 cordova文档_cordova 开发_11


apk安装成功,会输出LAUNCH SUCCESS的信息。到此cordova项目创建完成并编译生成apk文件。


2、创建coradova插件

2.1工具安装

输入命令

npm install -g plugman     安装plugman
2.2创建插件

首先进入项目根目录,输入命令 plugman create --name 插件名称 --plugin_id 插件ID --plugin_version 插件版本号

plugman create --name xxxx --plugin_id xxxxx --plugin_version 1.0.0

如下图所示:

cordova 导入 android studio 调试 cordova文档_cordova 开发_12


插件创建成功后,可以在项目的根目录下看看插件目录:

cordova 导入 android studio 调试 cordova文档_Android_13

cordova 导入 android studio 调试 cordova文档_根目录_14


src目录对应的是Android的java代码、res资源文件,依赖的jar包和aar包,和自定义的gradle文件

www目录对应的是插件的js文件

plugin.xml 插件的配置文件

然后将编写好的代码拷贝到插件目录下对应的文件夹内,如下图:

cordova 导入 android studio 调试 cordova文档_根目录_15


编写plugin.xml 文件,如下:

cordova 导入 android studio 调试 cordova文档_cordova 开发_16

然后进入插件根目录,执行命令

npm init

cordova 导入 android studio 调试 cordova文档_Android_17


输入npm init 命令,回车执行后,出现中间红框中的信息,进行配置。如果直接回车则输出下面红框中json数据,此时在插件根目录下回生成package.json文件,如下图:

cordova 导入 android studio 调试 cordova文档_根目录_18


cordova 导入 android studio 调试 cordova文档_cordova 开发_19


然后编辑package.json文件,至此cordova插件制作完成。然后给Android平台添加插件

cordova 导入 android studio 调试 cordova文档_Android_20


插件添加成功,查看插件列表看看有没有添加的插件

cordova plugin list

cordova 导入 android studio 调试 cordova文档_根目录_21


用AndroidStudio打开项目可看到,插件已成功安装

cordova 导入 android studio 调试 cordova文档_cordova 开发_22


cordova 导入 android studio 调试 cordova文档_android_23


在Android工程目录下,cordova_plugins.js文件里面:

cordova 导入 android studio 调试 cordova文档_android_24


cordova.plugins.UDYhyPlugin 就是我们在自己的js文件中代用插件方法的对象

cordova 导入 android studio 调试 cordova文档_cordova 开发_25


这样就可以调用到插件里面的方法了。

参考资料:https://www.jianshu.com/p/0a6b05abca0f