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

前言

---

请原谅我这么久才开始写制作插件教程（二） ，由于公司技术可能又到了一个技术栈选型的过渡期,后面可能没有那么多机会写插件了.很多小伙伴给我发邮件,催促我写第二篇教程, 那今天我们手把手的教大家写一个原生插件吧!

---

首先,我们确认环境是否一致

请确保在开发前,有以下环境:(右侧是我的版本)

Nodejs:   v10.15.1  (此版本不同也可)
Cordova:   v8.0.0   (如阅读此教程,此版本请务必和我保持一致)
Android Studio : 3.0+(有AS方便调试和开发)

在写插件之前,我们需要思考的问题

我们开发插件,肯定是想实现某些功能给前端同事调用,我们完全可以想象就像是做一个SDK一样,提供一些类或者方法被第三方调用.我们这里,也是如此,做插件的原理,就好比如图所示:

image.png

所有的插件在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文件解读

image.png

1. CordovaPluginDemo 表示组件名称
2. coolMethod 表示组件内部的方法
3. 至于arg0 ,success,error 都是调用时传入的参数和回调

三. plugin.xml文件解读

image.png

1. js-module节点 配置给H5调用的组件,其中,clobbers节点的target是用来给H5调用的组件名称

2. 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

然后执行添加插件命令,或者使用工具也是可以的! 设置项目路径和插件路劲点击红色框框按钮执行安装.

image.png

然后连接手机(能够有效识别), 然后点击编译项目,运行到手机上,然后点击按钮,查看日志

image.png

问题一: 未找到组件的定义

非常显眼的字样:

Uncaught ReferenceError: CordovaPluginDemo is not defined   //翻译的意思是找不到引用,可能未被定义

当你遇到这个问题的时候 ,你要非常肯定是插件的问题,
首先,你要排查一下,是不是你的引用写的有问题,也就是看调用的组件名称和插件的plugin.xml的clobbers定义的是不是保持一致, 对比之后,发现是真的写的有问题,那么我们修改clobbers名称,
把它修改成CordovaPluginDemo,修改之后,需要重新插件,然后重新点击调用,发现没有出现刚刚那个错误了.这种错误就比较简单了, 当然,还有一些错误,就没有那么好解决了!

问题二, 由于包名不一致导致

我们一般通过AS排查问题,首先把\CordovaProject\platforms\android这个路径导入到AS中,

image.png

然后进行构建, 中途可能报错,会需要你点击移除minSdkVersion和TargetSdkVersion,点一下然后可能也会弹出让你更新什么什么的,这里不要点击更新,直接点击忽略选项就行了,然后项目就能正常了,我们打开我们编写的插件源码,

image.png

观察发现,我们的包名不一致导致的,我们需要怎么修改呢?
是改成和Java包名一样的还是应该改成爆红的那个呢?这里建议改成爆红的这个,因为在之前,我们创建的时候,写的包名是com.senjoeson.plugin,这可能是通过命令生成后的一个小问题吧,我们把CordovaPluginDemo移动到plugin下,那么,是不是移动了包的问题,就能够解决这个问题呢,我们试着编译然后运行一下,

image.png

然后有时候会出现,怎么还是会报错呢?这不科学啊,其实这和cordova框架 的机制有关系,
还有如果在android源码中这样移动包名,可能之前由于包名的配置数据没有被更改, 从这里你就可以看出来,这里,建议是直接从插件的源码中修改,

image.png

这里的包名引导的位置是src/com/senjoesons/plugin/CordovaPluginDemo/实质上,我们找到CordovaPluginDemo.Java文件应该找的是src/com/senjoeson/plugin/CordovaPluginDemo.java,因此,这里我们一般要手动修改一下,这个也是非常容易出错的地方,很多时候,找不到引用,也可能是由于这个原因.
这里我们把插件的plugin.xml修改下,然后重新安装插件,并且编译项目,

image.png

最终发现,运行成功了!

好了,这里基本上把整个制作插件的流程中讲了一遍,下面把可能遇到的问题,简单的给大家归类总结一下:

• 1. 前端调用时的组件名称,注意是与插件中的plugin.xml的clobbers中对应
• 2.定义方法,在组件名称入口内部定义的action名称请和www/xxxx.js中的方法名称保持一致,方便追溯问题.
• 3.包名的引用,请和对应的android项目中Java包名保持一致,如果不一致, 可以通过plugin.xml中的android-package对应,上文中,

 //这里的CordovaPluginDemo请理解成是Java类名称,而不是包的路径
  

• 4.对于第三点,补充下,可以通过按住ctrl键点击这个类

  
  
  image.png
  
  

  如果能够正常跳转,就表示,你的组件是能够对应上的.

• 5.如果在platform/android下修改了源文件, 比如前端的index.html或者index.js,对应cordova前端项目是不会有改变的,虽然运行时候有改变,但是不会同步到外部,所以,如果想要生效,请直接修改cordova项目,然后重新添加平台即可同步生效.
• 6.插件的修改之后,并不会直接作用于platform/android 中,需要重新安装才能够生效.

以上,是所有的cordova制作插件的教程和注意事项, 如果大家在使用过程中, 有任何疑问,请随时和我交流讨论,
附上我的邮箱,给我发邮件:[email protected]如有任何问题,都可以联系我.

最后感谢大家阅读此文,感谢!