微信,微博以及现在市面上大量的软件使用内嵌了 H5 页面;有些外包公司,为了节约成本,采用 Android 内嵌 H5 模式开发,便于在 IOS 上直接复用页面, 从而提高开发效率。
- 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);
- }
java 调用 js 原理就是 Java 代码调用了 Js 里面的函数。
- //登录功能里,java代码调用了js里面的JavaCallJs函数实现将name传到JS中,这样JS页面可以显示该用户名了。
- private void login(String name) {
- webView.loadUrl("javascript:javaCallJs(" + "'" + name + "'" + ")");
- setContentView(webView);
- }
- //上面Java核心代码执行将调用下面JS代码
- <script type="text/javascript">
- function javaCallJs(arg){
- document.getElementById("content").innerHTML =
- ("欢迎:"+arg );
- }
- </script>
1. 在初始化 webview 代码中配置 Javascript 接口:
- //设置支持js调用java,调用时候将执行第一个参数的接口类
- webView.addJavascriptInterface(new AndroidAndJSInterface(), "Android");
- //第二个参数为执行接口类方法的标示,与js相呼应
2. 在该 Activity 中实现 Javascript 接口类:
- /**
- * js可以调用该类的方法
- */
- class AndroidAndJSInterface{
- @JavascriptInterface
- public void showToast(){
- Toast.makeText(JavaAndJSActivity.this, "我被js调用了", Toast.LENGTH_SHORT).show();
- }
- }
3_JavaScript 中调用 java 代码的核心代码段:
- type="button" value="点击Android被调用" onclick="window.Android.showToast()" />
执行流程:
基本思路和上面的例子(执行流程)一样,业务逻辑层面来说播放视频主要是从 H5 页面点击播放跳转(把视频播放的 url 传递给 Java 层)并触发 Java 实现播放视频的代码即可。
1. webview 中的核心配置:
- //设置支持js调用java
- webView.addJavascriptInterface(new AndroidAndJSInterface(),"android");
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);
- }
- }
3.JavaScript 中调用 java 代码的核心代码段:
- javascript:android.playVideo(itemid, videourl, itemtitle);
思路都是一样的,点击 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. 如果调用如下方法时候报错,那么可以在 Javascript 接口类的具体实现方法上面加注解:@JavascriptInterface,或者把 targetSdkVersion 改为 16(一般不适用)
- //设置支持js调用java
- webView.addJavascriptInterface(new AndroidAndJSInterface(), "Android");
2. 该申请的权限不要忘了在 AndroidManifest.xml 中加上。
来源: