前言
請原諒我這么久才開始寫制作插件教程（二） ，由于公司技術可能又到了一個技術棧選型的過渡期,后面可能沒有那么多機會寫插件了.很多小伙伴給我發(fā)郵件,催促我寫第二篇教程, 那今天我們手把手的教大家寫一個原生插件吧!
首先,我們確認環(huán)境是否一致
請確保在開發(fā)前,有以下環(huán)境:(右側是我的版本)
Nodejs: v10.15.1 (此版本不同也可)
Cordova: v8.0.0 (如閱讀此教程,此版本請務必和我保持一致)
Android Studio : 3.0+(有AS方便調試和開發(fā))
在寫插件之前,我們需要思考的問題
我們開發(fā)插件,肯定是想實現(xiàn)某些功能給前端同事調用,我們完全可以想象就像是做一個SDK一樣,提供一些類或者方法被第三方調用.我們這里,也是如此,做插件的原理,就好比如圖所示:
所有的插件在Cordova項目中都以Module的形式被引入, 注冊,以及調用.
插件的作用:是為了彌補和擴展Cordova項目無法直接操作原生硬件或者改變系統(tǒng)某種設置的能力,如相機,OCR識別等
一. 創(chuàng)建一個Cordova項目和一個插件
這里我用自己開發(fā)的桌面工具進行生成,目前只支持Windows平臺,有需要的點CordovaHelp
-
創(chuàng)建Cordova項目
創(chuàng)建Cordova項目.png -
創(chuàng)建Plugin插件
image.png
不想使用該工具的,請自行敲命令.(_!)
以下步驟,默認你已經(jīng)和我的步驟保持一致.
現(xiàn)在我們已經(jīng)分別生成了Cordova項目和插件了,那么怎么把他們連貫起來呢?
先別著急.我們先了解下CordovaPluginDemo文件夾下的目錄結構.
了解插件的文件結構和文件用途
|-- src //存放源碼的地方
|-- android //區(qū)分于平臺. 可能會有多個平臺, 如android , iOS
|-- CordovaPluginDemo.java // H5調用原生插件的入口
|-- www //原生插件提供給H5的組件入口
|---- CordovaPluginDemo.js
|-- package.json //包名信息
|-- plugin.xml // 插件的配置文件, 非常重要,相當于插件的核心
二. CordovaPlugin.js文件解讀
- CordovaPluginDemo 表示組件名稱
- coolMethod 表示組件內部的方法
- 至于arg0 ,success,error 都是調用時傳入的參數(shù)和回調
三. plugin.xml文件解讀
- js-module節(jié)點 配置給H5調用的組件,其中,clobbers節(jié)點的target是用來給H5調用的組件名稱
-
platform節(jié)點下,對應了所有平臺的屬性,根據(jù)name的不同進行區(qū)分, 以下以Android為例
image.png
這個屬性的配置,是所有插件都會有的,feature 節(jié)點下,主要是配置調用組件時,對應的包名進行匹配,如果你發(fā)現(xiàn), 兩個CordovaPluginDemo不匹配, 那么,你肯定寫的有問題, 調用時,肯定會出現(xiàn)找不到對應組件的錯誤.
然后下面的 config-file 以及source-file或者還有其他的配置項,如resource-file和edit-config等等,都是都是源碼導入項.(名字是我自己取的,為了方便理解)
怎么解釋這個源碼導入項呢? 因為這些配置它的目的是為了把一些源碼,資源文件,以及清單文件(AndroidManifest.xml)的配置數(shù)據(jù),都copy的形式導入到Cordova項目下的\platforms\android,
所以,我們安裝插件,其實最終結果是,把插件的所有源碼和配置項,都復制到platform/adnroid下,相當于組合起來,然后能夠正常運行, 讓前端通過組件的形式調用.
題外話:如果你去了解Cordova項目原理,它其實就是通過原生Webview
進行渲染所有的前端頁面, 而前端所有寫的的頁面,都會在platform/adnroid中找得到.
如果你對JsBridge框架有所了解, 你學習制作Cordova項目的插件會非常輕松.
調用插件(手把手教你怎么解決問題)
注意:其實上述插件的代碼中有很多幾個隱藏的問題.
-
編寫調用插件的代碼
1.在前端頁面定義一個方法
定義調用方法.png
2.調用定義的方法
image.png
然后執(zhí)行添加插件命令,或者使用工具也是可以的! 設置項目路徑和插件路勁點擊紅色框框按鈕執(zhí)行安裝.
然后連接手機(能夠有效識別), 然后點擊編譯項目,運行到手機上,然后點擊按鈕,查看日志
問題一: 未找到組件的定義
非常顯眼的字樣:
Uncaught ReferenceError: CordovaPluginDemo is not defined //翻譯的意思是找不到引用,可能未被定義
當你遇到這個問題的時候 ,你要非常肯定是插件的問題,
首先,你要排查一下,是不是你的引用寫的有問題,也就是看調用的組件名稱和插件的plugin.xml的clobbers定義的是不是保持一致, 對比之后,發(fā)現(xiàn)是真的寫的有問題,那么我們修改clobbers名稱,
把它修改成CordovaPluginDemo,修改之后,需要重新插件,然后重新點擊調用,發(fā)現(xiàn)沒有出現(xiàn)剛剛那個錯誤了.這種錯誤就比較簡單了, 當然,還有一些錯誤,就沒有那么好解決了!
問題二, 由于包名不一致導致
我們一般通過AS排查問題,首先把\CordovaProject\platforms\android這個路徑導入到AS中,
然后進行構建, 中途可能報錯,會需要你點擊移除minSdkVersion和TargetSdkVersion,點一下然后可能也會彈出讓你更新什么什么的,這里不要點擊更新,直接點擊忽略選項就行了,然后項目就能正常了,我們打開我們編寫的插件源碼,
觀察發(fā)現(xiàn),我們的包名不一致導致的,我們需要怎么修改呢?
是改成和Java包名一樣的還是應該改成爆紅的那個呢?這里建議改成爆紅的這個,因為在之前,我們創(chuàng)建的時候,寫的包名是com.senjoeson.plugin,這可能是通過命令生成后的一個小問題吧,我們把CordovaPluginDemo移動到plugin下,那么,是不是移動了包的問題,就能夠解決這個問題呢,我們試著編譯然后運行一下,
然后有時候會出現(xiàn),怎么還是會報錯呢?這不科學啊,其實這和cordova框架 的機制有關系,
還有如果在android源碼中這樣移動包名,可能之前由于包名的配置數(shù)據(jù)沒有被更改, 從這里你就可以看出來,這里,建議是直接從插件的源碼中修改,
這里的包名引導的位置是
src/com/senjoesons/plugin/CordovaPluginDemo/實質上,我們找到CordovaPluginDemo.Java文件應該找的是src/com/senjoeson/plugin/CordovaPluginDemo.java,因此,這里我們一般要手動修改一下,這個也是非常容易出錯的地方,很多時候,找不到引用,也可能是由于這個原因.這里我們把插件的plugin.xml修改下,然后重新安裝插件,并且編譯項目,
最終發(fā)現(xiàn),運行成功了!
好了,這里基本上把整個制作插件的流程中講了一遍,下面把可能遇到的問題,簡單的給大家歸類總結一下:
- 前端調用時的組件名稱,注意是與插件中的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制作插件的教程和注意事項, 如果大家在使用過程中, 有任何疑問,請隨時和我交流討論,
附上我的郵箱,給我發(fā)郵件:senjoeson@foxmail.com如有任何問題,都可以聯(lián)系我.
最后感謝大家閱讀此文,感謝!
