phonegap底层原理学习和研究(一)

在phonegap中，通过android和iphone的webview实现对html网页的展示。本文的目的采用android中webview实现对html调用以及js调用java方法的。其实质也是phonegap插件的原理。

PhoneGap如何工作?

PhoneGap架构拥有强大的跨平台访问设备能力，但是其工作原理并不神秘，下面以iPhone和Android平台为例进行分析。

iPhone和Android平台共同点是都有内置的WebView组件，其具备两个特性：

1、WebView组件实质是移动设备的内置浏览器

WebView这个内置浏览器特性是Web能被打包成本地客户端的基础，可方便的用HTML5、CSS3页面布局，这是移动Web技术的优势相对于原生开发。

2、WebView提供Web和设备本地API双向通信的能力

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

明白以上两个特性，参照下面PhoneGap与设备本地API通信图，一个成熟的PhoneGap技术客户端运行状况如下：

应用运行在WebView组件上 —》通过PhoneGap在各平台的扩展 —》最终访问设备本地资源

WebView可以显示Web页面，并且，可以像普通的View那样应用到任何布局中。

WebView提供了两个方法用于显示网页的内容：loadUrl()用于加载一个指定的URL，而loadData()则用于直接向WebView写入指定的HTML文本。此外，loadDataWithBaseURL()和loadData()类似，但是，如果写入的HTML文本包含图片、CSS等外部资源的相对链接时，WebView就会根据指定的baseURL来正确地加载这些资源，比如："file:///android_asset/", "<html><body background="lenovo.png">"这个方法正好符合我们显示Item的需求。

WebView的属性：Android中专门通过WebSettings来设置WebView的一些属性、状态等。可以通过WebView.getSettings()得到这个设置。

WebViewClient：专门辅助WebView处理各种通知、请求等事件的类，可以通过WebView的一个

setWebViewCilent（）方法来指定一个WebViewClient对象。

如：setWebViewClient(new WebViewClient(){

@Override public boolean shouldOverrideUrlLoading(此方法：控制新的连接在当前WebView中打开)})；

如果你在HTML中添加了一些JavaScript，你会发现WebView并不会执行JavaScript，这是因为WebView默认关闭了JavaScript功能。为了能执行JavaScript，需要在加载任何URL或写入HTML文本前开启JavaScript，代码如下：

WebView web = (WebView) this.findViewById(R.id.webview);
web.getSettings().setJavaScriptEnabled(true);

WebChromeClient：辅助WebView处理JavaScript的对话框、网站图标、网站Title、加载进度等

我们还可以向WebView添加更多的代码，甚至可以监听和控制WebView执行JavaScript

为了让Webview从apk载文件中加载assets，Android SDK提供了一个schema，前缀为file:///android_asset/WebView遇到这样的schema，就去当前包中的assets目录中找内容。

如：file:///android_asset/demo.html

一个简单的列子（不完整，主要说明使用WebViewClent控制新连接在当前WebView中打开）：

WebView browser=(WebView)findViewById(R.id.webkit);

browser.setWebViewClient(genWebViewClientForURL());

WebSettings s = browser.getSettings();
s.setSaveFormData(false);
s.setSavePassword(false);
s.setUseWideViewPort(true);
s.setJavaScriptEnabled(true);
s.setLightTouchEnabled(true);

private WebViewClient genWebViewClientForURL() {
return new CiHaiWebViewClient();
}

