這個主題csdn上一搜一大堆不過紙上得來終覺淺，還是自己敲一下代碼＋寫一篇文章印象更深。這個demo首先需要一個頁面，為了快速直接用go搭了個本地服務(wù)器，快速的擼了一個頁面，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>StoneHello</title>
<!-- style sheet -->
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../dist/css/AdminLTE.min.css">
<script>
// 頁面按鈕點擊會調(diào)用這個函數(shù)，后續(xù)可以知道stone_bridge是app端注冊的interface名字，showToast是java實現(xiàn)的方法。
function callJava() {
window.stone_bridge.showToast("hi from Javascript!");
}
// 這個js實現(xiàn)的函數(shù)用來被java調(diào)用，后續(xù)可以看到j(luò)ava怎么調(diào)用到這里來
function showAlert(message) {
alert(message);
}
</script>
</head>
<body>
<h1>Hello, Stone :)</h1>
<div class="col-xs-4 btn-block">
<input type="button" id="login_btn" class="btn btn-primary btn-block btn-flat" value="test" onclick="callJava()" />
</div>
</body>
</html>
頁面非常簡單，歡迎語加一個按鈕，測試的時候放到之前一個go項目上，為了簡略就不上go代碼了。其實可以用python，php都可以快速的部署起來。
(其實直接把index.html放到assets目錄，本地load就行，不過我就是想放到服務(wù)器上咋地。)
需要注意的是如果用模擬器跑測試app，頁面放在開發(fā)機上的話，webview需要load的地址就不能用127.0.0.1了，而是要用10.0.2.2，見圖
Screenshot_1508900850.png
頁面擼完開始擼app，新建project什么的就不說了，首先上layout：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:focusable="true"
android:focusableInTouchMode="true"
android:background="@android:color/white"
tools:context="com.example.moe.webviewdemo.MainActivity">
<Button
android:id="@+id/btn_go"
android:layout_alignParentRight="true"
android:text="GO"
android:textSize="16dp"
android:padding="4dp"
android:background="@android:color/holo_blue_bright"
android:gravity="center"
android:textColor="@android:color/black"
android:layout_width="64dp"
android:layout_height="48dp" />
<EditText
android:id="@+id/et_url"
android:maxLines="1"
android:text="@string/str_default_website"
android:textColor="@android:color/black"
android:textSize="16dp"
android:padding="8dp"
android:gravity="center_vertical"
android:layout_toLeftOf="@+id/btn_go"
android:layout_width="match_parent"
android:layout_height="48dp" />
<Button
android:id="@+id/btn_test"
android:text="Call H5"
android:textSize="16dp"
android:textColor="@android:color/black"
android:layout_alignParentBottom="true"
android:gravity="center"
android:layout_width="match_parent"
android:layout_height="48dp" />
<WebView
android:id="@+id/web_view"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
android:layout_below="@id/et_url"
android:layout_above="@id/btn_test"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
有地址欄，有測試按鈕，還有中間一個大webview，算是實現(xiàn)了一個瀏覽器了 ：）
接著是java代碼，需要注意的地方都在代碼里注釋了：
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private static final String TAG = "MainActivity";
private WebView mWebView;
private EditText mEtUrl;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initUI();
}
private void initUI() {
mEtUrl = (EditText) findViewById(R.id.et_url);
TextView btnGo = (TextView) findViewById(R.id.btn_go);
btnGo.setOnClickListener(this);
Button btnTest = (Button) findViewById(R.id.btn_test);
btnTest.setOnClickListener(this);
mWebView = (WebView) findViewById(R.id.web_view);
// 使能webview的js功能，不打開的話沒得玩
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
// 這里的nam，即stone_bridge用于js調(diào)用java代碼，見javascript代碼
mWebView.addJavascriptInterface(new JsStoneInterface(), "stone_bridge");
// 加入這個用于監(jiān)聽頁面加載事件，因為頁面需要完全加載完成才能接受js調(diào)用
mWebView.setWebViewClient(new myWebClient());
// 需要設(shè)置web chrome client頁面的alert()函數(shù)才能正確彈框
mWebView.setWebChromeClient(new WebChromeClient());
loadPage();
}
private boolean mLoadFinished = false;
private class myWebClient extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
mLoadFinished = true;
}
}
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.btn_go:
loadPage();
break;
case R.id.btn_test:
fireTest("Beware, human");
break;
}
}
private void fireTest(String warning) {
// 確認頁面加載好了再運行
if(mLoadFinished) {
// 對應(yīng)html代碼，其中showAlert目標js函數(shù)，注意大小寫
mWebView.loadUrl("javascript:showAlert('" + warning + "')");
} else {
Toast.makeText(this, "page not loaded", Toast.LENGTH_SHORT).show();
}
}
private void loadPage(){
mLoadFinished = false;
String url = mEtUrl.getText().toString().trim();
mWebView.loadUrl(url);
}
//-------------------------
// inner interface class
//-------------------------
public class JsStoneInterface {
// js代碼通過stone_bridge.showToast()調(diào)用到這里
@JavascriptInterface
public void showToast(String message){
Toast.makeText(getApplicationContext(), message, Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public void log(String message){
Log.d(TAG, "[Log]: " + message);
}
}
@Override
public void onBackPressed() {
if(mWebView.canGoBack()){
mWebView.goBack();
}else{
this.finish();
}
}
}
因為沒有在實際項目中用上，所以還沒有嘗試各種高級的玩法，不過應(yīng)付各種合理的需求也夠用了。
