Android与H5混合开发
Android 和 H5 在移动开发应用中非常广泛。市面上很多App都是使用Android开发的，但使用Android来开发一些比较复杂附属类，提示性的页面是得不偿失的。而H5在制作炫酷动画网页方面比较给力，且具有开发速度快，更新不用依赖于App的更新，只需要服务端更新相应的页面即可，所以App和H5页面相结合就显得尤为重要。而android和H5都不可能独立存在，而是相互影响的。例如，H5页面要获取App中的用户的基本信息，App端要操作H5页面等。
本文主要功能要点
1.webView如何加载H5页面
2.Android如何调用H5中的方法
3.H5如何调用Android中的方法
一、webView如何加载H5页面
1.载入远程页面
（1）在AndroidManifest.xml文件中添加权限
<uses-permission android:name="android.permission.INTERNET"/>
（2）布局文件webview.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <WebView android:id="@+id/wv_webview" android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout>
（3）MainActivity.java
public class MainActivity extends AppCompatActivity { WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.webview); webView = (WebView)findViewById(R.id.wv_webview); loadWeb(); } public void loadWeb(){ //String url = "https://www.baidu.com/"; String url = "file:///android_asset/index.html"; //此方法可以在webview中打开链接而不会跳转到外部浏览器 webView.setWebViewClient(new WebViewClient()); webView.loadUrl(url); } //重载onKeyDown的函数，使其在页面内回退,而不是直接退出程序 public boolean onKeyDown(int keyCode, KeyEvent event) { if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){ webView.goBack(); return true; } return super.onKeyDown(keyCode, event); } }
2.载入本地页面
（1）新建assets目录用来存放html页面
右键app->new->folder->assetsfolder
（2）html页面放入assets目录
（3）修改url
webview.loadUrl(file:///android_asset/index.html);
二、Android如何调用H5中的方法
（1）添加webview对调用js方法的支持
//支持html中javascript解析，不管是不是js和android交互，只要网页中含有js都要
webView.getSettings().setJavaScriptEnabled(true);
//支持弹窗，也就是支持html网页弹框
webView.setWebChromeClient(new WebChromeClient(){
public boolean onJsAlert(WebView view,String url,String message,JsResult result ){
return super.onJsAlert(view,url,message,result);
}
});
（2）调用h5无参无返回值的方法（直接调用）
h5方法：
function show(){
document.getElementById("temp").innerHTML = "Hello world";
}
调用：
webView.loadUrl("javascript:show()");
（3）调用h5有参无返回值的方法
当调用H5带参数的方法时，势必要传入一个字符串，当传入固定字符串时，用单引号括起来即可；当传入变量名时，需要用转义符。
h5方法：
function alertMsg(message){
alert(message);
}
调用：
webView.loadUrl("javascript:alertMsg('哈哈')");
String content = "9880";
webView.loadUrl("javascript:alertMsg(\""+content+"\")");
（4）调用h5有返回值方法
function sum(i,j){
return i+j;
}
调用：
webView.evaluateJavascript("sum(1,2)",new ValueCallback() {
@Override
public void onReceiveValue(Object value) {
Toast.makeText(MainActivity.this,"js返回结果为="+value,Toast.LENGTH_LONG).show();
}
});
完整代码：
index.html
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
</head>
<body onLoad="init();">
<div id="temp">h5页面</div>
</body>
<script type="text/javascript">
//无参无返回值的方法
function show(){
document.getElementById("temp").innerHTML = "Hello world";
}
//有返回值的方法
function sum(i,j){
return i+j;
}
//有参无返回值的方法
function alertMsg(message){
alert(message);
}
</script>
</html>
webview.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<Button
android:id="@+id/btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Button"
android:layout_marginBottom="12dp"
android:layout_marginTop="8dp"/>
<WebView
android:id="@+id/wv_webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</WebView>
</LinearLayout>
MainActivity.java
public class MainActivity extends AppCompatActivity {
WebView webView;
Button btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
btn = (Button)findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener(){
public void onClick(View v){
//调用H5无参无返回值方法
webView.loadUrl("javascript:show()");
//调用H5有参方法
webView.loadUrl("javascript:alertMsg('哈哈')");
String content = "9880";
webView.loadUrl("javascript:alertMsg(\""+content+"\")");
//调用H5有返回值方法
webView.evaluateJavascript("sum(1,2)",new ValueCallback() {
@Override
public void onReceiveValue(Object value) {
Toast.makeText(MainActivity.this,"js返回结果为="+value,Toast.LENGTH_LONG).show();
}
});
}
});
webView = (WebView)findViewById(R.id.wv_webview);
loadWeb();
}
@SuppressLint("JavascriptInterface")
public void loadWeb(){
String url = "file:///android_asset/index.html";
//此方法可以在webview中打开链接而不会跳转到外部浏览器
webView.setWebViewClient(new WebViewClient());
webView.loadUrl(url);
//支持弹窗，也就是支持html网页弹框
webView.setWebChromeClient(new WebChromeClient(){
public boolean onJsAlert(WebView view,String url,String message,JsResult result ){
return super.onJsAlert(view,url,message,result);
}
});
//支持html中javascript解析，不管是不是js和android交互，只要网页中含有js都要
webView.getSettings().setJavaScriptEnabled(true);
}
public boolean onKeyDown(int keyCode, KeyEvent event) {
//重写onKeyDown，当浏览网页，WebView可以后退时执行后退操作。
if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
webView.goBack();
return true;
}
return super.onKeyDown(keyCode,event);
}
}
三、H5如何调用Android中的方法
Android需要新建一个类，里边提供给H5操作的方法，并规定别名。
（1）新建一个类
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
（2）webView添加js接口，并起别名
webView.addJavascriptInterface(new JsInteration(),"android");
（3）H5调用
window.android.back();
完整代码：
index.html
<!DOCTYPE html> <html> <head> <title>测试</title> </head> <body onLoad="init();"> <div id="temp">h5页面</div> <button id="btn" onclick="getMsg()">按钮</button> </body> <script type="text/javascript"> function getMsg(){ var result=window.android.back(); document.getElementById("temp").innerHTML=result; } </script> </html>
MainActivity.java
public class MainActivity extends AppCompatActivity {
WebView webView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
webView = (WebView)findViewById(R.id.wv_webview);
loadWeb();
}
@SuppressLint("JavascriptInterface")
public void loadWeb(){
String url = "file:///android_asset/dj_index.html";
//此方法可以在webview中打开链接而不会跳转到外部浏览器
webView.setWebViewClient(new WebViewClient());
webView.loadUrl(url);
/*
打开js接口，参数1为本地类名；参数2为别名
*/
webView.addJavascriptInterface(new JsInteration(),"android");
}
public class JsInteration {
@JavascriptInterface//一定要写，不然h5调不到这个方法
public String back() {
return "hello world";
}
}
public boolean onKeyDown(int keyCode, KeyEvent event) {
//重写onKeyDown，当浏览网页，WebView可以后退时执行后退操作。
if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
webView.goBack();
return true;
}
return super.onKeyDown(keyCode,event);
}
}
