사용자 정의 Cordova 플러그 인 설명

1. 코르도바 의 기초 점
하 이브 리드 애플 리 케 이 션 에 서 는 기 존의 코르도바 플러그 인 을 통 해 H5 에서 모 바 일 네 이 티 브 기능 을 쉽게 호출 할 수 있 습 니 다.기 존의 Cordova 플러그 인 은 평소의 대부분의 개발 수 요 를 만족 시 킬 수 있 습 니 다. 그러나 가끔 은 적당 한 플러그 인 을 찾 지 못 하거나 찾 은 플러그 인 에 만족 하지 않 는 부분 이 있 으 면 플러그 인 을 만 들 거나 고 쳐 써 야 합 니 다. 이 럴 때 Cordova 플러그 인 에 관 한 지식 을 알 아야 합 니 다.
그럼 Cordova 플러그 인의 기본 포 인 트 는 무엇 입 니까?사실은 네 이 티 브 코드 호출 방법 을 js 의 통일 인터페이스 로 매 핑 하여 H5 가 사용 할 수 있 도록 하 는 것 일 뿐이다.
Cordova 사용자 정의 플러그 인의 공식 문서
2. 기 존의 응용 구 조 를 관찰한다.
Cordova 기술 을 기반 으로 한 hybird app 의 개발 디 렉 터 리 를 열 고 플랫폼 (android, ios 등) 과 플러그 인 을 설치 한 적 이 있 으 면 구조 가 대체적으로 이 모양 인 것 을 발견 할 수 있 습 니 다.

├── platforms
|    ├── android
|    ├── ios
|    └── ...
├── plugins
|    ├── org.apache.cordova.device
|    └── ...
├── config.xml
└── www

이곳 의 platforms 는 우리 가 지원 하 는 플랫폼 디 렉 터 리 입 니 다. plugins 는 우리 가 설치 한 플러그 인 디 렉 터 리 입 니 다. config. xml 는 응용 설정 정보 (응용 이름, 설명 등) 이 고 ww 는 우리 의 웹 프로젝트 디 렉 터 리 입 니 다.
즉, 새로운 플러그 인 을 만 들 고 설치 하면 plugins 디 렉 터 리 에 추가 되 고 다른 파일 정 보 를 수정 할 수 있 습 니 다.그럼 다음 단 계 는 검증 을 시작 하 겠 습 니 다.
3. plugman 을 사용 하여 Cordova 플러그 인 개발
독립 된 플러그 인의 디 렉 터 리 기본 구 조 는 다음 과 같 습 니 다.

MyToast
├── src
|    ├── android
|    |    └── MyToast.java
|    ├── ios
|    └── ...
├── www
|    └── MyToast.js
└── plugin.xml

src 는 각 플랫폼 의 네 이 티 브 코드 를 저장 합 니 다. plugin. xml 는 플러그 인 설명 및 설정 파일 입 니 다. ww 는 웹 프로젝트 디 렉 터 리 (사실은 MyToast. js 라 는 js 미들웨어) 입 니 다. 우 리 는 수 동 으로 이 몇 개의 디 렉 터 리 와 파일 을 만 들 수 있 습 니 다. 그러나 이것 은 좋 은 방식 이 아 닙 니 다. 효율 이 높 지 않 기 때문에 추천 하 는 방식 은 plumam 을 사용 하 는 것 입 니 다.1. 우선 plumam 명령 행 도 구 를 설치 합 니 다.npm install -g plugman
2 、 설치 후 plugin 만 들 기
plumam 을 사용 하여 플러그 인 을 만 드 는 명령 은:
plugman create --name pluginName --plugin_id pluginID --plugin_version version [--path path ] [--variable NAME=VALUE ]
매개 변수 설명:
pluginName: MyToast 와 같은 플러그 인 이름;pluginID: 플러그 인 id, 예 를 들 어: cordova - plugin - mytoast;version: 버 전 번호, 예 를 들 어: 0.0.1;path: 플러그 인 이 저장 하 는 절대 또는 상대 경로;variable NAME = VALUE: Woodstream 과 같은 확장 인자
따라서 명령 줄 에 다음 코드 를 입력 하 십시오. plugman create --name MyToast --plugin_id cordova-plugin-mytoast --plugin_version 0.0.1 그러면 현재 디 렉 터 리 에 MyToast 플러그 인 을 만 들 고 플러그 인 디 렉 터 리 에 들 어가 plugin. xml 를 열 어 보 며 다음 내용 과 설명 을 주의 하 십시오.

plugin
- id：      
- version：   
- js-module
    src：js         （www      js）
    name：    
    clobbers/merges
        target：H5     js     （ts       ）
- platform
    name：    android | ios
    source-file
        src：  
        tartget-dir：              
        feature
             name：js            （  ）
        uses-permission：      

