Android与Js调用
随着html5的发展,android原生应用与h5的结合已经越来越多。android与js之间的相互调用也变得越来越频繁。啦啦啦,今天就来写一个简单的列子记录记录。
实列
我们新建一个项目JSBridge。
1.编写activity_main。
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="com.jokerchan.jsbridge.MainActivity">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<Button
android:id="@+id/clickjs"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:text="android调用js"
android:textColor="#000000" />
<EditText
android:id="@+id/showjs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/clickjs"
android:hint="请输入内容" />
RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
>
<EditText
android:id="@+id/jsshow"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="16sp"
android:editable="false"
android:hint="这是JS调用android的方法"
/>
RelativeLayout>
<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
LinearLayout>
布局文件很简单,主要是按钮和显示的部分,其中最重要的有一个webview用来展示网页内容。
2.编写本地html文件
我们建立一个joker.html然后编写一个简单的html内容如下
<html xmlns="http://www.w3.org/1999/html">
<head>
head>
<body>
<script>
//js调用android程序中的方法
function jsGetAndroid(){
var msg = androidjs.showInfoFromJs("I'M FROM JS!!!");
document.getElementById("androidgetjs").innerHTML=msg;
}
//android程序中调用js的方法
function androidGetJs(msg){
document.getElementById("androidgetjs").innerHTML="来自Android的消息："+msg;
}
script>
<button id="jsgetandroid" onclick="jsGetAndroid()">点我调用android方法button>
br>
<div id="androidgetjs">div>
br>
<div id="fromandroid">div>
body>
html>
其中里面包含了几个显示控件和两个js函数,这也先不解释。会html的人看一眼就知道了。
3.编写activity中代码。
/**
* android 和JS的交互简单使用
*
* @author jokerchan
* @version 1.0
* @since 2016年4月14日 14:53:51
* SuppressLint一定要加上去！！！
* 低版本可能没问题，高版本JS铁定调不了Android里面的方法
*/
@SuppressLint("SetJavaScriptEnabled")
public class MainActivity extends AppCompatActivity {
private WebView webview;
EditText showjs;
EditText jsshow;
Button clickjs;
@SuppressLint("JavascriptInterface")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
webview = (WebView) findViewById(R.id.webview);
showjs = (EditText) findViewById(R.id.showjs);
jsshow = (EditText) findViewById(R.id.jsshow);
clickjs = (Button) findViewById(R.id.clickjs);
webview.getSettings().setDefaultTextEncodingName("utf-8");
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(new JavaScriptInterface(this), "androidjs");
webview.loadUrl("file:///android_asset/joker.html");
clickjs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String msg = showjs.getText().toString().trim();
webview.loadUrl("javascript:androidGetJs('" + msg + "')");
}
});
}
public class JavaScriptInterface {
Context context;
JavaScriptInterface(Context context) {
this.context = context;
}
//在js中调用 androidjs.showInfoFromJs("I'M FROM JS!!!")就会出发此方法
@JavascriptInterface
public String showInfoFromJs(final String name) {
runOnUiThread(new Runnable() {
@Override
public void run() {
jsshow.setText(name);
}
});
return "I'M FROM ANDROID!!!";
}
}
}
其中注意@SuppressLint("SetJavaScriptEnabled")一定要加上,以前做项目的时候也被坑过。
Android调用Js
首先我们对webview进行一些设置。
//设置编码为utf-8
webview.getSettings().setDefaultTextEncodingName("utf-8");
//设置javascript支持
webview.getSettings().setJavaScriptEnabled(true);
//添加js接口
webview.addJavascriptInterface(new JavaScriptInterface(this), "androidjs");
//加载html
webview.loadUrl("file:///android_asset/joker.html");
然后我们在html中定义了一个js方法。和一个显示信息的div
//android程序中调用js的方法
function androidGetJs(msg){
document.getElementById("androidgetjs").innerHTML="来自Android的消息："+msg;
}
"androidgetjs">div>
然后我们获取edittext里面的值并点击按钮调用js里面的方法
clickjs.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
String msg = showjs.getText().toString().trim();
webview.loadUrl("javascript:androidGetJs('" + msg + "')");
}
});
可以看见只需要webview.loadUrl("javascript:androidGetJs('" + msg + "')")简单一句就可以调用js里面的方法。javascript:后面跟的androidGetJs就是js里面定义的方法。然后我们讲android传递过去的值显示在了div上,效果如图。
Js调用Android
看这句代码webview.addJavascriptInterface(new JavaScriptInterface(this), "androidjs")
其中有一个JavaScriptInterface对象,后面是一个字符组androidjs这个androidjs就是等会在js中调用android方法的时候会用到的,不然会找不到方法。
下面看看JavaScriptInterface的实现
public class JavaScriptInterface {
Context context;
JavaScriptInterface(Context context) {
this.context = context;
}
//在js中调用 androidjs.showInfoFromJs("I'M FROM JS!!!")就会出发此方法
@JavascriptInterface
public String showInfoFromJs(final String name) {
runOnUiThread(new Runnable() {
@Override
public void run() {
jsshow.setText(name);
}
});
return "I'M FROM ANDROID!!!";
}
}
因为js调用android方法不再ui线程。所以更新的时候用了runOnUiThread。其中showInfoFromJs就是js中要调用的方法。记得在方法前加上@JavascriptInterface。然后在看看js代码。
//js调用android程序中的方法
function jsGetAndroid(){
var msg = androidjs.showInfoFromJs("I'M FROM JS!!!");
document.getElementById("androidgetjs").innerHTML=msg;
}
"androidgetjs">div>
在js中用了androidjs.showInfoFromJs("I'M FROM JS!!!")调用android的方法。其中androidjs就是先前在java代码中定义那个字段。这里一定要对应。然后将showInfoFromJs的返回值显示在div中。
显示如图：
提醒
别忘记在manifest中加入网络权限。
到此android和js之间的相互调用就完了。
作者：阿祥JOKER
链接：https://www.jianshu.com/p/cb928de89d49
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。