学好H5,上程序高速

发送到手机
使用"扫一扫"即可发送至手机

Android中构建HTML5应用


使用WebView控件 与其他控件的使用方法相同 在layout中使用一个<WebView>标签

WebView不包括导航栏,地址栏等完整浏览器功能,只用于显示一个网页

在WebView中加载Web页面,使用loadUrl()

Java代码 

WebView myWebView = (WebView) findViewById(R.id.webview);   

myWebView.loadUrl("http://www.example.com");  

注意在manifest文件中加入访问互联网的权限:

Xml代码  

<uses-permission android:name="android.permission.INTERNET" />  

在Android中点击一个链接,默认是调用应用程序来启动,因此WebView需要代为处理这个动作 通过WebViewClient

Java代码  

//设置WebViewClient   

webView.setWebViewClient(new WebViewClient(){      

    public boolean shouldOverrideUrlLoading(WebView view, String url) {      

        view.loadUrl(url);      

        return true;      

    }     

    public void onPageFinished(WebView view, String url) {   

            super.onPageFinished(view, url);   

    }   

    public void onPageStarted(WebView view, String url, Bitmap favicon) {   

        super.onPageStarted(view, url, favicon);   

    }   

});  


这个WebViewClient对象是可以自己扩展的,例如

Java代码  

private class MyWebViewClient extends WebViewClient {   

    public boolean shouldOverrideUrlLoading(WebView view, String url) {   

        if (Uri.parse(url).getHost().equals("www.example.com")) {   

            return false;   

        }   

        Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));   

    startActivity(intent);   

    return true;   

    }   

 

之后:

Java代码  

WebView myWebView = (WebView) findViewById(R.id.webview);   

myWebView.setWebViewClient(new MyWebViewClient());   

另外出于用户习惯上的考虑 需要将WebView表现得更像一个浏览器,也就是需要可以回退历史记录

因此需要覆盖系统的回退键 goBack,goForward可向前向后浏览历史页面


Java代码  

public boolean onKeyDown(int keyCode, KeyEvent event) {   

    if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack() {   

        myWebView.goBack();   

        return true;   

    }   

    return super.onKeyDown(keyCode, event);   

}  


Java代码

WebView myWebView = (WebView) findViewById(R.id.webview);   

WebSettings webSettings = myWebView.getSettings();   

webSettings.setJavaScriptEnabled(true);  


(这里的webSetting用处非常大 可以开启很多设置 在之后的本地存储,地理位置等之中都会使用到)


1 在JS中调用Android的函数方法   首先 需要在Android程序中建立接口

Java代码

final class InJavaScript {   

       public void runOnAndroidJavaScript(final String str) {   

        handler.post(new Runnable() {   

               public void run() {    

                   TextView show = (TextView) findViewById(R.id.textview);   

                   show.setText(str);   

               }   

           });   

       }   

   }  

Java代码

//把本类的一个实例添加到js的全局对象window中,   

//这样就可以使用windows.injs来调用它的方法   

webView.addJavascriptInterface(new InJavaScript(), "injs");  

在JavaScript中调用

Js代码

function sendToAndroid(){   

        var str = "Cookie call the Android method from js";   

        windows.injs.runOnAndroidJavaScript(str);//调用android的函数   

}   


2 在Android中调用JS的方法   在JS中的方法:

Js代码

function getFromAndroid(str){   

        document.getElementByIdx_x_x_x("android").innerHTML=str;   

}  

   在Android调用该方法

Java代码

Button button = (Button) findViewById(R.id.button);   

       button.setOnClickListener(new OnClickListener() {   

       public void onClick(View arg0) {   

            //调用javascript中的方法   

           webView.loadUrl("javascript:getFromAndroid('Cookie call the js function from Android')");   

       }   

   });  


3 Android中处理JS的警告,对话框等 在Android中处理JS的警告,对话框等需要对WebView设置WebChromeClient对象

Java代码  

//设置WebChromeClient   

