原生安卓使用cordova製作插件教程(一)

#前言


寫作目的:由於第一次接觸製作插件過程,當中遇到很多問題不知道如何下手,寫此教程也是爲了給大家學習插件製作時,提供一些思路和解決方案, 也爲了記錄自己當初學習時出現的問題!



* l 使用工具如下:Android studio

* l 開發環境:基於Node.js

* l 使用插件:cordova 、plugman(生成插件工具)


第一步: 配置環境

請先去安裝好Node.js,然後安裝好cordova  如果不會安裝請點擊下面鏈接:http://cordova.axuer.com/

第二步:默認你已經完成第一步,接下來我們創建一個Cordova項目

創建項目的格式如下:

 cordova create [文件名] [包名]  

 比如: cordova create Demo com.senjoeson.demo 

第三步:添加你要生成哪個平臺的插件

首先我們進入該cordova項目,比如 cd demo

注:如果你不知道當前有哪些平臺,請執行cordova platform list

我這裏就先默認添加我們安卓平臺吧

  cordova platform add android

第四步:安裝plugman插件並創建一個插件

安裝很簡單,就和安裝cordova一樣簡單

npm install -g plugman

plugman create --name [名字]--plugin_id [包名] --plugin_version 1.0.0

plugman create --name TestPlugin --plugin_id com.senjoeson.test --plugin_version 1.0.0

創建插件的話 建議你不要創建在cordova項目中

我們可以進行cd … 進行退回到上一級目錄

第五步 編寫生成插件中的安卓代碼

我們打開插件目錄中的src目錄,發現目錄是空的,這裏我們需要手動添加android目錄

然後創建一個java文件,在java文件中,必須指定一個入口去繼承CordovaPlugin

當然也可以使用命令進行生產操作:(此命在插件根目錄下執行哦)

plugman platform add --platform_name [platform]      //platform 只能寫ios或者android

備註:插件就類似一個java程序,必須要有一個入口,當該入口被加載,纔會去識別該程序的其他類或者方法等(本人是這麼理解的!)

比如:

image.png

寫到這裏,我們插件的安卓代碼已經完成了,但是插件目前還沒有辦法識別到我們寫的java類和java方法,因此,我們需要在plugin.xml文件對我們寫的東西進行聲明

image.png

完成plugin.xml修改後,按理說 ,插件部分算是完成了對吧?但是別忘記了,我們還沒有去配置package.json,也就是該插件信息,沒有這個文件,我們添加插件時會出現錯誤的!

我們執行進入插件目錄,執行 npm init

按照括號的提示寫比如如下圖,完成後,我們執行下一步。

image.png

第六步,添加插件到cordova項目並完成調用操作

  • 1.添加插件到cordova項目中

記住兩個命令:添加和刪除插件


cordova plugin add [插件路徑]                   `添加是添加的插件路徑`  

Cordova plugin remove [包名]                     ` 移除是插件的包名`

添加插件的原理(針對安卓):就是把我們自己做好的插件,添加到Android項目的assets目錄中,因此每次修改了插件內容的話都需要移除並重新添加.

  • 2.完成調用操作

2.1 打開cordova項目,找到www/index.html, index.html是這個h5app的入口,我們可以在裏面隨便寫一個按鈕, 然後點擊測試我們的插件是否被調用

image.png

2.2 經大家反饋, js方法直接寫在index.html可能存在問題,因此提供一種新方法,解決兼容的問題

聲明按鈕.png

按鈕事件.png

重點我們在插件的plugin.xml中聲明的clobbers 兩者一定要保持一致,否則一直會出現 無法“捕獲到引用的錯誤” 錯誤。

配置JS引用組件名稱.png

至此,教程完畢, 如果還有不懂的地方,歡迎大家留言給我,最後謝謝大家!
由於經常會用到一些命令,感覺輸入很麻煩 , 所以自己做了一款桌面應用, 如果大家有興趣,請前往下
CordovaHelp.jar下載我的應用,有能力的,可以自行編譯哦. 如有不完善的地方, 可隨時與我溝通.

附上我的郵箱,給我發郵件:[email protected]如有任何問題,都可以聯繫我.

PS:很多朋友反饋說這個教程太過基礎, 照着你上面寫,並不能完全能夠學會, 因此,後續我會加強版,通過手寫一個插件重點講一些需要注意的地方.

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章