Android与Html混合开发移动应用

本篇主要采用android自带控件WebView去加载本地已做好适配android移动端的html页面，同时主要简述两大点，JS调用android原生方法以及android原生API调用JS。

本篇示例的界面基本采用html与js编写，部分使用js与java互调，先看效果图：

使用html实现了一个正常的android应用模板，有标题栏，底部菜单栏以及侧滑栏。

实现的js与android原生互调的功能是：

js调用android原生的方法功能：点击侧滑栏中的第二个菜单“js与java方法互调”时，是使用js调用android原生的方法，打开AlterDialog弹出框，并且将第二个菜单的标题传入弹出AlterDialog的java方法中做AlterDialog标题展示；

android原生API调用js函数功能：在弹出的AlterDialog弹出框中有一个“改变标题”的按钮，点击这个按钮就可以改变html界面上标题栏的文字；还有就是点击html底部菜单栏弹出android中的Toast；

开发时的注意点：

1.html，js等web端代码要放置在项目main文件夹下的assets文件夹下(如果没有assets，则自己在main文件夹下建立一个assets文件夹)

2.在对webView控件要有以下设置：

private void initWebView(WebView webView){
    WebSettings settings = webView.getSettings();
    //自适应屏幕
    settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
    settings.setLoadWithOverviewMode(true);
    //设置客户端-不跳转到默认浏览器中
    webView.setWebViewClient(new WebViewClient());
    settings.setCacheMode(WebSettings.LOAD_NO_CACHE);//关闭缓存
    settings.setAllowFileAccess(true);//允许读取文件
    //设置可以支持缩放
    settings.setSupportZoom(true);
    //扩大比例的缩放
    settings.setUseWideViewPort(true);
    settings.setAllowContentAccess(true);
    //支持JavaScript
    settings.setJavaScriptEnabled(true);
    //设置支持js调用java的方法
    webView.addJavascriptInterface(new JsCallJavaMethod(this,mWebView),"Android");
}

3.js与android原生互调的一个模板以及注意点：

1) android原生调用js函数：webView.loadUrl("javascript:js函数名(参数...)");

2) js调用android原生方法：一定要在android原生方法上声明@JavascriptInterface这个注解;

4.项目demo目录结构如下

具体代码已上传至我的github提供参考：https://github.com/liuqiangliufeifei/WebApp

Android与Html混合开发移动应用

猜你喜欢