如何為ionic?

Tags: 平臺, 插件,

Ionic(ionicframework)是一個開源的高級的Html5混合型移動App開發框架,ionic基於HTML5和AngularJS,使得它非常容易打造絢麗的、交互式的移動應用程序。但有些功能受限於硬件,需要使用各個平臺的特有功能,這時可以通過插件來實現,本文就如何為ionic webapp開發自定義插件做引路。

工具/原料

nodejs v0.12.4

IntelliJ IDEA

mac 或 windows

環境說明

nodejs的安裝,Ionic安裝這裡不做說明,默認大家都安裝配置好了環境。

安裝plugman新建插件

安裝cordova插件管理工具,plugman

在終端中輸入:

npm install -g plugman

安裝命令與安裝結果如下:

如何為ionic webapp開發自定義插件

如何為ionic webapp開發自定義插件

新建一個插件myEcho,用彈出框來顯示我們的內容。

plugman create --name --plugin_id --plugin_version [--path ] [--variable NAME=VALUE]

把其中的 替換為 myEcho;

替換為 com.lulee007.myEcho

替換為 0.0.1

[--path ] [--variable NAME=VALUE] 這兩個是可選參數,這裡不寫了。這樣會在當前目錄下(desktop)創建一個新的目錄myEcho

在終端中輸入:

plugman create --name myEcho --plugin_id com.lulee007.myEcho --plugin_version 0.0.1

執行命令後會在當前目錄下生成一個文件夾,我這裡的目錄是在桌面下的myEcho.

如何為ionic webapp開發自定義插件

向myEcho項目中添加一個android平臺

plugman platform add --platform_name

替換為 android

接著在終端中繼續輸入:

cd myEcho

然後輸入:

plugman platform add --platform_name android

這時候查看我們的myEcho目錄下的 src會新增一個目錄android裡面會有一個java文件:myEcho.java

如何為ionic webapp開發自定義插件

插件項目修改配置

項目結構組成:

src 對應不同的平臺,www 放我們的 javascript 文件,plugin.xml 是插件的配置文件。

如何為ionic webapp開發自定義插件

先來看看配置文件:plugin.xml

解釋一下關鍵的幾個元素:

id: 插件的標識,即一開始我們新建插件輸入的 ID,com.lulee007.myEcho

name:插件的名稱,新建插件時輸入的名稱,myEcho

description:描述信息

js-module:對應我們的 javascript 文件,src 屬性指向 www/myEcho.js

platform:支持的平臺,這裡僅有一個 android,這是剛才我們通過“ plugman platform add --platform_name android ”添加進來的。

其中android下的config-file:

這裡是android插件的配置信息,當安裝到應用時,會添加到目標平臺android下的 res/xml/config.xml 文件中,並將 src/android/myEcho.java,複製到 android 的 package 包中。

如何為ionic webapp開發自定義插件

看下javascript文件:myEcho.js

文件內容很簡單,第一句是引入cordova下的exec庫

第二句是我們插件的執行插件方法,

exec(success, error, "myEcho", "coolMethod", [arg0]);

success:調用成功時的回調函數,

error:調用出錯時的回調函數,

"myEcho":插件名稱,

"coolMethod":執行插件裡的方法,

[arg0]:可選參數,執行方法的參數數組。

這裡我們把“exports.coolMethod”改為“window.plugins.myEcho”

並在“exports.coolMethod”上面添加一行:

window.plugins = window.plugins {};

同樣把“coolMethod”也改為“echo”。

最終修改後的js文件內容如圖:

如何為ionic webapp開發自定義插件

如何為ionic webapp開發自定義插件

接著修改myEcho.java文件

可以看到myEcho繼承自CordovaPlugin,並重載了execute方法。

在execute方法裡有個判斷,action.equals("coolMethod"),這表示如果執行的是我們的方法那就繼續執行內部的邏輯並返回true,如果不是則直接返回false結束。

這裡我們修改下方法:“coolMethod”為“echo”,並把方法coolMethod名稱修改為echo。

最終修改後的java文件內容如下:

如何為ionic webapp開發自定義插件

如何為ionic webapp開發自定義插件

安裝測試插件

這裡用事先準備好的ionic項目myFirstApp來測試我們的插件。

這裡不再贅述ionic項目的創建,具體可以參考我的另一篇經驗。

直接在裡搜索:如何用ionicframework進行混合移動應用開發

第一篇就是。

如何為ionic webapp開發自定義插件

打開終端,在終端中輸入:

cd myFirstApp

切換到myFirstApp目錄下

輸入:

cordova plugin add ../myEcho

顯示已經安裝myEcho插件到ios和android平臺下

如何為ionic webapp開發自定義插件

打開myFirstApp目錄,可以看到在plugins目錄下多了一個com.lulee007.myEcho目錄。

如何為ionic webapp開發自定義插件

打開myFirstApp目錄下的www/js/controllers.js

添加如下代碼到最後“PlaylistCtrl”位置:

window.plugins.myEcho("echo my text",

function(data){

alert(data);

},

function(error){

alert(error);

});

如何為ionic webapp開發自定義插件

重新build然後run進行調試:

在終端裡輸入:

ionic build android

然後輸入:

ionic run --device android

執行命令後結果如下圖:

如何為ionic webapp開發自定義插件

如何為ionic webapp開發自定義插件

這時android設備上已經運行了我們的應用:

隨便點擊list的一個項,會彈出一個對話框,內容是“echo my text”

如何為ionic webapp開發自定義插件

如何為ionic webapp開發自定義插件

最後如果我們在測試中需要對插件進行更新,這時候只需要執行命令:

cordova plugin remove com.lulee007.myEcho

這裡的“com.lulee007.myEcho”就是我們最開始新建插件的時候的插件ID。

重新安裝還是這個命令:

cordova plugin add path/to/your/plugin/dir

把“path/to/your/plugin/dir”替換為自己的插件的目錄就好了。

相關問題答案