Android 原生应用如何与js互调
2017-09-04 本文已影响76人
flemingchen
WebView是关键
WebView等一系列的类都来自Android sdk中的webkit包，使用webview可以在应用中展示html的界面，方便跨平台复用，javascript则起到了画龙点睛的作用，这里记录一下实现方式。
启用javascript
开启webview的javascript调用：
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
java调用js
- 利用webview.loadUrl()方法
注意格式：javascript:方法名
如：webview.loadUrl("javascript:javaCallJs()");不带参数
webview.loadUrl("javascript:javaCallJs('args1')");带参数，单引号括起来
js调用java
- 利用
webView.addJavascriptInterface()方法
如：webView.addJavascriptInterface(new JsCallJava(), "jcj");
注意：参数1是个普通的java类，参数2是用于在js中表示JsCallJava这个对象
代码
MainActivity.java
public class MainActivity extends AppCompatActivity {
//右击main目录选择Folder，新建Assets Folder
private static final String INDEX = "file:///android_asset/index.html";
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = initWebView();
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
login("fleming");
}
});
}
@SuppressLint("JavascriptInterface")
private WebView initWebView() {
WebView webView = (WebView) findViewById(R.id.web_view);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient());
webView.addJavascriptInterface(new JsCallJava(), "jcj");
webView.loadUrl(INDEX);
return webView;
}
private void login(String name) {
String js = "javascript:javaCallJs("+"'"+ name + "'" + ")";
mWebView.loadUrl(js); // java调用js
}
class JsCallJava {
@JavascriptInterface
public void showToast() {
Toast.makeText(MainActivity.this, "登录成功", Toast.LENGTH_SHORT).show();
}
}
}
index.html
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<script type="text/javascript">
function javaCallJs(arg){
document.getElementById("content").innerHTML = ("欢迎：" + arg);
}
</script>
</head>
<body>
<p id="content">hello world</p>
<!-- js调用java -->
<button onclick="window.jcj.showToast()">login</button>
</body>
</html>
附：
在AS中建Assets目录
