前几天写了一个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

PhoneGap插件开发流程的更多相关文章

  1. wordpress插件开发流程梳理

    1.声明一个插件 首先我们必须明白,wordpress的插件可以是单文件,也可以是多文件,css/html都不是必须的,以下举例暂且在单文件模式下 比如我们要创建一个名为 hellophp的插件,那我 ...

  2. jira的插件开发流程实践

    怎么开头呢,由于自己比较懒,博客一直不怎么弄,以后克己一点,多传点自己遇到的问题和经历上来,供自己以后记忆,也供需要的小伙伴少走点弯路吧 最近公司项目需要竞标一个运维项目,甲方给予了既定的几种比较常用 ...

  3. 老司机带你解读jQuery插件开发流程

    jquery插件开发模式 jquery插件一般有三种开发方式: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部 ...

  4. wordpress插件开发流程梳理-二

    开发插件的最佳实践 避免命名冲突 当您的插件对变量,函数或类使用相同的名称作为另一个插件时,会发生命名冲突. 幸运的是,您可以使用以下方法避免命名冲突. 程序性 默认情况下,所有变量,函数和类都在全局 ...

  5. cordova自定义插件开发流程

    cordova自定义插件开发:1.cordova安装:npm install -g cordova2.plugman安装:npm install -g plugman3.cordova创建工程:cor ...

  6. npapi插件开发流程与实例

    近期做NPAPI插件,网上的介绍还是比较多,但就是没有一个完整的例子,FQ也没找到,难得NPAPI要走向陌路了?就不去深究额,先解决目前遇到的问题. 现状:已有Activex(仅兼容IE32/64位浏 ...

  7. CKeditor插件开发流程(二)SyntaxHighlighter

    CKEditor整合SyntaxHighlighter实现代码高亮显示 1,版本说明 CKEditor:ckeditor_4.0.1_standard.zipSyntaxHighlighter:syn ...

  8. CKeditor插件开发流程(一)

    1.放在多文件中 第一步:config.js中 config.extraPlugins = '插件名称';//注册插件,extraPlugins只允许出现一次,你如果之前有新增别的插件,那么用逗号分隔 ...

  9. gitbook 入门教程之小白都能看懂的 Gitbook 插件开发全流程

    什么是插件 Gitbook 插件是扩展 GitBook 功能(电子书和网站)的最佳方式. 只要是 Gitbook 默认没有提供的功能,基于插件机制都可以自行扩展,是插件让 Gitbook 变得更加强大 ...

随机推荐

  1. Testing Round #12 A

    A. Divisibility time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  2. jquery.util.easyui.dialog

    (function ($) { var $parent = parent.$; //获取弹出窗口数据集合 function getDialogs() { var dialogs = $parent(& ...

  3. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  4. spring webmvc使用ResponseBody前,在配置文件中的配置

    spring的版本不同, 导致配置引用地址不同 首先引用一个jar包 <dependency> <groupId>com.fasterxml.jackson.core</ ...

  5. Git笔记 整理2

    补充: 1,如何只克隆git仓库中的一个分支? git clone -b <branch> <remote_repo> eg:  git clone -b vivien_dev ...

  6. Python3基础 使用技巧:把代码的字体变大

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...

  7. Session对象实例

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  8. 昂贵的聘礼 Dijkstra法

    poj 1062 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 39437   Accepted: 11432 Descri ...

  9. Cheatsheet: 2013 07.21 ~ 07.31

    Mobile Android vs. iOS: Comparing the Development Process of the GQueues Mobile Apps Android Studio ...

  10. 教你如何使用php session

    原文网址:http://www.jb51.net/article/42500.htm   学会php session可以在很多地方使用,比如做一个后台登录的功能,要让程序记住用户的session,其实 ...