Android与Js调用

最新推荐文章于 2024-07-24 11:23:56 发布
qq_26122879
最新推荐文章于 2024-07-24 11:23:56 发布
阅读量208
点赞数
 
 
  
  随着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内容如下
  
  <!DOCTYPE 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;
  }

 <div id="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;
}
<div id="androidgetjs"></div>

  
  在js中用了androidjs.showInfoFromJs("I'M FROM JS!!!")调用android的方法。其中androidjs就是先前在java代码中定义那个字段。这里一定要对应。然后将showInfoFromJs的返回值显示在div中。
显示如图：
  
  
   
   
    
    
    
    
     
     
    
    
   
   
   
   
  
  
  
  提醒
  
  别忘记在manifest中加入网络权限。
  
  <uses-permission android:name="android.permission.INTERNET" />
  
  到此android和js之间的相互调用就完了。
 
 


作者：阿祥JOKER
链接：https://www.jianshu.com/p/cb928de89d49
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。