前言
在没有跨平台框架之前,为了达到兼容的目的,大家都用WebView去嵌套网页,安卓和IOS之间也可以达到同样的效果,那安卓中的WebView是如何与网页进行交互的呢?
JS 调用安卓方法
- 原理
JS 调用 Android,用到了JNI,大概含义是将注册监听的方法,通过一些类转成Javascript语句,由WebView加载进来。
- 实现
整体代码比较简单,注意其中的对应关系
MainActivity
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView mWebView =findViewById(R.id.webView);
WebSettings webSettings = mWebView.getSettings();
// 打开开关,设置与Js交互的权限
webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JSBridge(),"bridge");
// 加载JS代码
mWebView.loadUrl("http://192.168.2.52:3001/test.html");
}
public class JSBridge {
// @JavascriptInterface 必须加上
@JavascriptInterface
public void print(String msg) {
System.out.println("JS调用了Android的print方法");
}
}
}
loadUrl 可以是项目中asset文件夹下的文件,也可以是一个http地址。
JSBridge 中的注解必须要加,是靠注解识别本地监听方法。
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<script>
function callAndroid(){
bridge.print("js去调用了android中的print方法");
}
</script>
</head>
<body>
<button type="button" id="button1" onclick="callAndroid()">点击按钮调用</button>
</body>
</html>
其中bridge.print
在原生方法中已经有定义。
安卓调用JS方法
- 原理
由于JS很灵活,使用JS动态注入的思想,可以让安卓调用到JS方法。就像在浏览器的控制台,你写好js,它也可以改变或者调用网页上的东西。
- 实现
public class MainActivity2 extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
WebView mWebView =findViewById(R.id.webView);
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true); // 设置与Js交互的权限
webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗
mWebView.loadUrl("http://192.168.2.52:3001/test2.html");
Button button = findViewById(R.id.button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 通过Handler发送消息
mWebView.post(new Runnable() {
@Override
public void run() {
// 调用javascript的callJS()方法
mWebView.loadUrl("javascript:callJS()");
}
});
}
});
mWebView.setWebChromeClient(new WebChromeClient());
}
}
mWebView.setWebChromeClient 是为了让前段的弹窗顺利弹出。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity2">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="测试" />
<WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Carson_Ho</title>
<script>
function callJS(){
alert("Android调用了JS的callJS方法");
}
</script>
</head>
</html>
callJS 就是安卓调用的方法。
写在最后
在技术领域内,没有任何一门课程可以让你学完后一劳永逸,再好的课程也只能是“师傅领进门,修行靠个人”。“学无止境”这句话,在任何技术领域,都不只是良好的习惯,更是程序员和工程师们不被时代淘汰、获得更好机会和发展的必要前提。
如果你觉得自己学习效率低,缺乏正确的指导,可以扫码,加入我们资源丰富,学习氛围浓厚的技术圈一起学习交流吧!