PhoneGap plug-in development process and phonegap plug-in process

PhoneGap plug-in development process and phonegap plug-in process

I wrote a PhoneGap plug-in a few days ago. This plug-in provides a simple function, that is, to enable the viewport settings. However, compared with other plug-ins, there are several interesting points. Read the source code of PhoneGap carefully. Here we will record the PhoneGap plug-in development process and problems encountered when developing this plug-in.

0. Install the android sdk, node. js, phonegap, and plugman first. Refer to compiling CanTK with PhoneGap

1. Use plugman to create a plug-in:

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

2. Write JAVA code: 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;    }}

What is interesting here is that our plug-in does not provide interfaces, but does some settings during initialization. So the initialize function is the focus, but there are two problems:

First, the APP did not call the initialize function of the plug-in when it was started. After carefully studying the loading process of the PhoneGap plug-in, you will know that you need to add a setting in plugin. xml.

Second, an error occurred while calling WebSettings in the initialize function because the initialization thread is not the WebView UI thread. This problem is solved through webView. post.

3. Modify the JS packaging plug-in function. The JS of this plug-in is www/ViewPort. js, and we do not need to provide interfaces.

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>

It is worth noting that the following line of code allows the APP to execute the plug-in initialize function at startup:

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

5. Put it on github.

6. Release the plug-in to the http://plugins.cordova.io.

plugman adduser lixianjingplugman publish