前言
请原谅我这么久才开始写制作插件教程（二） ，由于公司技术可能又到了一个技术栈选型的过渡期,后面可能没有那么多机会写插件了.很多小伙伴给我发邮件,催促我写第二篇教程, 那今天我们手把手的教大家写一个原生插件吧!
首先,我们确认环境是否一致
请确保在开发前,有以下环境:(右侧是我的版本)
Nodejs: v10.15.1 (此版本不同也可)
Cordova: v8.0.0 (如阅读此教程,此版本请务必和我保持一致)
Android Studio : 3.0+(有AS方便调试和开发)
在写插件之前,我们需要思考的问题
我们开发插件,肯定是想实现某些功能给前端同事调用,我们完全可以想象就像是做一个SDK一样,提供一些类或者方法被第三方调用.我们这里,也是如此,做插件的原理,就好比如图所示:
所有的插件在Cordova项目中都以Module的形式被引入, 注册,以及调用.
插件的作用:是为了弥补和扩展Cordova项目无法直接操作原生硬件或者改变系统某种设置的能力,如相机,OCR识别等
一. 创建一个Cordova项目和一个插件
这里我用自己开发的桌面工具进行生成,目前只支持Windows平台,有需要的点CordovaHelp
-
创建Cordova项目
创建Cordova项目.png -
创建Plugin插件
image.png
不想使用该工具的,请自行敲命令.(_!)
以下步骤,默认你已经和我的步骤保持一致.
现在我们已经分别生成了Cordova项目和插件了,那么怎么把他们连贯起来呢?
先别着急.我们先了解下CordovaPluginDemo文件夹下的目录结构.
了解插件的文件结构和文件用途
|-- src //存放源码的地方
|-- android //区分于平台. 可能会有多个平台, 如android , iOS
|-- CordovaPluginDemo.java // H5调用原生插件的入口
|-- www //原生插件提供给H5的组件入口
|---- CordovaPluginDemo.js
|-- package.json //包名信息
|-- plugin.xml // 插件的配置文件, 非常重要,相当于插件的核心
二. CordovaPlugin.js文件解读
- CordovaPluginDemo 表示组件名称
- coolMethod 表示组件内部的方法
- 至于arg0 ,success,error 都是调用时传入的参数和回调
三. plugin.xml文件解读
- js-module节点 配置给H5调用的组件,其中,clobbers节点的target是用来给H5调用的组件名称
-
platform节点下,对应了所有平台的属性,根据name的不同进行区分, 以下以Android为例
image.png
这个属性的配置,是所有插件都会有的,feature 节点下,主要是配置调用组件时,对应的包名进行匹配,如果你发现, 两个CordovaPluginDemo不匹配, 那么,你肯定写的有问题, 调用时,肯定会出现找不到对应组件的错误.
然后下面的 config-file 以及source-file或者还有其他的配置项,如resource-file和edit-config等等,都是都是源码导入项.(名字是我自己取的,为了方便理解)
怎么解释这个源码导入项呢? 因为这些配置它的目的是为了把一些源码,资源文件,以及清单文件(AndroidManifest.xml)的配置数据,都copy的形式导入到Cordova项目下的\platforms\android,
所以,我们安装插件,其实最终结果是,把插件的所有源码和配置项,都复制到platform/adnroid下,相当于组合起来,然后能够正常运行, 让前端通过组件的形式调用.
题外话:如果你去了解Cordova项目原理,它其实就是通过原生Webview
进行渲染所有的前端页面, 而前端所有写的的页面,都会在platform/adnroid中找得到.
如果你对JsBridge框架有所了解, 你学习制作Cordova项目的插件会非常轻松.
调用插件(手把手教你怎么解决问题)
注意:其实上述插件的代码中有很多几个隐藏的问题.
-
编写调用插件的代码
1.在前端页面定义一个方法
定义调用方法.png
2.调用定义的方法
image.png
然后执行添加插件命令,或者使用工具也是可以的! 设置项目路径和插件路劲点击红色框框按钮执行安装.
然后连接手机(能够有效识别), 然后点击编译项目,运行到手机上,然后点击按钮,查看日志
问题一: 未找到组件的定义
非常显眼的字样:
Uncaught ReferenceError: CordovaPluginDemo is not defined //翻译的意思是找不到引用,可能未被定义
当你遇到这个问题的时候 ,你要非常肯定是插件的问题,
首先,你要排查一下,是不是你的引用写的有问题,也就是看调用的组件名称和插件的plugin.xml的clobbers定义的是不是保持一致, 对比之后,发现是真的写的有问题,那么我们修改clobbers名称,
把它修改成CordovaPluginDemo,修改之后,需要重新插件,然后重新点击调用,发现没有出现刚刚那个错误了.这种错误就比较简单了, 当然,还有一些错误,就没有那么好解决了!
问题二, 由于包名不一致导致
我们一般通过AS排查问题,首先把\CordovaProject\platforms\android这个路径导入到AS中,
然后进行构建, 中途可能报错,会需要你点击移除minSdkVersion和TargetSdkVersion,点一下然后可能也会弹出让你更新什么什么的,这里不要点击更新,直接点击忽略选项就行了,然后项目就能正常了,我们打开我们编写的插件源码,
观察发现,我们的包名不一致导致的,我们需要怎么修改呢?
是改成和Java包名一样的还是应该改成爆红的那个呢?这里建议改成爆红的这个,因为在之前,我们创建的时候,写的包名是com.senjoeson.plugin,这可能是通过命令生成后的一个小问题吧,我们把CordovaPluginDemo移动到plugin下,那么,是不是移动了包的问题,就能够解决这个问题呢,我们试着编译然后运行一下,
然后有时候会出现,怎么还是会报错呢?这不科学啊,其实这和cordova框架 的机制有关系,
还有如果在android源码中这样移动包名,可能之前由于包名的配置数据没有被更改, 从这里你就可以看出来,这里,建议是直接从插件的源码中修改,
这里的包名引导的位置是
src/com/senjoesons/plugin/CordovaPluginDemo/实质上,我们找到CordovaPluginDemo.Java文件应该找的是src/com/senjoeson/plugin/CordovaPluginDemo.java,因此,这里我们一般要手动修改一下,这个也是非常容易出错的地方,很多时候,找不到引用,也可能是由于这个原因.这里我们把插件的plugin.xml修改下,然后重新安装插件,并且编译项目,
最终发现,运行成功了!
好了,这里基本上把整个制作插件的流程中讲了一遍,下面把可能遇到的问题,简单的给大家归类总结一下:
- 前端调用时的组件名称,注意是与插件中的plugin.xml的clobbers中对应
- 2.定义方法,在组件名称入口内部定义的action名称请和
www/xxxx.js中的方法名称保持一致,方便追溯问题. - 3.包名的引用,请和对应的android项目中Java包名保持一致,如果不一致, 可以通过plugin.xml中的android-package对应,上文中,
//这里的CordovaPluginDemo请理解成是Java类名称,而不是包的路径
<param name="android-package" value="com.senjoeson.plugin.CordovaPluginDemo"/>
-
4.对于第三点,补充下,可以通过按住ctrl键点击这个类
image.png
如果能够正常跳转,就表示,你的组件是能够对应上的.
- 5.如果在platform/android下修改了源文件, 比如前端的index.html或者index.js,对应cordova前端项目是不会有改变的,虽然运行时候有改变,但是不会同步到外部,所以,如果想要生效,请直接修改cordova项目,然后重新添加平台即可同步生效.
- 6.插件的修改之后,并不会直接作用于platform/android 中,需要重新安装才能够生效.
以上,是所有的cordova制作插件的教程和注意事项, 如果大家在使用过程中, 有任何疑问,请随时和我交流讨论,
附上我的邮箱,给我发邮件:senjoeson@foxmail.com如有任何问题,都可以联系我.
最后感谢大家阅读此文,感谢!
