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

发布了129 篇原创文章 · 获赞 38 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术黑板 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览