ionic2自定義cordova插件開發(fā)以及使用（Android）
如何寫一個cordova 用于ionic2項目中呢，在搜索了一番之后，千篇一律，我都懷疑那些文章是不是全部都是復(fù)制來復(fù)制去的，而且都不是很詳細(xì)。我自己也搗鼓了一下午，踩了很多坑。所以特此寫這下這篇，記錄一下。
假設(shè)需求是 寫一個日志插件，可以將日志寫在手機的sdcard中。
1.安裝plugman
npm install -g plugman
2.creat一個插件框架
plugman creat --name 插件名字 --plugin_id 插件id --plugin_version 插件版本號
例如：
回車然后將生成這樣一個結(jié)構(gòu)的項目
3.添加安卓平臺支持
plugman platform add --platform_name android
我們可以看到src 下多了一個android文件夾 以及下面多了一個java文件。
4.實現(xiàn)日志功能
在src/android 我添加了一個logUtil.java文件。
里面的內(nèi)容如下：
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卡中日志文件的最多保存天數(shù)
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("參數(shù)不可為空");
}
}
}
接下來修改 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
結(jié)果：
6.添加安卓平臺，設(shè)置權(quán)限，使用插件，運行查看結(jié)果
添加安卓平臺
cordova platform add android
然后在項目的這個路徑下 HeaIonic/android/AndroidManifest.xml 這個文件
添加權(quán)限 因為要寫入日志在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 打包項目 運行，關(guān)于如何 打包項目請看這里→ionic2 使用 cordova 打包成安卓apk
結(jié)果：調(diào)用插件日志寫入成功
總結(jié)：
1.感覺自己在plugin.xml 配置出現(xiàn)最多問題，所以請先了解plugin.xml 如何進(jìn)行配置。
2.還有比如logUtil.java 文件，可以寫好測試功能沒問題后再復(fù)制進(jìn)插件里面。
3.關(guān)于調(diào)試，添加插件后出現(xiàn)問題，可以在android studio 中的Logcat 窗口查看是哪里出現(xiàn)了問題并進(jìn)行調(diào)試，它會輸出是什么問題啊，然后自行解決。一開始我也是一臉懵逼，不知道在哪里進(jìn)行插件的調(diào)試寫好后，也不是一次性就過完美的總要調(diào)試看看哪里會有出錯的嘛，畢竟還是小菜鳥一只。
參考于：Android插件開發(fā)指南 →Android Plugin Development Guide
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
EJS是一種簡單而靈活的模板引擎，用于將數(shù)據(jù)動態(tài)渲染到網(wǎng)頁上，本文將從介紹EJS的背景和起源開始，詳細(xì)介紹EJS的特性和使用方法，包括安裝配置、基本語法和標(biāo)簽、數(shù)據(jù)綁定和邏輯控制、模板的繼承和包含等方面，感興趣的同學(xué)跟著小編一起來學(xué)習(xí)吧2023-06-06
Typescript 中的 interface 和 type 到底有什么區(qū)別詳解
這篇文章主要介紹了Typescript 中的 interface 和 type 到底有什么區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
使用微信小程序API，調(diào)用微信的各種內(nèi)置能力。
微信小程序如何使用小程序API，去調(diào)用微信提供的各種內(nèi)置能力（即微信API）。小程序開發(fā)框架提供豐富的微信原生API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。2022-12-12
Js+Ajax,Get和Post在使用上的區(qū)別小結(jié)
下面小編就為大家?guī)硪黄狫s+Ajax,Get和Post在使用上的區(qū)別小結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要給大家介紹了關(guān)于Webpack 4如何動態(tài)切割JS注入文件名的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Webpack4具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
JavaScript輸出數(shù)據(jù)的多種方式小結(jié)
這篇文章主要介紹了 JavaScript 輸出數(shù)據(jù)的多種方式,包括使用彈出警告框、寫入 HTML 文檔、使用 innerHTML 寫入 HTML 元素、寫入瀏覽器控制臺,還講解了操作 HTML 元素的方法,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了送你43道JS面試題,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要介紹了Vue 組件渲染詳情，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了JS實現(xiàn)面向?qū)ο罄^承的5種方式,結(jié)合實例形式分析了JavaScript面向?qū)ο罄^承功能的5種常見實現(xiàn)方法原理與操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05