混合开发概述
微信,微博以及现在市面上大量的软件使用内嵌了H5页面;有些外包公司,为了节约成本,采用Android内嵌H5模式开发,便于在iOS上直接复用页面, 从而提高开发效率。
实现的原理:
- 本质是:Java代码和Javascript调用
- H5页面,只是Html的扩展,Javascript用来处理页面的逻辑
Android和H5互调案例:
一.java调用js
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
Java调用js原理就是Java代码调用了Js里面的函数。
核心Java代码段:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
核心js代码段:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
二.JavaScript调java
1.在初始化webview代码中配置JavaScript接口:
- 1
- 2
- 3
- 1
- 2
- 3
2.在该Activity中实现Javascript接口类:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
3_JavaScript中调用java代码的核心代码段:
- 1
- 2
- 1
- 2
执行流程:
点击js页面的button,将执行js的onclick方法(οnclick=”window.Android.showToast()”),根据该Android标示与webview配置接口方法的第二个参数相匹配,然后执行js接口实现类的showToast()方法。从而实现js代码调用java代码。
H5页面调用Android播放视频
基本思路和上面的例子(执行流程)一样,业务逻辑层面来说播放视频主要是从H5页面点击播放跳转(把视频播放的url传递给Java层)并触发Java实现播放视频的代码即可。
1. webview中的核心配置:
- 1
- 2
- 1
- 2
2.在该Activity中实现Javascript接口类:
- 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
3.JavaScript中调用java代码的核心代码段:
- 1
- 1
H5页面调用Android拨打电话
思路都是一样的,点击H5页面把电话号码传到java层并调用拨号核心代码即可。
在该Activity中实现Javascript接口类:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
重点内容
1.如果调用如下方法时候报错,那么可以在Javascript接口类的具体实现方法上面加注解:@JavascriptInterface,或者把targetSdkVersion 改为 16(一般不适用)
- 1
- 2
- 1
- 2
2.该申请的权限不要忘了在AndroidManifest.xml中加上。