》背景：
隨着微信小程序的流行，市面上颳起了一股H5的浪潮；甚至，有流言——H5將取代傳統app。對此，本人不做評論。 然而事實證明，她並不能取代。時間也爲我們篩選出了一種做法——混合開發，即使用H5來作爲程序中的某些界面。那麼，問題來了，我們該怎麼“混合”呢？ 我們知道app中，最重要的一點就是“交互”，解決了交互問題，就自然而然地“混合”了。下面，交互的方法。
》與H5交互：
1.配置：
》提供js支持：
mWeb.getSettings().setJavaScriptEnabled(true);
》提供JS調用的方法（我們一般寫在一個類裏，便於管理）：
（tips：提供的對外方法必須被@JavascriptInterface註解）
/**
* provide methods for js
*/
class JavaMethod {
@JavascriptInterface
public void jump() {
JumpUtils.simpleJump(MainActivity.this, WebActivity.class);
}
@JavascriptInterface
public void search() {
ToastUtils.simpleToast(MainActivity.this, "invoke by js");
}
}
》提供JS調用接口：
mWeb.addJavascriptInterface(new JavaMethod(), "javaMethod");//param1，方法類對象；param2，對象名（供js通過對象調用裏賣弄的方法）
2.JS調用java方法
<a onClick="window.javaMethod.jump()"> <!--看見沒，javaMethod就是我們上面提供的對象名-->
<div style="width:80px;
margin:0px auto;
padding:10px;
text-align:center;
border:2px solid #202020;">
<img id="icon" src="code_scan.png"/><br>
Click me!
</div>
</a>3.JAVA調用JS方法
mWeb.loadUrl("javascript:goBaidu()");//直接以javascript：+js方法名
》完整測試demo
1.activity
public class MainActivity extends AppCompatActivity {
private WebView mWeb;
private Button updateBtn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
private void init() {
this.updateBtn = (Button) findViewById(R.id.update_btn);
this.updateBtn.setOnClickListener(mOnClickListener);
mWeb = (WebView) findViewById(R.id.mWeb);
mWeb.getSettings().setJavaScriptEnabled(true);
mWeb.loadUrl("file:///android_asset/android_js.html");
mWeb.addJavascriptInterface(new JavaMethod(), "javaMethod");
}
/**
* provide methods for js
*/
class JavaMethod {
@JavascriptInterface
public void jump() {
JumpUtils.simpleJump(MainActivity.this, WebActivity.class);
}
@JavascriptInterface
public void search() {
ToastUtils.simpleToast(MainActivity.this, "invoke by js");
}
}
private View.OnClickListener mOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.update_btn:
mWeb.loadUrl("javascript:goBaidu()");
break;
}
}
};
}2.JS
（注意：本地網頁及網頁引用圖片均放在assets文件夾下）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>android and js</title>
</head>
<body>
<p>It is my first js demo</p>
<hr width="80%"/>
<script type="text/javascript">
function greed(){
alert("It's my first h5 page");
document.getElementById("icon").src="code_add.png";
}
function goBaidu(){
window.location.href="https://www.baidu.com/"
<!--window.open("https://www.baidu.com/")-->
}
<!--// greed();-->
</script>
<!-- Calls into the javascript interface for the activity -->
<a onClick="window.javaMethod.jump()">
<div style="width:80px;
margin:0px auto;
padding:10px;
text-align:center;
border:2px solid #202020;">
<img id="icon" src="code_scan.png"/><br>
Click me!
</div>
</a>
<a onClick="window.javaMethod.search()">
<div style="width:80px;
margin:0px auto;
padding:10px;
text-align:center;
border:2px solid #202020;">
<img id="goBaidu" src="code_add.png"/><br>
百度一下!
</div>
</a>
</body>
</html>