webView.setWebChromeClient(new WebChromeClient(){   

    //处理javascript中的alert   

    public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {   

        //构建一个Builder来显示网页中的对话框   

        Builder builder = new Builder(MainActivity.this);   

        builder.setTitle("Alert");   

        builder.setMessage(message);   

        builder.setPositiveButton(android.R.string.ok,   

            new AlertDialog.OnClickListener() {   

                public void onClick(DialogInterface dialog, int which) {   

                    result.confirm();   

                }   

            });   

        builder.setCancelable(false);   

        builder.create();   

        builder.show();   

        return true;   

    };   

    //处理javascript中的confirm   

    public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {   

        Builder builder = new Builder(MainActivity.this);   

        builder.setTitle("confirm");   

        builder.setMessage(message);   

        builder.setPositiveButton(android.R.string.ok,   

            new AlertDialog.OnClickListener() {   

                public void onClick(DialogInterface dialog, int which) {   

                    result.confirm();   

                }   

            });   

        builder.setNegativeButton(android.R.string.cancel,   

            new DialogInterface.OnClickListener() {   

                public void onClick(DialogInterface dialog, int which) {   

                    result.cancel();   

                }   

            });   

        builder.setCancelable(false);   

        builder.create();   

        builder.show();   

        return true;   

    };   

           

    @Override  

    //设置网页加载的进度条   

    public void onProgressChanged(WebView view, int newProgress) {   

        MainActivity.this.getWindow().setFeatureInt(Window.FEATURE_PROGRESS, newProgress * 100);   

        super.onProgressChanged(view, newProgress);   

    }   

  

    //设置应用程序的标题title   

    public void onReceivedTitle(WebView view, String title) {   

        MainActivity.this.setTitle(title);   

        super.onReceivedTitle(view, title);   

    }   

});  


Android中的调试 通过JS代码输出log信息


Js代码  

Js代码: console.log("Hello World");   

Log信息: Console: Hello World http://www.example.com/hello.html :82   

   在WebChromeClient中实现onConsoleMesaage()回调方法,让其在LogCat中打印信息

Java代码 复制代码 收藏代码

WebView myWebView = (WebView) findViewById(R.id.webview);   

myWebView.setWebChromeClient(new WebChromeClient() {   

    public void onConsoleMessage(String message, int lineNumber, String sourceID) {   

        Log.d("MyApplication", message + " -- From line "  

            + lineNumber + " of "  

            + sourceID);   

    }   

});  

以及

Java代码  

WebView myWebView = (WebView) findViewById(R.id.webview);   

myWebView.setWebChromeClient(new WebChromeClient() {   

    public boolean onConsoleMessage(ConsoleMessage cm) {   

        Log.d("MyApplication", cm.message() + " -- From line "  

            + cm.lineNumber() + " of "  

            + cm.sourceId() );   

        return true;   

    }   

});  

   *ConsoleMessage 还包括一个 MessageLevel 表示控制台传递信息类型。 您可以用messageLevel()查询信息级别,以确定信息的严重程度,然后使用适当的Log方法或采取其他适当的措施。   


构建HTML5离线应用 需要提供一个cache manifest文件,理出所有需要在离线状态下使用的资源 


例如

Manifest代码

CACHE MANIFEST    

#这是注释   

images/sound-icon.png   

images/background.png   

clock.html    

clock.css    

clock.js     

  

NETWORK:    

test.cgi   

  

CACHE:    

style/default.css   

  

FALLBACK:    

/files/projects /projects  

   在html标签中声明 <html manifest="clock.manifest">  HTML5离线应用更新缓存机制 分为手动更新和自动更新2种 自动更新: 在cache manifest文件本身发生变化时更新缓存 资源文件发生变化不会触发更新 手动更新: 使用window.applicationCache

Js代码

if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {   

    window.applicationCache.update();   

}   

在线状态检测 HTML5 提供了两种检测是否在线的方式:navigator.online(true/false) 和 online/offline事件。 在Android中构建离线应用

Java代码

//开启应用程序缓存   

webSettingssetAppCacheEnabled(true);   

String dir = this.getApplicationContext().getDir("cache", Context.MODE_PRIVATE).getPath();   

//设置应用缓存的路径   

webSettings.setAppCachePath(dir);   

//设置缓存的模式   

webSettings.setCacheMode(WebSettings.LOAD_DEFAULT);   

//设置应用缓存的最大尺寸   

webSettings.setAppCacheMaxSize(1024*1024*8);     

//扩充缓存的容量   

public void onReachedMaxAppCacheSize(long spaceNeeded,   

            long totalUsedQuota, WebStorage.QuotaUpdater quotaUpdater) {   

    quotaUpdater.updateQuota(spaceNeeded * 2);   

}  


学好H5,上程序高速

学好H5,上程序高速

分享: