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

前言

請原諒我這么久才開始寫制作插件教程（二） ，由于公司技術(shù)可能又到了一個技術(shù)棧選型的過渡期,后面可能沒有那么多機(jī)會寫插件了.很多小伙伴給我發(fā)郵件,催促我寫第二篇教程, 那今天我們手把手的教大家寫一個原生插件吧!

首先,我們確認(rèn)環(huán)境是否一致

請確保在開發(fā)前,有以下環(huán)境:(右側(cè)是我的版本)

Nodejs:   v10.15.1  (此版本不同也可)
Cordova:   v8.0.0   (如閱讀此教程,此版本請務(wù)必和我保持一致)
Android Studio : 3.0+(有AS方便調(diào)試和開發(fā))

在寫插件之前,我們需要思考的問題

我們開發(fā)插件,肯定是想實現(xiàn)某些功能給前端同事調(diào)用,我們完全可以想象就像是做一個SDK一樣,提供一些類或者方法被第三方調(diào)用.我們這里,也是如此,做插件的原理,就好比如圖所示:


image.png
所有的插件在Cordova項目中都以Module的形式被引入, 注冊,以及調(diào)用.

插件的作用:是為了彌補(bǔ)和擴(kuò)展Cordova項目無法直接操作原生硬件或者改變系統(tǒng)某種設(shè)置的能力,如相機(jī),OCR識別等

一. 創(chuàng)建一個Cordova項目和一個插件

這里我用自己開發(fā)的桌面工具進(jìn)行生成,目前只支持Windows平臺,有需要的點(diǎn)CordovaHelp

  • 創(chuàng)建Cordova項目


    創(chuàng)建Cordova項目.png

  • 創(chuàng)建Plugin插件


    image.png

不想使用該工具的,請自行敲命令.(_!)

以下步驟,默認(rèn)你已經(jīng)和我的步驟保持一致.

現(xiàn)在我們已經(jīng)分別生成了Cordova項目和插件了,那么怎么把他們連貫起來呢?
先別著急.我們先了解下CordovaPluginDemo文件夾下的目錄結(jié)構(gòu).

了解插件的文件結(jié)構(gòu)和文件用途

|-- src                                   //存放源碼的地方
    |-- android                  //區(qū)分于平臺. 可能會有多個平臺, 如android , iOS
        |-- CordovaPluginDemo.java        // H5調(diào)用原生插件的入口
|-- www                                         //原生插件提供給H5的組件入口
    |---- CordovaPluginDemo.js
|-- package.json                         //包名信息
|-- plugin.xml                           // 插件的配置文件, 非常重要,相當(dāng)于插件的核心

二. CordovaPlugin.js文件解讀

image.png
  1. CordovaPluginDemo 表示組件名稱
  2. coolMethod 表示組件內(nèi)部的方法
  3. 至于arg0 ,success,error 都是調(diào)用時傳入的參數(shù)和回調(diào)

三. plugin.xml文件解讀

image.png
  1. js-module節(jié)點(diǎn) 配置給H5調(diào)用的組件,其中,clobbers節(jié)點(diǎn)的target是用來給H5調(diào)用的組件名稱

  2. platform節(jié)點(diǎn)下,對應(yīng)了所有平臺的屬性,根據(jù)name的不同進(jìn)行區(qū)分, 以下以Android為例


    image.png

這個屬性的配置,是所有插件都會有的,feature 節(jié)點(diǎn)下,主要是配置調(diào)用組件時,對應(yīng)的包名進(jìn)行匹配,如果你發(fā)現(xiàn), 兩個CordovaPluginDemo不匹配, 那么,你肯定寫的有問題, 調(diào)用時,肯定會出現(xiàn)找不到對應(yīng)組件的錯誤.

然后下面的 config-file 以及source-file或者還有其他的配置項,如resource-file和edit-config等等,都是都是源碼導(dǎo)入項.(名字是我自己取的,為了方便理解)

怎么解釋這個源碼導(dǎo)入項呢? 因為這些配置它的目的是為了把一些源碼,資源文件,以及清單文件(AndroidManifest.xml)的配置數(shù)據(jù),都copy的形式導(dǎo)入到Cordova項目下的\platforms\android,

所以,我們安裝插件,其實最終結(jié)果是,把插件的所有源碼和配置項,都復(fù)制到platform/adnroid下,相當(dāng)于組合起來,然后能夠正常運(yùn)行, 讓前端通過組件的形式調(diào)用.

題外話:如果你去了解Cordova項目原理,它其實就是通過原生Webview
進(jìn)行渲染所有的前端頁面, 而前端所有寫的的頁面,都會在platform/adnroid中找得到.
如果你對JsBridge框架有所了解, 你學(xué)習(xí)制作Cordova項目的插件會非常輕松.

調(diào)用插件(手把手教你怎么解決問題)

注意:其實上述插件的代碼中有很多幾個隱藏的問題.

  • 編寫調(diào)用插件的代碼
    1.在前端頁面定義一個方法


    定義調(diào)用方法.png

    2.調(diào)用定義的方法


    image.png

然后執(zhí)行添加插件命令,或者使用工具也是可以的! 設(shè)置項目路徑和插件路勁點(diǎn)擊紅色框框按鈕執(zhí)行安裝.


image.png

然后連接手機(jī)(能夠有效識別), 然后點(diǎn)擊編譯項目,運(yùn)行到手機(jī)上,然后點(diǎn)擊按鈕,查看日志


image.png

問題一: 未找到組件的定義

非常顯眼的字樣:

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

當(dāng)你遇到這個問題的時候 ,你要非?？隙ㄊ遣寮膯栴},
首先,你要排查一下,是不是你的引用寫的有問題,也就是看調(diào)用的組件名稱和插件的plugin.xml的clobbers定義的是不是保持一致, 對比之后,發(fā)現(xiàn)是真的寫的有問題,那么我們修改clobbers名稱,
把它修改成CordovaPluginDemo,修改之后,需要重新插件,然后重新點(diǎn)擊調(diào)用,發(fā)現(xiàn)沒有出現(xiàn)剛剛那個錯誤了.這種錯誤就比較簡單了, 當(dāng)然,還有一些錯誤,就沒有那么好解決了!

問題二, 由于包名不一致導(dǎo)致

我們一般通過AS排查問題,首先把\CordovaProject\platforms\android這個路徑導(dǎo)入到AS中,

image.png

然后進(jìn)行構(gòu)建, 中途可能報錯,會需要你點(diǎn)擊移除minSdkVersion和TargetSdkVersion,點(diǎn)一下然后可能也會彈出讓你更新什么什么的,這里不要點(diǎn)擊更新,直接點(diǎn)擊忽略選項就行了,然后項目就能正常了,我們打開我們編寫的插件源碼,
image.png

觀察發(fā)現(xiàn),我們的包名不一致導(dǎo)致的,我們需要怎么修改呢?
是改成和Java包名一樣的還是應(yīng)該改成爆紅的那個呢?這里建議改成爆紅的這個,因為在之前,我們創(chuàng)建的時候,寫的包名是com.senjoeson.plugin,這可能是通過命令生成后的一個小問題吧,我們把CordovaPluginDemo移動到plugin下,那么,是不是移動了包的問題,就能夠解決這個問題呢,我們試著編譯然后運(yùn)行一下,
image.png

然后有時候會出現(xiàn),怎么還是會報錯呢?這不科學(xué)啊,其實這和cordova框架 的機(jī)制有關(guān)系,
還有如果在android源碼中這樣移動包名,可能之前由于包名的配置數(shù)據(jù)沒有被更改, 從這里你就可以看出來,這里,建議是直接從插件的源碼中修改,
image.png

這里的包名引導(dǎo)的位置是src/com/senjoesons/plugin/CordovaPluginDemo/實質(zhì)上,我們找到CordovaPluginDemo.Java文件應(yīng)該找的是src/com/senjoeson/plugin/CordovaPluginDemo.java,因此,這里我們一般要手動修改一下,這個也是非常容易出錯的地方,很多時候,找不到引用,也可能是由于這個原因.
這里我們把插件的plugin.xml修改下,然后重新安裝插件,并且編譯項目,
image.png

最終發(fā)現(xiàn),運(yùn)行成功了!

好了,這里基本上把整個制作插件的流程中講了一遍,下面把可能遇到的問題,簡單的給大家歸類總結(jié)一下:

    1. 前端調(diào)用時的組件名稱,注意是與插件中的plugin.xml的clobbers中對應(yīng)
  • 2.定義方法,在組件名稱入口內(nèi)部定義的action名稱請和www/xxxx.js中的方法名稱保持一致,方便追溯問題.
  • 3.包名的引用,請和對應(yīng)的android項目中Java包名保持一致,如果不一致, 可以通過plugin.xml中的android-package對應(yīng),上文中,
 //這里的CordovaPluginDemo請理解成是Java類名稱,而不是包的路徑
 <param name="android-package" value="com.senjoeson.plugin.CordovaPluginDemo"/>

  • 4.對于第三點(diǎn),補(bǔ)充下,可以通過按住ctrl鍵點(diǎn)擊這個類


    image.png

    如果能夠正常跳轉(zhuǎn),就表示,你的組件是能夠?qū)?yīng)上的.

  • 5.如果在platform/android下修改了源文件, 比如前端的index.html或者index.js,對應(yīng)cordova前端項目是不會有改變的,雖然運(yùn)行時候有改變,但是不會同步到外部,所以,如果想要生效,請直接修改cordova項目,然后重新添加平臺即可同步生效.
  • 6.插件的修改之后,并不會直接作用于platform/android 中,需要重新安裝才能夠生效.

以上,是所有的cordova制作插件的教程和注意事項, 如果大家在使用過程中, 有任何疑問,請隨時和我交流討論,
附上我的郵箱,給我發(fā)郵件:senjoeson@foxmail.com如有任何問題,都可以聯(lián)系我.

最后感謝大家閱讀此文,感謝!

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容