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-8webview.getSettings().setDefaultTextEncodingName("utf-8");//设置javascript支持webview.getSettings().setJavaScriptEnabled(true);//添加js接口webview.addJavascriptInterface(new JavaScriptInterface(this), "androidjs");//加载htmlwebview.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
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

实列

Android调用Js

Js调用Android

提醒

更多相关文章

随机推荐