1. 程式人生 > >Ionic自定義外掛開發(附Demo)

Ionic自定義外掛開發(附Demo)

前言
ionic是目前比較火的一個移動端混合開發框架.其中外掛開發是其實現混合開發的主要方式.這裡我就大概記錄下自己自定義外掛的一些心得.如有不好之處,還望各位看官指出。

建立自定義外掛


1.安裝plugman,該工具主要用於建立一個自定義的外掛

npm install -g plugman

2.建立一個外掛框架---例如:plugman creat --name 外掛名字 --plugin_id 外掛id --plugin_version 外掛版本號,外掛可建立在磁碟的任意位置

plugman create --name MyPlugin --plugin_id com.plugin.myPlugin --plugin_version 0.0.1

使用命令建立完成之後會生成如下檔案

3.新增平臺支援,常用的有兩種平臺,android和ios

plugman platform add --platform_name android

如果需要改成新增ios平臺,只需要把android改成ios即可,當然,也可以將這兩個平臺全部新增,新增平臺之後,會新增如何檔案,如圖

至此自定義一個外掛到此告一段落.

自定義外掛檔案作用說明

1.MyPlugin.js作用是通過js暴露外掛的功能給ionic,這個我們就能夠在ionic中呼叫java方法

2.MyPlugin.java主要用於存放java程式碼,我們需要呼叫的java方法都需要放在這裡面,

自定義外掛需要繼承CordovaPlugin類,並且覆蓋execute方法。我們簡單看看這個類是什麼意思,主要看方法execute(String action, JSONArray args, CallbackContext callbackContext)。 引數action是用來判斷執行哪個方法,args是json格式的引數,callbackContext響應返回結果。如圖

3.package.json這個不需要關注,在外掛目錄下使用npm init即可生成,這個一般新增外掛的時候可能需要用到,具體作用我這裡就不闡述了,可以自行百度下.

4.plugin.xml主要用來關聯外掛中的各個檔案,一般不需要修改,如有新增so庫或者jar包,需要在此檔案中宣告.如我在外掛中新增自定義的jar包.

則需要在plugin.xml中加上

<source-file src="src/android/util.jar" target-dir="libs" />

這部分是外掛檔案作用說明.

外掛的安裝和外掛的解除安裝

1.安裝外掛

自定義好外掛之後,如果我們需要使用外掛,那麼還需要在專案中新增外掛,新增外掛的命令如下

cordova plugin add E:\MyPlugin

其中 E:\MyPlugin是你的自定義外掛生成路徑.執行外掛新增後會在專案中生成一個plugin的檔案,裡面就會出現我們剛新增的外掛

到這一步我們自定義的外掛就已經新增好了.

2.解除安裝外掛

在開發過程中,我們難免要去修改之前的外掛,這個時候如有對外掛進行修改,一定要先解除安裝之前的這個外掛,然後再次重新執行安裝的方法,生成的外掛才會生效.解除安裝外掛我們是根據外掛的名稱來解除安裝的,這時候需要先檢視已經安裝的外掛有哪些,檢視已安裝外掛命令

cordova plugin   該命令用於檢視專案已安裝外掛

下面列出的就是我們該ionic專案已有的外掛

這時候我們就可以通過外掛的名稱來解除安裝已經安裝的外掛了,命令如下

cordova plugin remove com.plugin.myPlugin 0.0.1; "MyPlugin"

remove後面就是我們需要解除安裝的外掛

到此外掛的安裝和解除安裝到此結束

自定義外掛開發需要注意的事項:

1.安裝外掛時如果提示外掛找不到package.json檔案,需要切換自定義外掛目錄下,使用命令生成該檔案,命令如下

npm init

2.安裝外掛之後對專案進行打包apk操作提示config.xml檔案錯誤,原因是你的安卓版本太高,需使用如下命令進行android版本替換

ionic cordova platform add [email protected] (安裝指定版本android)

然後刪除專案下的platform平臺,重新android或者ios平臺的新增

3.修改外掛使記得一定要修改外掛本身,不要對安裝好的外掛檔案進行修改,因為那樣操作是無效的

4.外掛修改後一定要記得先解除安裝再重新安裝,否則修改的外掛執行無效

我會把demo和自定義的外掛檔案上傳到附件中,有需要的可自行下載查閱.

本部落格有參考如下部落格:

參考Demo下載地址: