你在公司里写一个Android App会出现这么个情况：
某天，老大突然跟你说，有一个新的需求，界面大概是这样的：……%￥#@。你一听完，头皮发麻，UI界面这么复杂。这时候老大看你难受的样子，突然告诉你说：我们决定用H5页面代替这个界面，用JS来调用客户端的一些逻辑。你一听，很happy，终于不用写这么复杂的界面了。那么WebView如何和JS进行互通呢？
下面就告诉如何通过JS让客户端显示一个Toast。
一、开启WebView的JS功能
在Android的WebView中，我们可以通过addJavaScriptInterface(Object obj,String interfaceName)方法来给这个WebView设置一个JS对象，这样网页的JS就可以通过指定的对象名和方法来调用客户端的一些方法了。
在添加JS对象之前，我们需要给WebView开启JS功能。通过如下代码：
mWebView.getSettings().setJavaScriptEnabled(true);二、编写JS对象
紧接着，我们需要编写一个JS对象来供网页调取，我们新建一个类，并将其命名为MyJSInterface，这时候我们有个需求，并在这个类里面创建一个名为showToast的方法，并且在里面实现show Toast方法，需要注意的是，在JS的方法中，是运行在其他线程而不是主线程的，所以对UI的操作需要额外进行处理，实现方法后在这个方法名前面加上@JavascriptInterface注释，这个标签表示这是个JS接口，可以被网页调用的，如下代码：
public class JSInterface {
private Context mContext;
public JSInterface(Context context){
mContext = context;
}
@JavascriptInterface
public void showToast(String s){
new Handler(mContext.getMainLooper()).post(new Runnable() {
@Override
public void run() {
Toast.makeText(mContext,s,Toast.LENGTH_SHORT).show();
}
}
}
}三、注册这个JS到WebView中
通过addJavaScriptInterface方法将JS对象添加到WebView中，并给这个JS对象取名为MyJS，如下所示
mWebView.addJavascriptInterface(new MyJSInterface(mContext),
"MyJSInterface");这里我们注意到add关键字，这说明WebView可以被添加多个JS对象，并指定不同的对象名，这里我们只添加一个，并取名MyJSInterface。
四、编写一个JS网页测试事例
这里我们编写一个JS网页测试事例来验证网页通过JS的showToast方法可以直接调用到程序中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>TEST DEMO</title>
</head>
<body>
<div class="container">
<div class="per_container"><button type="button" οnclick="showToast();">分享</button></div>
</div>
<script>
function showToast(){
MyJSInterface.showToast('Test');
}
</script>
</body>
</html>如代码所示，网页端只要在function中编写MyJSInterface.showToast(s);（对象名.方法）方法就可以触发客户端对应的showToast方法。
1250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
