PhoneGap plug-in development process

A few days ago wrote a phonegap plugin, the function of this plugin is very simple, is to turn on the viewport settings. But compared with other plug-ins, there are several interesting places, carefully read the PhoneGap source code to get it done. Here is a record of the PhoneGap plug-in development process, and the development of this plugin encountered problems.

0. First install the Android SDK, Node.js,phonegap and Plugman. Please refer to compiling CANTK with PhoneGap

1. Create a plugin with Plugman:

plugmancreate--nameViewPort--plugin_idcom.tangide.viewport--plugin_version1.0.0

2. Writing Java code: Src/android/viewport.java

 PackageCom.tangide.viewport;ImportAndroid.util.Log;ImportOrg.json.JSONArray;ImportOrg.json.JSONObject;ImportOrg.json.JSONException;ImportAndroid.webkit.WebSettings;ImportOrg.apache.cordova.CordovaWebView;ImportOrg.apache.cordova.CordovaInterface;ImportOrg.apache.cordova.CordovaPlugin;ImportOrg.apache.cordova.CallbackContext; Public  class ViewPort extends cordovaplugin {    Private Static FinalString Log_tag ="ViewPort";@Override     Public void Initialize(Cordovainterface Cordova, Cordovawebview WebView) {FinalCordovawebview WV = WebView;Super. Initialize (Cordova, WebView); Webview.post (NewRunnable () {@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)throwsjsonexception {log.d (Log_tag,"No Method in this Plugin");return false; }}

What's interesting here is that our plug-in does not provide an interface, but rather the initialization is doing some setup. So the Initialize function is the focus, but two questions are encountered:

The first is that the app does not call the plugin's initialize function when it is launched, and after careful study of the PhoneGap plugin loading process, it is necessary to add a setting in Plugin.xml.

The second is to call WebSettings error in the Initialize function because the initialization thread is not a WebView UI thread. The problem is solved by webview.post.

3. Modify the JS wrapper plugin function. This plugin JS is www/viewport.js, we do not need to provide interface.

4. Modify 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>

The following line of code is worth paying attention to, which allows the app to execute the plugin Initialize function at startup:

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

5. Put it on GitHub.

6. Publish the plugin to the Http://plugins.cordova.io.

plugman adduser lixianjingplugman publish

PhoneGap plug-in development process