즉, 우 리 는 이러한 플러그 인 을 쓸 수 있 습 니 다. 원본 코드 를 쓰 지 않 고 권한 을 설정 하고 파일 을 복사 하기 위해 서 입 니 다.
plugin. xml 파일 을 소화 한 후 명령 을 눌 러 플러그 인 디 렉 터 리 에 들 어 갑 니 다. cd MyToast 지원 플랫폼 plugman platform add --platform_name android plugman platform add --platform_name ios 을 추가 하면 각각 src / android / myToast. java 와 src / ios / MyToast. m 두 개의 파일 을 만 듭 니 다. 여 기 는 android 코드 만 보 여 줍 니 다. 그래서 MyToast. java 를 열 어 관찰 합 니 다.

public class MyToast extends CordovaPlugin {

  @Override
  public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    if (action.equals("coolMethod")) {
        String message = args.getString(0);
        this.coolMethod(message, callbackContext);
        return true;
    }
    return false;
  }

  private void coolMethod(String message, CallbackContext callbackContext) {
    if (message != null && message.length() > 0) {
        callbackContext.success(message);
    } else {
        callbackContext.error("Expected one non-empty string argument.");
    }
  }
}

그 중에서 execute 은 필수 적 인 방법 이다. www 디 렉 터 리 에 있 는 MyToast.js 과 관련 된 것 이다. MyToast.js 와 MyToast.java 가 어떻게 관련 되 는 지 는 Cordova 설명 plugin.xml 에 의 해 처리 되 고 내부 세부 사항 은 알 필요 가 없 으 며 방법 형식 에 따라 작성 하면 된다.CallbackContext 컨 텍스트 를 바 꾸 기 위해 coolMethod 선택 할 수 있 는 기본 적 인 생 성 예제 방법 입 니 다. 보통 원생 코드 를 쓰 고 우 리 는 그것 을 우리 가 원 하 는 것 으로 바 꾸 었 습 니 다. showToast 그리고 기본 적 인 원생 코드 를 보충 한 다음 에 마지막 파일 은 이렇게 되 었 습 니 다.

public class MyToast extends CordovaPlugin {

  @Override
  public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    if (action.equals("showToast")) {
        String message = args.getString(0);
        this.showToast(message, callbackContext);
        return true;
    }
    return false;
  }

  private void showToast(String message, CallbackContext callbackContext) {
    if (message != null && message.length() > 0) {
        Activity activity = this.cordova.getActivity();
        Toast.makeText(activity, message, Toast.LENGTH_SHORT).show();
        callbackContext.success(message);
    } else {
        callbackContext.error("Expected one non-empty string argument.");
    }
  }
}

그리고 www / MyToast. js 를 열 면 다음 과 같이 수정 합 니 다.

  //showToast    js      ，         
  exports.showToast = function(msg, success, error) {
      //"showToast"  MyToast.java   action 
      exec(success, error, "MyToast", "showToast", [msg]);
  };

3. package. json 파일 을 만 드 는 것 은 원래 상기 절 차 를 마치 면 하나의 플러그 인 이 완 료 됩 니 다. 그러나 나중에 Cordova 버 전 은 package. json 을 추가 하여 플러그 인 을 관리 하 라 고 요 구 했 습 니 다. plumam 은 우리 에 게 이런 파일 을 만 들 지 않 았 습 니 다. 그래서 우 리 는 수 동 으로 만 들 었 습 니 다. npm init 명령 을 통 해 package. json 을 만 들 었 습 니 다.안에 있 는 인 자 는 plugin. xml 에서 가 져 오 면:

{
 "name": "MyToast",
  "version": "0.0.1",
  "description": "demo",
  "cordova": {
    "id": "com.demo.mytoast",
    "platforms": [
      "android"
    ]
  },
  "keywords": [],
  "author": "demo",
  "license": "MIT"
}

이런 플러그 인 은 개발 이 완성 되 었 다.
4. 개 발 된 플러그 인 설치
기 존 프로젝트 가 없 으 면 새로운 Cordova 프로젝트 를 만들어 테스트 할 수 있 습 니 다: cordova create hello com.example.hello HelloWorld 주:
hello: 프로젝트 폴 더 이름 com. example. hello: 프로젝트 패키지 이름 HelloWorld: 프로젝트 이름
그리고 이 Cordova 프로젝트 디 렉 터 리 에 들 어가 서 평소 플러그 인 을 추가 하 는 것 처럼 다음 명령 을 실행 합 니 다. (add 뒤 에는 플러그 인 이 있 는 로 컬 또는 네트워크 경로): cordova plugin add /Users/cordova/MyToast 항목 이 있 고 ionic 항목 이 있 으 면 명령 전에 ionic: ionic cordova plugin add /Users/cordova/MyToast 을 추가 합 니 다.
ionic 2 이상 에서 사용 할 때 임의의 ts 파일 을 열 고 머리 에 다음 과 같이 설명 합 니 다. declare let cordova: any; 그리고 호출 하면 됩 니 다. (일반 js 호출 이 라면 위의 단 계 를 절약 할 수 있 습 니 다): cordova.plugins.MyToast.showToast("hello"); // success, error 기타 명령
플러그 인 삭제: ionic cordova plugin remove XXXXX( plugin_id) 설 치 된 플러그 인 보기 ionic cordova plugin list