前言

寫(xiě)作目的：由于第一次接觸制作插件過(guò)程，當(dāng)中遇到很多問(wèn)題不知道如何下手，寫(xiě)此教程也是為了給大家學(xué)習(xí)插件制作時(shí)，提供一些思路和解決方案， 也為了記錄自己當(dāng)初學(xué)習(xí)時(shí)出現(xiàn)的問(wèn)題！

* l 使用工具如下：Android studio

* l 開(kāi)發(fā)環(huán)境：基于Node.js

* l 使用插件：cordova 、plugman（生成插件工具）

第一步： 配置環(huán)境

請(qǐng)先去安裝好Node.js，然后安裝好cordova 如果不會(huì)安裝請(qǐng)點(diǎn)擊下面鏈接：http://cordova.axuer.com/

第二步：默認(rèn)你已經(jīng)完成第一步，接下來(lái)我們創(chuàng)建一個(gè)Cordova項(xiàng)目

創(chuàng)建項(xiàng)目的格式如下：

 cordova create [文件名] [包名]  

 比如： cordova create Demo com.senjoeson.demo 

第三步：添加你要生成哪個(gè)平臺(tái)的插件

首先我們進(jìn)入該cordova項(xiàng)目，比如 cd demo

注：如果你不知道當(dāng)前有哪些平臺(tái)，請(qǐng)執(zhí)行cordova platform list

我這里就先默認(rèn)添加我們安卓平臺(tái)吧

  cordova platform add android

第四步：安裝plugman插件并創(chuàng)建一個(gè)插件

安裝很簡(jiǎn)單，就和安裝cordova一樣簡(jiǎn)單

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

創(chuàng)建插件的話 建議你不要?jiǎng)?chuàng)建在cordova項(xiàng)目中

我們可以進(jìn)行cd .. 進(jìn)行退回到上一級(jí)目錄

第五步 編寫(xiě)生成插件中的安卓代碼

我們打開(kāi)插件目錄中的src目錄，發(fā)現(xiàn)目錄是空的，這里我們需要手動(dòng)添加android目錄

然后創(chuàng)建一個(gè)java文件，在java文件中，必須指定一個(gè)入口去繼承CordovaPlugin

當(dāng)然也可以使用命令進(jìn)行生產(chǎn)操作:(此命在插件根目錄下執(zhí)行哦)

plugman platform add --platform_name [platform]      //platform 只能寫(xiě)ios或者android

備注：插件就類似一個(gè)java程序，必須要有一個(gè)入口，當(dāng)該入口被加載，才會(huì)去識(shí)別該程序的其他類或者方法等（本人是這么理解的?。?/code>

比如：

image.png

寫(xiě)到這里，我們插件的安卓代碼已經(jīng)完成了，但是插件目前還沒(méi)有辦法識(shí)別到我們寫(xiě)的java類和java方法，因此，我們需要在plugin.xml文件對(duì)我們寫(xiě)的東西進(jìn)行聲明

image.png

完成plugin.xml修改后，按理說(shuō) ，插件部分算是完成了對(duì)吧？但是別忘記了，我們還沒(méi)有去配置package.json，也就是該插件信息，沒(méi)有這個(gè)文件，我們添加插件時(shí)會(huì)出現(xiàn)錯(cuò)誤的！

我們執(zhí)行進(jìn)入插件目錄，執(zhí)行 npm init

按照括號(hào)的提示寫(xiě)比如如下圖，完成后，我們執(zhí)行下一步。

image.png

第六步，添加插件到cordova項(xiàng)目并完成調(diào)用操作

• 1.添加插件到cordova項(xiàng)目中

記住兩個(gè)命令：添加和刪除插件

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

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

添加插件的原理（針對(duì)安卓）：就是把我們自己做好的插件，添加到Android項(xiàng)目的assets目錄中，因此每次修改了插件內(nèi)容的話都需要移除并重新添加.

• 2.完成調(diào)用操作

2.1 打開(kāi)cordova項(xiàng)目，找到www/index.html, index.html是這個(gè)h5app的入口，我們可以在里面隨便寫(xiě)一個(gè)按鈕, 然后點(diǎn)擊測(cè)試我們的插件是否被調(diào)用

image.png

2.2 經(jīng)大家反饋, js方法直接寫(xiě)在index.html可能存在問(wèn)題,因此提供一種新方法,解決兼容的問(wèn)題

聲明按鈕.png

按鈕事件.png

重點(diǎn)：我們?cè)诓寮膒lugin.xml中聲明的clobbers 兩者一定要保持一致，否則一直會(huì)出現(xiàn) 無(wú)法“捕獲到引用的錯(cuò)誤” 錯(cuò)誤。

配置JS引用組件名稱.png

至此，教程完畢， 如果還有不懂的地方，歡迎大家留言給我，最后謝謝大家！
由于經(jīng)常會(huì)用到一些命令,感覺(jué)輸入很麻煩 , 所以自己做了一款桌面應(yīng)用, 如果大家有興趣,請(qǐng)前往下
CordovaHelp.jar下載我的應(yīng)用,有能力的,可以自行編譯哦. 如有不完善的地方, 可隨時(shí)與我溝通.

附上我的郵箱,給我發(fā)郵件:senjoeson@foxmail.com如有任何問(wèn)題,都可以聯(lián)系我.

PS:很多朋友反饋說(shuō)這個(gè)教程太過(guò)基礎(chǔ), 照著你上面寫(xiě),并不能完全能夠?qū)W會(huì), 因此,后續(xù)我會(huì)加強(qiáng)版,通過(guò)手寫(xiě)一個(gè)插件重點(diǎn)講一些需要注意的地方.