phonegap揭秘附篇：phonegap的插件管理

最新推荐文章于 2021-05-26 03:07:08 发布

awebkit

最新推荐文章于 2021-05-26 03:07:08 发布

阅读量5.1k

点赞数

本文链接：https://blog.csdn.net/awebkit/article/details/8662502

版权

转载请注明出处：http://blog.csdn.net/awebkit

结合 phonegap揭秘－流程我们本节研究里面的一些小细节：phonegap如何管理插件。

废话少说，开始吧

phonegap 要求 Activity 继承于 DroidGap ，首先看看 DroidGap 的说明中关于如何使用 DroidGap

 *     public class Examples extends DroidGap {
 *       @Override
 *       public void onCreate(Bundle savedInstanceState) {
 *         super.onCreate(savedInstanceState);
 *                  
 *         // Set properties for activity
 *         super.setStringProperty("loadingDialog", "Title,Message"); // show loading dialog
 *         super.setStringProperty("errorUrl", "file:///android_asset/www/error.html"); // if error loading file in super.loadUrl().
 *
 *         // Initialize activity
 *         super.init();
 *         
 *         // Add your plugins here or in JavaScript
 *         super.addService("MyService", "com.phonegap.examples.MyService");
 *         
 *         // Clear cache if you want
 *         super.appView.clearCache(true);
 *         
 *         // Load your application
 *         super.setIntegerProperty("splashscreen", R.drawable.splash); // load splash.jpg image from the resource drawable directory
 *         super.loadUrl("file:///android_asset/www/index.html", 3000); // show splash screen 3 sec before loading app
 *       }
 *     }

DroidGap 的onCreate 函数和普通的 activity 的 onCreate 函数没什么区别，这里就不介绍了，主要介绍 init 函数，注意，精华啊！

public void init() {
		
		// Create web container
		this.appView = new WebView(DroidGap.this);
		this.appView.setId(100);
		
		this.appView.setLayoutParams(new LinearLayout.LayoutParams(
        		ViewGroup.LayoutParams.FILL_PARENT,
        		ViewGroup.LayoutParams.FILL_PARENT, 
        		1.0F));

        WebViewReflect.checkCompatibility();

        if (android.os.Build.VERSION.RELEASE.startsWith("1.")) {
        	this.appView.setWebChromeClient(new GapClient(DroidGap.this));
        }
        else {
        	this.appView.setWebChromeClient(new EclairClient(DroidGap.this));        	
        }
           
        this.setWebViewClient(this.appView, new GapViewClient(this));

        this.appView.setInitialScale(100);
        this.appView.setVerticalScrollBarEnabled(false);
        this.appView.requestFocusFromTouch();

        // Enable JavaScript
        WebSettings settings = this.appView.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);

        // Enable database
        Package pack = this.getClass().getPackage();
        String appPackage = pack.getName();
        WebViewReflect.setStorage(settings, true, "/data/data/" + appPackage + "/app_database/");

        // Enable DOM storage
        WebViewReflect.setDomStorage(settings);
        
        // Enable built-in geolocation
        WebViewReflect.setGeolocationEnabled(settings, true);

        // Bind PhoneGap objects to JavaScript
        this.bindBrowser(this.appView);

        // Add web view but make it invisible while loading URL
        this.appView.setVisibility(View.INVISIBLE);
        root.addView(this.appView);
        setContentView(root);
        
        // Clear cancel flag
        this.cancelLoadUrl = false;

        // If url specified, then load it
        String url = this.getStringProperty("url", null);
        if (url != null) {
        	System.out.println("Loading initial URL="+url);
        	this.loadUrl(url);        	
        }
	}

首先是创建 WebView ，然后是标准的设置 WebView 相关，如 WebViewClient ChromeClient，最后是 loadUrl。这部分代码里面有一个不是标准的接口 bindBrowser ，这是做什么的呢？我们看一下代码

	private void bindBrowser(WebView appView) {
		this.callbackServer = new CallbackServer();
		this.pluginManager = new PluginManager(appView, this);

	}

啊，这部分代码很简单，但是作用很大，初始化了PluginManager ，而我们知道，类似 camera ，这些都是 Plugin ，那我们看看 PluginManager 的创建吧

	public PluginManager(WebView app, PhonegapActivity ctx) {
		this.ctx = ctx;
		this.app = app;
		this.loadPlugins();
	}
	
	/**
	 * Load plugins from res/xml/plugins.xml
	 */
	public void loadPlugins() {
		XmlResourceParser xml = ctx.getResources().getXml(com.phonegap.R.xml.plugins);
		int eventType = -1;
		while (eventType != XmlResourceParser.END_DOCUMENT) {
			if (eventType == XmlResourceParser.START_TAG) {
				String strNode = xml.getName();
				if (strNode.equals("plugin")) {
					String name = xml.getAttributeValue(null, "name");
					String value = xml.getAttributeValue(null, "value");
					System.out.println("Plugin: "+name+" => "+value);
					this.addService(name, value);
				}
			}
			try {
				eventType = xml.next();
			} catch (XmlPullParserException e) {
				e.printStackTrace();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}

我们看到了 loadPlugins 装载插件，用到的xml文件是 plugins ，这个文件如下

<!--?xml version="1.0" encoding="utf-8"?-->
<plugins>
    <plugin name="App" value="com.phonegap.App"/>
    <plugin name="Geolocation" value="com.phonegap.GeoBroker"/>
    <plugin name="Device" value="com.phonegap.Device"/>
    <plugin name="Accelerometer" value="com.phonegap.AccelListener"/>
    <plugin name="Compass" value="com.phonegap.CompassListener"/>
    <plugin name="Media" value="com.phonegap.AudioHandler"/>
    <plugin name="Camera" value="com.phonegap.CameraLauncher"/>
    <plugin name="Contacts" value="com.phonegap.ContactManager"/>
    <plugin name="Crypto" value="com.phonegap.CryptoHandler"/>
    <plugin name="File" value="com.phonegap.FileUtils"/>
    <plugin name="Location" value="com.phonegap.GeoBroker"/>
    <plugin name="Network Status" value="com.phonegap.NetworkManager"/>
    <plugin name="Notification" value="com.phonegap.Notification"/>
    <plugin name="Storage" value="com.phonegap.Storage"/>
    <plugin name="Temperature" value="com.phonegap.TempListener"/>
    <plugin name="FileTransfer" value="com.phonegap.FileTransfer"/>
    <plugin name="Capture" value="com.phonegap.Capture"/>
</plugins>

解析完xml文件后，pluginManager 调用了 addService ，那么这个函数做了什么事情呢？

    public void addService(String serviceType, String className) {
    	this.services.put(serviceType, className);
    }

哦？只是简单的放到一个 HashMap 中吗？我们现在知道 PluginManager 储存了一个 service 和对应类的一个列表，那么什么时候用呢？
回过头来，我们再看一下测试例子， phonegap.js 定义了 js camera 类。而在这个 js 类的方法 getPicture 中会调用 phonegap.exec。

Camera.prototype.getPicture = function(successCallback, errorCallback, options) {
...
PhoneGap.exec(successCallback, errorCallback, "Camera", "takePicture", [quality, destinationType, sourceType]);
};

通过phonegap揭秘－流程我们知道 PhoneGap.exec 最终通过 prompt 调用到 java 里面。

这篇的基本思路在 phonegap揭秘－流程已经讲过，所以说是题外篇，我会接着分析一下最新版本的 PhoneGap 流程，变动比较大，但是我觉得整体架构差不多一样的