Android和JS的互相调用
Android 调用JS
权限声明
Android调用JS的话一般通过webview进行。在一开始,我们需要在AndroidMainfest.xml文件中声明一下权限:
<uses-permission android:name="android.permission.Internet"/>
导入资源文件
在main文件夹下新建assets文件夹,并将html文件放入文件夹中。
在学习开发的时候因为html文件一般数量较少,所以可以直接放在assets文件夹下。
Android组件和设置
在Android中把组件设置好
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:padding="10dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android模块"
android:textColor="#000"
android:textStyle="bold"
android:textSize="18sp"/>
<Button
android:id="@+id/tv_androidcalljs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android调用Js"
android:gravity="center"
/>
<Button
android:id="@+id/tv_androidcalljsargs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Android调用Js并传参数"
android:gravity="center"
/>
<TextView
android:id="@+id/tv_showmsg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="调用Android显示结果"
android:textColor="#000"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</LinearLayout>
JAVA部分
private WebView webview;
private TextView tvJs;
private TextView tvJsArgs;
private TextView tvShowmsg;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
setWebview();
initView();
}
其中setWebview()函数是webview初始化函数,initView()函数是初始化其他组件的函数。
private void initView() {
tvJs = (TextView) findViewById(R.id.tv_androidcalljs);
tvJsArgs = (TextView) findViewById(R.id.tv_androidcalljsargs);
tvShowmsg = (TextView) findViewById(R.id.tv_showmsg);
tvJs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webview.loadUrl("javascript:javacalljs()");
//这里的loadUrl()括号里面是调用的JS方法
}
});
tvJsArgs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")");
}
});
}
private void setWebview() {
webview = (WebView) findViewById(R.id.webview);
WebSettings webSettings = webview.getSettings();
webSettings.setBuiltInZoomControls(true);
webSettings.setSupportZoom(true);
//与js交互必须设置
webSettings.setJavaScriptEnabled(true);
webview.loadUrl("file:///android_asset/html.html");
//这里的loadUrl()括号内是html文件地址
webview.addJavascriptInterface(MainActivity.this,"android");
}
然后声明两个函数提供给JS使用
@JavascriptInterface //Android中的方法如果要让JS调用,需要添加@JavascriptInterface
public void jsCallAndroid(){
tvShowmsg.setText("Js调用Android方法");
}
@JavascriptInterface
public void jsCallAndroidArgs(String args){
tvShowmsg.setText(args);
}
Android程序如果要调用JS的函数,可以通过两种方法。
webview.loadUrl();
webview.evaluateJavascript()
通过后种方法,我们不光可以实现调用,还可以拿到JS方法实现的返回值。
但是webview.evaluateJavascript()
只能在Android4.4及以上的版本使用,所以在没有做系统适配的情况下,还是使用webview.loadUrl()
更符合需要一些。
JAVA调用JS的函数
在Java中,可以通过webview.loadUrl()
来执行。
在上例的html文件中,有两个方法分别为
JavaCallJs();
JavaCallJsWithArgs(args);
两个函数的功能大致相同,后者比前者多一个传递参数的功能。
实际执行过程
首先,Android通过webview.loadUrl("file:///android_assest/html.html")
来打开html文件。
当按钮被点击的时候,根据按钮的不同分别执行不同函数。执行的方法和打开html文件一样:
webview.loadUrl("javascript:JavaCallJs()")
webview.loadUrl("javascript:JavaCallJsWithArgs(args)")
假如我们要传递的args为"Android called Js with args",
webview.loadUrl("javascript:JavaVallJsWithArgs("+'Android called Js with args'+")");
在html文件中的函数如下:
<script type="text/javascript">
function JavaCallJs(){
document.getElementById("showmsg").innerHTML = "Android调用了JS的无参函数";//无参调用
}
function JavaCallJsWithArgs(args){
document.getElementById("showmsg").innerHTML = (args);//传递参数调用
}
</script>
JS调用Android函数
Js调用Android函数相对简单,因为我们在Android的JAVA文件中已经给Js提供了函数,在调用的时候通过
window.android.jsCallAndroid();
window.android.jsCallAndroidArgs("Js传递过来的参数");
即可实现调用Android内的函数。
个人遇到的问题
我在拿成功的案例学习的过程中,始终无法将Java的参数传递到Js,检查多次之后才发现是没有给网络权限。因为之前在看demo和写demo的时候都是只调用了Js本地的方法,所以在做基于实际上线项目的学习时产生了疏漏,因予以注意。