本篇主要采用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