ionic2自定義cordova插件開發以及使用

來源：懂視網責編：小OO 時間：2020-11-27 20:17:55

ionic2自定義cordova插件開發以及使用

如何寫一個cordova 用于ionic2項目中呢，在搜索了一番之后，千篇一律，我都懷疑那些文章是不是全部都是復制來復制去的，而且都不是很詳細。我自己也搗鼓了一下午，踩了很多坑。所以特此寫這下這篇，記錄一下。假設需求是寫一個日志插件，可以將日志寫在手機的sdcard中。1.安裝plugman。npm install -g plugman。2.creat一個插件框架。plugman creat --name 插件名字 --plugin_id 插件id --plugin_version 插件版本號。例如。代碼如下：

推薦度：

點擊下載本文 文檔為doc格式

導讀如何寫一個cordova 用于ionic2項目中呢，在搜索了一番之后，千篇一律，我都懷疑那些文章是不是全部都是復制來復制去的，而且都不是很詳細。我自己也搗鼓了一下午，踩了很多坑。所以特此寫這下這篇，記錄一下。假設需求是寫一個日志插件，可以將日志寫在手機的sdcard中。1.安裝plugman。npm install -g plugman。2.creat一個插件框架。plugman creat --name 插件名字 --plugin_id 插件id --plugin_version 插件版本號。例如。代碼如下：

這篇文章主要為大家詳細介紹了ionic2自定義cordova插件開發以及使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下

如何寫一個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

重點來了，項目下的 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 打開

我們可以看到這個