這個(gè)主題csdn上一搜一大堆不過(guò)紙上得來(lái)終覺淺，還是自己敲一下代碼＋寫一篇文章印象更深。這個(gè)demo首先需要一個(gè)頁(yè)面，為了快速直接用go搭了個(gè)本地服務(wù)器，快速的擼了一個(gè)頁(yè)面，代碼如下：
<!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>
// 頁(yè)面按鈕點(diǎn)擊會(huì)調(diào)用這個(gè)函數(shù)，后續(xù)可以知道stone_bridge是app端注冊(cè)的interface名字，showToast是java實(shí)現(xiàn)的方法。
function callJava() {
window.stone_bridge.showToast("hi from Javascript!");
}
// 這個(gè)js實(shí)現(xiàn)的函數(shù)用來(lái)被java調(diào)用，后續(xù)可以看到j(luò)ava怎么調(diào)用到這里來(lái)
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>
頁(yè)面非常簡(jiǎn)單，歡迎語(yǔ)加一個(gè)按鈕，測(cè)試的時(shí)候放到之前一個(gè)go項(xiàng)目上，為了簡(jiǎn)略就不上go代碼了。其實(shí)可以用python，php都可以快速的部署起來(lái)。
(其實(shí)直接把index.html放到assets目錄，本地load就行，不過(guò)我就是想放到服務(wù)器上咋地。)
需要注意的是如果用模擬器跑測(cè)試app，頁(yè)面放在開發(fā)機(jī)上的話，webview需要load的地址就不能用127.0.0.1了，而是要用10.0.2.2，見圖
Screenshot_1508900850.png
頁(yè)面擼完開始擼app，新建project什么的就不說(shuō)了，首先上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>
有地址欄，有測(cè)試按鈕，還有中間一個(gè)大webview，算是實(shí)現(xiàn)了一個(gè)瀏覽器了 ：）
接著是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");
// 加入這個(gè)用于監(jiān)聽頁(yè)面加載事件，因?yàn)轫?yè)面需要完全加載完成才能接受js調(diào)用
mWebView.setWebViewClient(new myWebClient());
// 需要設(shè)置web chrome client頁(yè)面的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) {
// 確認(rèn)頁(yè)面加載好了再運(yùn)行
if(mLoadFinished) {
// 對(duì)應(yīng)html代碼，其中showAlert目標(biāo)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代碼通過(guò)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àn)闆]有在實(shí)際項(xiàng)目中用上，所以還沒有嘗試各種高級(jí)的玩法，不過(guò)應(yīng)付各種合理的需求也夠用了。
