Cordova入门开发经验

cordova的功能

利用cordova可以做到html调用iOS/安卓原生插件的功能。

一、安装cordova环境:

1、xcode

2、安装node.js

去官网下载Node.js然后安装

3、使用终端安装cordova

打开终端输入命令:sudo npm install -g cordova 

npm管理cordova工具

4、创建运行项目

1、首先cd到桌面,运用终端创建一个项目

cordova create firstCordovaFile com.kay.firstCordova firstCordova

firstCordovaFile:对应你整个项目的文件夹名称

com.kay.firstCordova:对应至之后ios工程的bundleID

firstCordova:对应至之后ios工程名

2、创建ios工程

进入项目文件夹:cd firstCordovaFile

创建ios工程 : cordova platform add ios 

注意:ios必须小写

这时候在项目文件夹下的"platforms"文件夹中会多出ios文件夹,进入后就可以看到ios工程了.

二、开发插件:

h5前端和iOS代码之间的交互,主要就在Staging文件件下的index.html文件里,在index.html里编写js代码调用iOS原生代码。这中间就是个映射过程。

1、这里我们先创建写iOS原生插件代码的地方,在plugins里我们可以找到刚刚创建的com.kay.firstCordova文件夹,在这里创建代码文件,继承cordova的框架CDVPlugin,这里的工程名比较重要,在映射的地方要对应上。

.h文件夹会报红,修改为#import <Cordoba/CDVPlugin.h>

.h里写好方法名-(void)helloCordova:(CDVInvokedUrlCommand *)command;

这里helloCordova就为之后交互的方法调用名,可以随意根据插件名修改,后面的(CDVInvokedUrlCommand *)command;不变。

.m里实现

以上iOS原生就是一个打印传进来参数的功能,两个回调可以根据插件需要调用,插件可传参也可不传,都是根据需求。

2、这里我们进入Staging里的index.html,编写js代码,调用原生.h里的方法。

先写一个button,在这个button里的点击事件里,我们调用刚刚的方法。

Staging里的index.html

cordova.exec(alertSuccess,alertFail,"firstCordovaJS","helloCordova",["Hey,I'm JS!"]);

firstCordovaJS对应下面配置文件里的firstCordovaJS,helloCordova是原生文件里的方法名

3、配置Staging里config.xml文件

这个文件的配置就是使cordova找到原生插件和index.html里的方法的映射

以上就做完了一个插件的开发,但是还没有做插件打包以及js的映射。

三、打包插件以及测试:

首先安装pliginman  :npm install -g pluginman

用pluginman在桌面创建插件 : plugman create --name [名字]--plugin_id[包名] --plugin_version 1.0.0

plugman create --name firstCordova --plugin_id com.kay.plugin.firstCordova --plugin_version 1.0.0

这样桌面就创建了插件包,如图:

1、我们吧上面的原生插件放在src文件夹里

2、配置plugin.xml文件:

plugin.xml

1、是需要注意删掉的地方

2、这部分就是映射部分,和找到文件路径设置

plugin.xml

3、配置www文件夹里的js文件


js文件

讲coolMethod改为helloCordova

4、安装插件并测试

至此为止,插件的开发已经全部完成了,所谓的打包其实就是我们那个带配置文件的插件文件夹

新建一个cordova项目并且将我们的本地插件添加进去进行测试一下

1.新建一个cordova项目并且添加ios工程

2.cd进入到项目的目录下

3.添加刚刚创建的本地插件包:cordova plugin add 插件路径

这里需要注意,测试项目里存在的插件再安装会报错,我先查看测试项目里究竟有没有这个插件包,查看插件列表:cordova plugin ls ,删除插件:cordova plugin remove 包名,通过查看列表,得到包名,然后可以删除再安装

4.进行测试,通过js的语法去调用插件

在staging的index.html里

这样整个基本流程完成。

推荐阅读更多精彩内容