前言
写作目的:由于第一次接触制作插件过程,当中遇到很多问题不知道如何下手,写此教程也是为了给大家学习插件制作时,提供一些思路和解决方案, 也为了记录自己当初学习时出现的问题!
* 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下载我的应用,有能力的,可以自行编译哦. 如有不完善的地方, 可随时与我沟通.
PS:很多朋友反馈说这个教程太过基础, 照着你上面写,并不能完全能够学会, 因此,后续我会加强版,通过手写一个插件重点讲一些需要注意的地方.