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