前言
請原諒我這麼久纔開始寫製作插件教程（二） ，由於公司技術可能又到了一個技術棧選型的過渡期,後面可能沒有那麼多機會寫插件了.很多小夥伴給我發郵件,催促我寫第二篇教程, 那今天我們手把手的教大家寫一個原生插件吧!
首先,我們確認環境是否一致
請確保在開發前,有以下環境:(右側是我的版本)
Nodejs: v10.15.1 (此版本不同也可)
Cordova: v8.0.0 (如閱讀此教程,此版本請務必和我保持一致)
Android Studio : 3.0+(有AS方便調試和開發)
在寫插件之前,我們需要思考的問題
我們開發插件,肯定是想實現某些功能給前端同事調用,我們完全可以想象就像是做一個SDK一樣,提供一些類或者方法被第三方調用.我們這裏,也是如此,做插件的原理,就好比如圖所示:
所有的插件在Cordova項目中都以Module的形式被引入, 註冊,以及調用.
插件的作用:是爲了彌補和擴展Cordova項目無法直接操作原生硬件或者改變系統某種設置的能力,如相機,OCR識別等
一. 創建一個Cordova項目和一個插件
這裏我用自己開發的桌面工具進行生成,目前只支持Windows平臺,有需要的點CordovaHelp
-
創建Cordova項目
-
創建Plugin插件
不想使用該工具的,請自行敲命令.(_!)
以下步驟,默認你已經和我的步驟保持一致.
現在我們已經分別生成了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爲例
這個屬性的配置,是所有插件都會有的,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.在前端頁面定義一個方法
2.調用定義的方法
然後執行添加插件命令,或者使用工具也是可以的! 設置項目路徑和插件路勁點擊紅色框框按鈕執行安裝.
然後連接手機(能夠有效識別), 然後點擊編譯項目,運行到手機上,然後點擊按鈕,查看日誌
問題一: 未找到組件的定義
非常顯眼的字樣:
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鍵點擊這個類
如果能夠正常跳轉,就表示,你的組件是能夠對應上的. - 5.如果在platform/android下修改了源文件, 比如前端的index.html或者index.js,對應cordova前端項目是不會有改變的,雖然運行時候有改變,但是不會同步到外部,所以,如果想要生效,請直接修改cordova項目,然後重新添加平臺即可同步生效.
- 6.插件的修改之後,並不會直接作用於platform/android 中,需要重新安裝才能夠生效.
以上,是所有的cordova製作插件的教程和注意事項, 如果大家在使用過程中, 有任何疑問,請隨時和我交流討論,
附上我的郵箱,給我發郵件:[email protected]如有任何問題,都可以聯繫我.
最後感謝大家閱讀此文,感謝!