PhoneGap 플러그인 개발 프로세스

며칠 전에 Phone Gap 플러그인을 썼는데, 이 플러그인의 기능은 간단하다. 바로viewport 설정을 켜는 것이다.그러나 다른 플러그인에 비해 재미있는 점이 여러 군데 있는데, 아이폰갭의 원본 코드를 자세히 읽어서야 비로소 해결되었다.여기에는 PhoneGap 플러그인 개발의 절차와 이 플러그인 개발에 부딪힌 문제점을 기록합니다.
0.androidsdk,node를 먼저 설치합니다.js, 아이폰gap,plugman.CanTK 컴파일은 PhoneGap을 참조하십시오.
1. 플러그인으로 플러그인을 만듭니다.

plugman create --name ViewPort --plugin_id com.tangide.viewport --plugin_version 1.0.0

2. JAVA 코드 작성: src/android/ViewPort.java

package com.tangide.viewport;

import android.util.Log;
import org.json.JSONArray;
import org.json.JSONObject;
import org.json.JSONException;
import android.webkit.WebSettings;
import org.apache.cordova.CordovaWebView;
import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

public class ViewPort extends CordovaPlugin {
    private static final String LOG_TAG = "ViewPort";

    @Override
    public void initialize(CordovaInterface cordova, CordovaWebView webView) {
        final CordovaWebView wv = webView;
        super.initialize(cordova, webView);
        webView.post(new Runnable() {
            @Override
            public void run() {
                WebSettings ws = wv.getSettings();
                ws.setUseWideViewPort(true); 
                ws.setLoadWithOverviewMode(true);
                wv.reload();
                Log.d(LOG_TAG, "ViewPort Enabled");
            }
        });
    }

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        Log.d(LOG_TAG, "No Method In This Plugin");
        return false;
    }
}

여기 재미있는 것은 우리의 플러그인은 인터페이스를 제공하지 않고 초기화하는 것은 설정을 하는 것이다.그래서 initialize 함수가 중점이지만 두 가지 문제에 부딪혔다.
첫째, APP가 시작될 때 플러그인의 initialize 함수를 호출하지 않고 PhoneGap 플러그인 로드 프로세스를 자세히 연구한 후에plugin이 필요하다는 것을 알 수 있다.xml에 설정을 추가합니다.
둘째, initialize 함수에서 WebSettings를 호출하는 중 오류가 발생했습니다. 초기화 루틴이 WebView의 UI 루틴이 아니기 때문입니다.이 문제는 웹 뷰를 통해post로 해결해.
3. JS 패키지 플러그인 함수를 수정합니다.이 플러그인의 JS는 www/ViewPort입니다.js, 우리는 인터페이스를 제공할 필요가 없습니다.
4. plugin을 수정합니다.xml

<plugin id="com.tangide.viewport" version="1.0.0" xmlns="http://apache.org/cordova/ns/plugins/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>ViewPort</name>
    <description>This plugin enable the meta viewport in html</description>

    <author>Li XianJing</author>
    <license>MIT</license>
    <keywords>Meta, Android, ViewPort, DPI, Width</keywords>
    <repo>https://github.com/drawapp8/ViewPort.git</repo>
    <issue>https://github.com/drawapp8/ViewPort/issues</issue>

    <engines>
        <engine name="cordova" version=">=3.0.0"/>
    </engines>

    <js-module name="ViewPort" src="www/ViewPort.js">
        <clobbers target="cordova.plugins.ViewPort" />
    </js-module>

    <!-- Android -->
    <platform name="android">
        <config-file target="res/xml/config.xml" parent="/*">
            <feature name="ViewPort">
                <param name="android-package" value="com.tangide.viewport.ViewPort" />
                <param name="onload" value="true" />
            </feature>
        </config-file>
        <config-file target="AndroidManifest.xml" parent="/*"></config-file>
        <source-file src="src/android/ViewPort.java" target-dir="src/com/tangide/viewport/" />
    </platform>
</plugin>

다음은 APP가 시작할 때 플러그인 initialize 함수를 실행하도록 하는 코드입니다.

<param name="onload" value="true" />

5.github에 올려놓으세요.
6. 플러그인 게시http://plugins.cordova.io올리다

plugman adduser lixianjing
plugman publish