跨平台PhoneGap技术架构二：PhoneGap底层原理（上）

讲解PhoneGap的底层原理，需要从讲解PhoneGap几个重要的类开始：

DroidGap类：

　　　　　　　　

public class DroidGap extends Activity implements CordovaInterface {...}

 

DroidGap是接口CordovaInterface的实现类，继承Android Activity，具有Android Activity的整个生命周期。DroidGap覆写了Activity的　onCreate()、onPause()、onResume()、onDestroy

等方法。

    /**
     * Load the url into the webview.
     *
     * @param url
     */
    public void loadUrl(String url) {

        // Init web view if not already done
        if (this.appView == null) {
            this.init();
        }

        // Set backgroundColor
        this.backgroundColor = this.getIntegerProperty("backgroundColor", Color.BLACK);
        this.root.setBackgroundColor(this.backgroundColor);

        // If keepRunning
        this.keepRunning = this.getBooleanProperty("keepRunning", true);

        // Then load the spinner
        this.loadSpinner();

        this.appView.loadUrl(url);
    }

其中有一个比较重要的方法是loadUrl(String url)，也就是在你的Activity里super.loadUrl()时调用的方法。之所以说这个方法重要，是因为我们可以把这个方法看成是PhoneGap的入口函

数。PhoneGap在loadUrl里做了一些初始化工作，会调用到init()函数。

    /**
     * Create and initialize web container with default web view objects.
     */
    public void init() {
        CordovaWebView webView = new CordovaWebView(DroidGap.this);
        this.init(webView, new CordovaWebViewClient(this, webView), new CordovaChromeClient(this, webView));
    }

　　init()完成了WebView的设置等重要工作，这对理解PhoneGap底层原理有很重要的作用。从代码中可以看到，初始化时首先实例化了

CordovaWebView类型的webView对象，这里的CordovaWebView继承Android WebView类，后面会有讲到。然后传入不同参数重载了init()方

法。

传入参数包括webView、CordovaWebViewClient类型的webViewClient对象和CordovaChromeClient类型ChromeClient对

象。CordovaWebViewClient和CordovaChromeClient分别继承Android WebViewClient和ChromeClient类，这两个类在后面也会提到。

   /**
     * Initialize web container with web view objects.
     *
     * @param webView
     * @param webViewClient
     * @param webChromeClient
     */
    public void init(CordovaWebView webView, CordovaWebViewClient webViewClient, CordovaChromeClient webChromeClient) {
        LOG.d(TAG, "DroidGap.init()");

        // Set up web container
        this.appView = webView;
        this.appView.setId(100);

        this.appView.setWebViewClient(webViewClient);
        this.appView.setWebChromeClient(webChromeClient);
        webViewClient.setWebView(this.appView);
        webChromeClient.setWebView(this.appView);

        this.appView.setLayoutParams(new LinearLayout.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT,
                1.0F));

        // Add web view but make it invisible while loading URL
        this.appView.setVisibility(View.INVISIBLE);
        this.root.addView(this.appView);
        setContentView(this.root);

        // Clear cancel flag
        this.cancelLoadUrl = false;

    }

这里的appView也是CordovaWebView类型，是DroidGap类的一个属性。对appView进行了初始化设置，appView实际就是刚才实例化的

　webView，然后设置它的webViewClient和ChromeClient分别为刚才的传入参数webViewClient和ChromeClient。

可能会有人不理解为什么要设置这两个Client呢？这里需要先从Android原生角度介绍一下WebView组件以及WebViewClient和ChromeClient这两个类的

区别：

　　WebView组件

WebView组件实质是移动设备的内置浏览器。WebView这个内置浏览器特性是Web能被打包成本地客户端的基础，可方便的用HTML5、CSS3页面布局，这是

移动Web技术的优势相对于原生开发。

PhoneGap针对不同平台的WebView做了扩展和封装，使WebView这个组件变成可访问设备本地API的强大浏览器，所以开发人员在PhoneGap框架下可通过

JavaScript访问设备本地API。

　　WebViewClient

　　　　　　WebViewClient帮助WebView处理各种通知、请求事件的，具体来说包括：
　　　　　　　　onLoadResource()

　　　　　　　　onPageStarted()

　　　　　　　　onPageFinished()

　　　　　　　　onReceiveError()

　　　　　　　　onReceivedHttpAuthRequest()

　　WebChromeClient

　　　　　　WebChromeClient是辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等

　　　　　　　　onCloseWindow(关闭WebView)

　　　　　　　　onCreateWindow()

　　　　　　　　onJsAlert (WebView上alert是弹不出来东西的，需要定制你的WebChromeClient处理弹出)

　　　　　　　　onJsPrompt()

　　　　　　　　onJsConfirm()

　　　　　　　　onProgressChanged()

　　　　　　　　onReceivedIcon()

　　　　　　　　onReceivedTitle()

　　　　不早了，今天先写到这里吧（未完待续。。。）