android java 调用js_Android Java/JS互相调用

这个主题csdn上一搜一大堆不过纸上得来终觉浅，还是自己敲一下代码＋写一篇文章印象更深。这个demo首先需要一个页面，为了快速直接用go搭了个本地服务器，快速的撸了一个页面，代码如下：

StoneHello

// 页面按钮点击会调用这个函数，后续可以知道stone_bridge是app端注册的interface名字，showToast是java实现的方法。

function callJava() {

window.stone_bridge.showToast("hi from Javascript!");

}

// 这个js实现的函数用来被java调用，后续可以看到java怎么调用到这里来

function showAlert(message) {

alert(message);

}

Hello, Stone :)

页面非常简单，欢迎语加一个按钮，测试的时候放到之前一个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：

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">

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" />

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" />

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" />

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" />

有地址栏，有测试按钮，还有中间一个大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();

}

}

}

因为没有在实际项目中用上，所以还没有尝试各种高级的玩法，不过应付各种合理的需求也够用了。