ionic2自定義cordova外掛開發以及使用(Android)

ionic2自定義cordova外掛開發以及使用(Android)

如何寫一個cordova 用於ionic2專案中呢,在搜尋了一番之後,千篇一律,我都懷疑那些文章是不是全部都是複製來複制去的,而且都不是很詳細。我自己也搗鼓了一下午,踩了很多坑。所以特此寫這下這篇,記錄一下。

假設需求是 寫一個日誌外掛,可以將日誌寫在手機的sdcard中。

1.安裝plugman


npm install -g plugman

2.creat一個外掛框架

plugman creat –name 外掛名字 –plugin_id 外掛id –plugin_version 外掛版本號

例如:

複製程式碼 程式碼如下:plugman create –name cordovaHeaLog –plugin_id cordova-plugin-hea-log –plugin_version 1.0

回車然後將生成這樣一個結構的專案

3.新增安卓平臺支援


plugman platform add --platform_name android

我們可以看到src 下多了一個android資料夾 以及下面多了一個java檔案。

4.實現日誌功能

在src/android 我新增了一個logUtil.java檔案。

裡面的內容如下:


package cordova.plugin.hea.log;
import android.os.Environment;
import java.io.BufferedWriter;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Calendar;
import java.util.Date;
public class logUtil{
private static int SDCARD_LOG_FILE_SAVE_DAYS = 180; // sd卡中日誌檔案的最多儲存天數
private static String LOG_PATH_SDCARD_DIR = Environment.getExternalStorageDirectory().toString() "/VP2/log/"; // 日誌檔案在sdcard中的路徑
// 日誌的輸出格式
private static SimpleDateFormat LogSdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
private static SimpleDateFormat logDay = new SimpleDateFormat("dd");
private static SimpleDateFormat logTime = new SimpleDateFormat("yyyy-MM");
/**
* 開啟日誌檔案並寫入日誌
*
* @return
* **/
public static void writeLogtoFile(String mylogtype, String tag, String text) {
delFile();
Date nowtime = new Date();
String needWriteMessage = LogSdf.format(nowtime)   " "   tag   "\n"   text "\n";
String logFileName;
String logFolder=logTime.format(new Date());
if(mylogtype=="error"){
logFileName="error(" logDay.format(new Date()) ").log";
}else if(mylogtype=="crash"){
logFileName="crash(" logDay.format(new Date()) ").log";
}else {
logFileName="info(" logDay.format(new Date()) ").log";
}
File file = new File(LOG_PATH_SDCARD_DIR logFolder);
if (!file.exists()) {
file.mkdirs();
}
File f = new File(LOG_PATH_SDCARD_DIR logFolder,logFileName);
try {
FileWriter filerWriter = new FileWriter(f, true);
BufferedWriter bufWriter = new BufferedWriter(filerWriter);
bufWriter.write(needWriteMessage);
bufWriter.newLine();
bufWriter.close();
filerWriter.close();
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 刪除制定的日誌檔案
* */
private static void delFile(){
String needDelFiel = logTime.format(getDateBefore());
File file = new File(LOG_PATH_SDCARD_DIR, needDelFiel );
if (file.exists()) {
file.delete();
}
}
private static Date getDateBefore() {
Date nowtime = new Date();
Calendar now = Calendar.getInstance();
now.setTime(nowtime);
now.set(Calendar.DATE, now.get(Calendar.DATE) - SDCARD_LOG_FILE_SAVE_DAYS);
return now.getTime();
}
}

修改src/android/cordovaHeaLog.java檔案


package cordova.plugin.hea.log;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import cordova.plugin.hea.log.logUtil;
/**
* This class echoes a string called from JavaScript.
*/
public class cordovaHeaLog extends CordovaPlugin {
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (action.equals("log")) {
this.log(args.getString(0),args.getString(1),args.getString(2), callbackContext);
return true;
}
return false;
}
private void log(String mylogtype, String tag,String text,CallbackContext callbackContext) {
if (mylogtype != null && mylogtype.length() > 0&&text!=null&&text.length()>0&&tag!=null&&tag.length()>0) {
logUtil.writeLogtoFile(mylogtype, tag, text);
callbackContext.success(mylogtype " " tag " " text);
} else {
callbackContext.error("引數不可為空");
}
}
}

接下來修改 www/cordovaHeaLog.js.js


var exec = require('cordova/exec');
exports.log = function(arg0,arg1,arg2,success, error) {
exec(success, error, "Logjava", "log", [arg0,arg1,arg2]);
};

重點來了,專案下的 plugin.xml檔案,我在這裡踩了好久的坑,才跳出來。

我們將改成這樣


<?xml version='1.0' encoding='utf-8'?>
<plugin id="cordova-plugin-hea-log" version="1" 
xmlns="http://apache.org/cordova/ns/plugins/1.0" 
xmlns:android="http://schemas.android.com/apk/res/android">
<name>cordovaHeaLog</name>
<js-module name="cordovaHeaLog" src="www/cordovaHeaLog.js">
<clobbers target="cordovaHeaLog" />
</js-module>
<platform name="android">
<config-file parent="/*" target="res/xml/config.xml">
<feature name="Logjava">
<param name="android-package" value="cordova.plugin.hea.log.cordovaHeaLog" />
</feature>
</config-file>
<config-file parent="/*" target="AndroidManifest.xml"></config-file>
<source-file src="src/android/cordovaHeaLog.java" target-dir="src/cordova/plugin/hea/log/cordovaHeaLog" />
<source-file src="src/android/logUtil.java" target-dir="src/cordova/plugin/hea/log/logUtil" />
</platform>
</plugin>

5.新增自定義外掛

一般情況下是這樣新增外掛的


cordova plugin add cordova-plugin-hea-log

如果是新增本地的外掛是這樣新增的 比如我自定義外掛是這樣新增的

我的這個外掛在這個路徑下E:\cordovaHeaLog那我就這樣新增


cordova plugin add E:\cordovaHeaLog

解釋:為什麼是addcordova-plugin-hea-log 呢 請往上翻 因為plugin.xml裡的id 是cordova-plugin-hea-log

結果:

6.新增安卓平臺,設定許可權,使用外掛,執行檢視結果

新增安卓平臺


cordova platform add android

然後在專案的這個路徑下 HeaIonic/android/AndroidManifest.xml 這個檔案

新增許可權 因為要寫入日誌在sdcard


<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> 
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

如何使用外掛呢

在HeaIonic/platforms/android/assets/www 這個路徑下的這個檔案cordova_plugins.js 開啟

我們可以看到這個

我們在頁面上這樣使用

圈起來的是新增的程式碼

然後 ionic serve ,接著cordova build android

用android studio 打包專案 執行,關於如何 打包專案請看這裡→ionic2 使用 cordova 打包成安卓apk

結果:呼叫外掛日誌寫入成功

 

總結:

1.感覺自己在plugin.xml 配置出現最多問題,所以請先了解plugin.xml 如何進行配置。

2.還有比如logUtil.java 檔案,可以寫好測試功能沒問題後再複製進外掛裡面。

3.關於除錯,新增外掛後出現問題,可以在android studio 中的Logcat 視窗檢視是哪裡出現了問題並進行除錯,它會輸出是什麼問題啊,然後自行解決。一開始我也是一臉懵逼,不知道在哪裡進行外掛的除錯寫好後,也不是一次性就過完美的總要除錯看看哪裡會有出錯的嘛,畢竟還是小菜鳥一隻。

參考於:Android外掛開發指南 →Android Plugin Development Guide

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

ionic cordova一次上傳多張圖片(類似input file提交表單)的實現方法VS2015在升級到Update2之後執行Cordova專案異常的解決方案教你用Cordova打包Vue專案的方法詳解cordova打包成webapp的方法cordova入門基礎教程及使用中遇到的一些問題總結