如何寫一個(gè)cordova 用于ionic2項(xiàng)目中呢,在搜索了一番之后,千篇一律,我都懷疑那些文章是不是全部都是復(fù)制來(lái)復(fù)制去的,而且都不是很詳細(xì)。我自己也搗鼓了一下午,踩了很多坑。所以特此寫這下這篇,記錄一下。
假設(shè)需求是 寫一個(gè)日志插件,可以將日志寫在手機(jī)的sdcard中。
1.安裝plugman
npm install -g plugman
2.creat一個(gè)插件框架
plugman creat --name 插件名字 --plugin_id 插件id --plugin_version 插件版本號(hào)
例如:
代碼如下:
plugman create --name cordovaHeaLog --plugin_id cordova-plugin-hea-log --plugin_version 1.0
回車然后將生成這樣一個(gè)結(jié)構(gòu)的項(xiàng)目
3.添加安卓平臺(tái)支持
plugman platform add --platform_name android
我們可以看到src 下多了一個(gè)android文件夾 以及下面多了一個(gè)java文件。
4.實(shí)現(xiàn)日志功能
在src/android 我添加了一個(gè)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中的路徑 // 日志的
修改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ù)不可為空"); } } }
接下來(lái)修改 www/cordovaHeaLog.js.js
重點(diǎn)來(lái)了,項(xiàng)目下的 plugin.xml文件,我在這里踩了好久的坑,才跳出來(lái)。
我們將改成這樣
<?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
如果是添加本地的插件是這樣添加的 比如我自定義插件是這樣添加的
我的這個(gè)插件在這個(gè)路徑下E:\cordovaHeaLog那我就這樣添加
cordova plugin add E:\cordovaHeaLog
解釋:為什么是addcordova-plugin-hea-log 呢 請(qǐng)往上翻 因?yàn)閜lugin.xml里的id 是cordova-plugin-hea-log
結(jié)果:
6.添加安卓平臺(tái),設(shè)置權(quán)限,使用插件,運(yùn)行查看結(jié)果
添加安卓平臺(tái)
cordova platform add android
然后在項(xiàng)目的這個(gè)路徑下 HeaIonic/android/AndroidManifest.xml 這個(gè)文件
添加權(quán)限 因?yàn)橐獙懭肴罩驹趕dcard
<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 這個(gè)路徑下的這個(gè)文件cordova_plugins.js 打開(kāi)
我們可以看到這個(gè)
我們?cè)陧?yè)面上這樣使用
圈起來(lái)的是添加的代碼
然后 ionic serve ,接著cordova build android
用android studio 打包項(xiàng)目 運(yùn)行,關(guān)于如何 打包項(xiàng)目請(qǐng)看這里→ionic2 使用 cordova 打包成安卓apk
結(jié)果:調(diào)用插件日志寫入成功
總結(jié):
1.感覺(jué)自己在plugin.xml 配置出現(xiàn)最多問(wèn)題,所以請(qǐng)先了解plugin.xml 如何進(jìn)行配置。
2.還有比如logUtil.java 文件,可以寫好測(cè)試功能沒(méi)問(wèn)題后再?gòu)?fù)制進(jìn)插件里面。
3.關(guān)于調(diào)試,添加插件后出現(xiàn)問(wèn)題,可以在android studio 中的Logcat 窗口查看是哪里出現(xiàn)了問(wèn)題并進(jìn)行調(diào)試,它會(huì)輸出是什么問(wèn)題啊,然后自行解決。一開(kāi)始我也是一臉懵逼,不知道在哪里進(jìn)行插件的調(diào)試寫好后,也不是一次性就過(guò)完美的總要調(diào)試看看哪里會(huì)有出錯(cuò)的嘛,畢竟還是小菜鳥一只。
參考于:Android插件開(kāi)發(fā)指南 →Android Plugin Development Guide
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com