这个主题csdn上一搜一大堆不过纸上得来终觉浅，还是自己敲一下代码＋写一篇文章印象更深。这个demo首先需要一个页面，为了快速直接用go搭了个本地服务器，快速的撸了一个页面，代码如下：
<!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>
// 页面按钮点击会调用这个函数，后续可以知道stone_bridge是app端注册的interface名字，showToast是java实现的方法。
function callJava() {
window.stone_bridge.showToast("hi from Javascript!");
}
// 这个js实现的函数用来被java调用，后续可以看到java怎么调用到这里来
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就行，不过我就是想放到服务器上咋地。)
需要注意的是如果用模拟器跑测试app，页面放在开发机上的话，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，算是实现了一个浏览器了 ：）
接着是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调用java代码，见javascript代码
mWebView.addJavascriptInterface(new JsStoneInterface(), "stone_bridge");
// 加入这个用于监听页面加载事件，因为页面需要完全加载完成才能接受js调用
mWebView.setWebViewClient(new myWebClient());
// 需要设置web chrome client页面的alert()函数才能正确弹框
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) {
// 对应html代码，其中showAlert目标js函数，注意大小写
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()调用到这里
@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();
}
}
}
因为没有在实际项目中用上，所以还没有尝试各种高级的玩法，不过应付各种合理的需求也够用了。
网友评论