原生安卓使用cordova制作插件教程(一)

前言


写作目的:由于第一次接触制作插件过程,当中遇到很多问题不知道如何下手,写此教程也是为了给大家学习插件制作时,提供一些思路和解决方案, 也为了记录自己当初学习时出现的问题!



* l 使用工具如下:Android studio

* l 开发环境:基于Node.js

* l 使用插件:cordova 、plugman(生成插件工具)


第一步: 配置环境

请先去安装好Node.js,然后安装好cordova 如果不会安装请点击下面链接:http://cordova.axuer.com/

第二步:默认你已经完成第一步,接下来我们创建一个Cordova项目

创建项目的格式如下:

 cordova create [文件名] [包名]  

 比如: cordova create Demo com.senjoeson.demo 

第三步:添加你要生成哪个平台的插件

首先我们进入该cordova项目,比如 cd demo

注:如果你不知道当前有哪些平台,请执行cordova platform list

我这里就先默认添加我们安卓平台吧

  cordova platform add android

第四步:安装plugman插件并创建一个插件

安装很简单,就和安装cordova一样简单

npm install -g plugman

plugman create --name [名字]--plugin_id [包名] --plugin_version 1.0.0

plugman create --name TestPlugin --plugin_id com.senjoeson.test --plugin_version 1.0.0

创建插件的话 建议你不要创建在cordova项目中

我们可以进行cd .. 进行退回到上一级目录

第五步 编写生成插件中的安卓代码

我们打开插件目录中的src目录,发现目录是空的,这里我们需要手动添加android目录

然后创建一个java文件,在java文件中,必须指定一个入口去继承CordovaPlugin

当然也可以使用命令进行生产操作:(此命在插件根目录下执行哦)

plugman platform add --platform_name [platform]      //platform 只能写ios或者android

备注:插件就类似一个java程序,必须要有一个入口,当该入口被加载,才会去识别该程序的其他类或者方法等(本人是这么理解的!)

比如:

image.png

写到这里,我们插件的安卓代码已经完成了,但是插件目前还没有办法识别到我们写的java类和java方法,因此,我们需要在plugin.xml文件对我们写的东西进行声明

image.png

完成plugin.xml修改后,按理说 ,插件部分算是完成了对吧?但是别忘记了,我们还没有去配置package.json,也就是该插件信息,没有这个文件,我们添加插件时会出现错误的!

我们执行进入插件目录,执行 npm init

按照括号的提示写比如如下图,完成后,我们执行下一步。

image.png

第六步,添加插件到cordova项目并完成调用操作

  • 1.添加插件到cordova项目中

记住两个命令:添加和删除插件


cordova plugin add [插件路径]                   `添加是添加的插件路径`  

Cordova plugin remove [包名]                     ` 移除是插件的包名`

添加插件的原理(针对安卓):就是把我们自己做好的插件,添加到Android项目的assets目录中,因此每次修改了插件内容的话都需要移除并重新添加.

  • 2.完成调用操作

2.1 打开cordova项目,找到www/index.html, index.html是这个h5app的入口,我们可以在里面随便写一个按钮, 然后点击测试我们的插件是否被调用

image.png

2.2 经大家反馈, js方法直接写在index.html可能存在问题,因此提供一种新方法,解决兼容的问题

声明按钮.png
按钮事件.png

重点我们在插件的plugin.xml中声明的clobbers 两者一定要保持一致,否则一直会出现 无法“捕获到引用的错误” 错误。

配置JS引用组件名称.png

至此,教程完毕, 如果还有不懂的地方,欢迎大家留言给我,最后谢谢大家!
由于经常会用到一些命令,感觉输入很麻烦 , 所以自己做了一款桌面应用, 如果大家有兴趣,请前往下
CordovaHelp.jar下载我的应用,有能力的,可以自行编译哦. 如有不完善的地方, 可随时与我沟通.

附上我的邮箱,给我发邮件:senjoeson@foxmail.com如有任何问题,都可以联系我.

PS:很多朋友反馈说这个教程太过基础, 照着你上面写,并不能完全能够学会, 因此,后续我会加强版,通过手写一个插件重点讲一些需要注意的地方.

推薦閱讀更多精彩內容