【Android 进阶】原生Android结合H5混合开发小结
2017-03-17 16:12
656 查看
混合开发概述
微信,微博以及现在市面上大量的软件使用内嵌了H5页面;有些外包公司,为了节约成本,采用Android内嵌H5模式开发,便于在iOS上直接复用页面,从而提高开发效率。
实现的原理:
本质是:Java代码和Javascript调用H5页面,只是Html的扩展,Javascript用来处理页面的逻辑
Android和H5互调案例:
一.java调用js
WebView的基本设置:
private void initWebView() { webView = new WebView(this); WebSettings webSettings = webView.getSettings(); //设置支持javaScript脚步语言 webSettings.setJavaScriptEnabled(true); //支持双击-前提是页面要支持才显示 //webSettings.setUseWideViewPort(true); //支持缩放按钮-前提是页面要支持才显示 webSettings.setBuiltInZoomControls(true); //设置客户端-不跳转到默认浏览器中 webView.setWebViewClient(new WebViewClient()); //设置支持js调用java webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android"); //加载本地资源 webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html"); //显示页面 // setContentView(webView); }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
[/code]
Java调用js原理就是Java代码调用了Js里面的函数。
核心Java代码段:
//登录功能里,java代码调用了js里面的JavaCallJs函数实现将name传到JS中,这样JS页面可以显示该用户名了。 private void login(String name) { webView.loadUrl("javascript:javaCallJs(" + "'" + name + "'" + ")"); setContentView(webView); }1
2
3
4
5
6
1
2
3
4
5
6
[/code]
核心js代码段:
//上面Java核心代码执行将调用下面JS代码 <script type="text/javascript"> function javaCallJs(arg){ document.getElementById("content").innerHTML = ("欢迎:"+arg ); } </script>1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
[/code]
二.JavaScript调java
1.在初始化webview代码中配置JavaScript接口://设置支持js调用java,调用时候将执行第一个参数的接口类 webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android"); //第二个参数为执行接口类方法的标示,与js相呼应1
2
3
1
2
3
[/code]
2.在该Activity中实现Javascript接口类:
/** * js可以调用该类的方法 */ class AndroidAndJSInterface{ @JavascriptInterface public void showToast(){ Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show(); } }1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
[/code]
3_JavaScript中调用java代码的核心代码段:
<input type="button" value="点击Android被调用" onclick="window.Android.showToast()" />1
2
1
2
[/code]
执行流程:
点击js页面的button,将执行js的onclick方法(onclick=”window.Android.showToast()”),根据该Android标示与webview配置接口方法的第二个参数相匹配,然后执行js接口实现类的showToast()方法。从而实现js代码调用java代码。
H5页面调用Android播放视频
基本思路和上面的例子(执行流程)一样,业务逻辑层面来说播放视频主要是从H5页面点击播放跳转(把视频播放的url传递给Java层)并触发Java实现播放视频的代码即可。1. webview中的核心配置:
//设置支持js调用java webView.addJavascriptInterface(new AndroidAndJSInterface(),"android");1
2
1
2
[/code]
2.在该Activity中实现Javascript接口类:
class AndroidAndJSInterface { /** * 该方法将被js调用 * @param id * @param videoUrl * @param tile */ @JavascriptInterface public void playVideo(int id,String videoUrl,String tile){ //调起系统所有播放器 Intent intent = new Intent(); intent.setDataAndType(Uri.parse(videoUrl),"video/*"); startActivity(intent); } }1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[/code]
3.JavaScript中调用java代码的核心代码段:
javascript:android.playVideo(itemid, videourl, itemtitle);1
1
[/code]
H5页面调用Android拨打电话
思路都是一样的,点击H5页面把电话号码传到java层并调用拨号核心代码即可。在该Activity中实现Javascript接口类:
@JavascriptInterface public void call(String phone) { Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone)); if (ActivityCompat.checkSelfPermission(JsCallJavaCallPhoneActivity.this, Manifest.permission.CALL_PHONE) != PackageManager.PERMISSION_GRANTED) { return; } startActivity(intent); }1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
[/code]
重点内容
1.如果调用如下方法时候报错,那么可以在Javascript接口类的具体实现方法上面加注解:@JavascriptInterface,或者把targetSdkVersion 改为 16(一般不适用)
//设置支持js调用java webView.addJavascriptInterface(new AndroidAndJSInterface(), "Android");1
2
1
2
[/code]
2.该申请的权限不要忘了在AndroidManifest.xml中加上。
相关文章推荐
- 【Android 进阶】原生Android结合H5混合开发小结
- 2.android 原生应用和React native 结合开发.环境搭建
- Android 原生开发、H5、React-Native使用利弊和场景技术分享
- 史上最详细的Android原生APP中添加ReactNative 进行混合开发教程
- Android原生APP中添加ReactNative 进行混合开发教程
- android webview与H5混合开发,webview自定义缓存
- Android原生(Native)C开发:编译选项小结
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
- Android native和h5混合开发几种常见的hybrid通信方式
- RN和原生Android混合开发之相互调用
- 【React Native开发】React Native 进阶之原生混合与数据通信开发详解-适配iOS开发(61)
- Android 原生开发、H5、React-Native使用利弊和场景技术分享
- 电商类APP H5与iOS和android混合开发问题记录
- Android和h5混合开发之URL解析
- APP,原生和H5开发技术混合开发
- phoneGap结合android原生代码开发Menu
- h5和ios原生混合开发,h5数据列表页面上滑崩溃
- b+c 模式 H5 与 Android 混合 开发详解
- Android原生APP中添加ReactNative 进行混合开发教程
- Android native和h5混合开发几种常见的hybrid通信方式