PhoneGap插件开发流程

前几天写了一个PhoneGap插件，这个插件的功能很简单，就是开启viewport设置。不过与其它插件相比，有好几个有意思的地方，仔细读了PhoneGap的源码才搞定。这里记录一下PhoneGap插件开发的流程，以及开发这个插件遇到的问题。

0.先安装android sdk, node.js，phonegap和plugman。请参考用PhoneGap编译CanTK

1.用plugman创建一个插件：

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线程。这个问题通过webView.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