private class CiHaiWebViewClient extends WebViewClient
{
@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {
String strURL = "";
try {
strURL = URLDecoder.decode(url.replaceAll("fake://wistron/", ""), "utf-8");
} catch (UnsupportedEncodingException e) {
e.printStackTrace();
}
if (strURL.equals(STR_PRE))
{ …… } else if (strURL.equals(STR_NEXT)) { …… }else {……}
}

有代码:browser.loadDataWithBaseURL("fake://wistron/",htmlText, "text/html", "utf-8", null);

这里的baseUrl：fake://wistron/故这里需要WebViewClient 的shouldOverrideUrlLoading()方法，且要实现URLDecoder.decode(url.replaceAll("fake://wistron/", ""), "utf-8");

目录结构如下：

android的类如下：

package com.easyway.webview;import android.app.Activity;import android.os.Bundle;import android.view.KeyEvent;import android.webkit.WebSettings;import android.webkit.WebView;/** * 为了方便网页和Android应用的交互，Android系统提供了WebView中JavaScript * 网页脚本调用Java类方法的机制。只要调用addJavascriptInterface方法即可映 * 射一个Java对象到JavaScript对象上。 * 1.先在layout文件中加入<WebView>元素  或WebView webView = new WebView(this); * 2.由于应用程序需要访问网络，所以需要在AndroidManifest.xml中请求网络权限的：   3.使用Web View   4.加载一个页面，可以用loadUrl()方法，例如：         设置WevView要显示的网页：　　互联网用：webView.loadUrl("http://android.tgbus.com"); 　　本地文件用：webView.loadUrl(file:///android_asset/xx.html);固定格式　　本地文件存放在：assets文件中   5.在Web View 中使用JavaScript 如果你加载到 Web View 中的网页使用了JavaScript，那么，   需要在Websetting 中开启对JavaScript的支持，因为Web View 中默认的是JavaScript未启用。 *  * 如果希望点击链接由自己处理，而不是新开Android的系统browser中响应该链接。　　给WebView添加一个事件监听对象(WebViewClient)　　并重写其中的一些方法　　shouldOverrideUrlLoading：对网页中超链接按钮的响应。　　当按下某个连接时WebViewClient会调用这个方法，并传递参数：按下的url 　　onLoadResource   　　onPageStart  　　onPageFinish  　　onReceiveError　　onReceivedHttpAuthRequest如果用webview点链接看了很多页以后，如果不做任何处理，点击系统“Back”键，整个浏览器会调用finish()而结束自身，如果希望浏览的网页回退而不是退出浏览器，需要在当前Activity中处理并消费掉该Back事件。　　覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法。　　public boolean onKeyDown(int keyCoder,KeyEvent event){             　　         if(webView.canGoBack() && keyCoder == KeyEvent.KEYCODE_BACK){             　　                 webview.goBack();   //goBack()表示返回webView的上一页面                         　　     return true;                     　　 }                   　　   return false;              　　} *  * @Title:  * @Description: 实现Android中WebView实现Javascript调用Java类方法 * @Copyright:Copyright (c) 2011 * @Company:易程科技股份有限公司 * @Date:2012-5-21 * @author  longgangbai * @version 1.0 */public class AndroidWebClientActivity extends Activity {private WebView mWebView;    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);        mWebView = (WebView) findViewById(R.id.wv_content);        //使用垂直滚动条        mWebView.setVerticalScrollbarOverlay(true);        //获取WebView相关的设置的对象        final WebSettings settings = mWebView.getSettings();        settings.setSupportZoom(true);        //WebView启用Javascript脚本执行        settings.setJavaScriptEnabled(true);        //设置js可以打开window        settings.setJavaScriptCanOpenWindowsAutomatically(true);        //映射Java对象到一个名为”js2java“的Javascript对象上        //JavaScript中可以通过"window.js2java"来调用Java对象的方法        //要在webview中,调用addJavascriptInterface(OBJ,interfacename)        //其中,obj为和javascript通信的应用程序,interfacename为提供给JAVASCRIPT调用的 名称,设置如下        mWebView.addJavascriptInterface(new JSInvokeClass(), "js2java");         //index.html在android的assets目录中        mWebView.loadUrl("file:///android_asset/index.html");    }    /**网页Javascript调用接口**/    class JSInvokeClass {        public String getText() {            return "调用服务器的方法返回的信息";        }    }       /**    * 利用Web View的历史记录来实现页面navigate backword.    *重载Activity中的onKeyDown方法，实现此功能：    */   @Override        public boolean onKeyDown(int keyCode, KeyEvent event) {            // Check if the key event was the BACK key and if there's history            if ((keyCode == KeyEvent.KEYCODE_BACK) && mWebView.canGoBack()){                mWebView.goBack();                return true;            }            // If it wasn't the BACK key or there's no web page history, bubble up to the default            // system behavior (probably exit the activity)            return super.onKeyDown(keyCode, event);        } }

html代码如下：

<!DOCTYPE HTML><html><head><meta name="viewport" content="width=320; user-scalable=no" /><meta http-equiv="Content-type" content="text/html; charset=utf-8"><title>jQuery Google Maps Plugin</title><script> function init(){     //js调用java的方法     //返回值作为text的文本值     //调用方式：window.暴露名称.方法     var val=window.js2java.getText();     var txt=document.getElementById("txt");     txt.value=val; }</script></head><body onload="init()">  文件信息：<input id="txt" type="text"></body></html>

更多相关文章

随机推荐