>  기사  >  웹 프론트엔드  >  ionic2 맞춤형 코르도바 플러그인 개발 및 사용

ionic2 맞춤형 코르도바 플러그인 개발 및 사용

陈政宽~
陈政宽~원래의
2017-06-28 15:01:321400검색

이 글은 주로 ionic2 커스텀 코르도바 플러그인의 개발과 사용법을 자세하게 소개하고 있습니다. 관심 있는 친구들은 참고해 보세요. ionic2 프로젝트용 코르도바 작성 방법은? 그럼에도 불구하고 나는 그 기사들이 모두 반복적으로 복사되었는지 의심했고, 그 중 어느 것도 매우 상세하지 않았습니다. 나 역시 오후 내내 이것저것 만지작거리며 많은 함정을 밟았다. 그래서 나는 그것을 기록하기 위해 이 글을 쓰고 있다.

휴대폰의 SD카드에 로그를 쓸 수 있는 로그 플러그인을 작성하는 것이 요구사항이라고 가정해 보겠습니다.

1.plugman 설치

npm install -g plugman

2. 플러그인 프레임워크 생성

plugman creat --name 플러그인 이름 --plugin_id 플러그인 ID --plugin_version 플러그인 버전 번호

예:


코드는 다음과 같습니다.

plugman create --name cordovaHeaLog --plugin_id cordova-plugin-hea-log --plugin_version 1.0

Enter를 누르면 이러한 구조의 프로젝트가 생성됩니다

3. Android 플랫폼 지원 추가

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

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=&#39;1.0&#39; encoding=&#39;utf-8&#39;?>
<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는 왜 플러그인에 ID가 있으므로 위로 스크롤하세요. Android 플랫폼을 추가하세요

cordova platform add android

그런 다음 프로젝트 HeaIonic/android/AndroidManifest.xml 파일의 경로에

Add 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를 사용하여 Android apk

로 패키징합니다. 결과: 플러그인 호출

로그 쓰기 Success

요약:

1. 나는plugin.xml 구성에 가장 많은 문제가 있다고 생각하므로, 먼저plugin.xml 구성 방법을 이해하시기 바랍니다.

2. logUtil.java 파일도 있습니다. 테스트 함수를 작성한 후 플러그인에 복사할 수 있습니다.

3. 디버깅에 관해서는 플러그인을 추가한 후 문제가 발생하면 안드로이드 스튜디오의 Logcat 창에서 문제가 발생한 위치를 확인하고 디버깅할 수 있으며, 문제가 무엇인지 출력한 후 스스로 해결할 수 있습니다. 처음에는 플러그인을 어디에서 디버깅해야할지 몰랐습니다. 작성하고 나면 즉시 완벽하지 않습니다. 결국 어디에서 실수가 있는지 확인해야합니다. 초보자.

참고: 안드로이드 플러그인 개발 가이드 →안드로이드 플러그인 개발 가이드

위 내용은 모두의 학습에 도움이 되기를 바라며, 모두가 Script Home을 응원해 주시길 바랍니다.

위 내용은 ionic2 맞춤형 코르도바 플러그인 개발 및 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.