Andorid APP与JS交互

最新推荐文章于 2024-04-16 20:33:30 发布

娃哈哈19910206

最新推荐文章于 2024-04-16 20:33:30 发布

阅读量362

点赞数

本文链接：https://blog.csdn.net/a872822645/article/details/85692809

版权

本文展示了Android APP与js交互的代码，大部分来源于网路。DEMO地址：https://download.csdn.net/download/a872822645/10892939

首先是js界面：

<!DOCTYPE html>
<html lang="en">
<head>  
     <meta content="text/html" charset="UTF-8" http-equiv="content-type">
     <title>这里是一个H5页面</title>  
</head>  
  
<body>  
<p id="ptext" >点击按键0 执行android中的 public void click0(){} 方法</p>  
<Button id="buttonId0" class="buttonClass" οnclick="showinfo()">按键0</Button>  
<p>点击按键1 执行android中的 public void click0(String data1,String data2){}方法</p>  
<Button id="buttonId1" class="buttonClass" οnclick="javascript:android.click0('参数1','参数2')">按键1</Button>  
  
<script>
    function setRed(){
        //这个方法设置 id 为 ptext 的元素的背景色为红色  
        var a = document.getElementById('ptext');
        a.style.backgroundColor="#F00";
    }
    function setColor(color,text){
        //这个方法设置 id 为 ptext 的元素的背景色为指定颜色  
        //设置 id 为 ptext 的元素的内容为text  
        var a = document.getElementById('ptext');
        a.style.backgroundColor=color;
        a.innerHTML = text;
    }
    function showinfo() {
        console.log("孙磊");
        android.click0();
    }
</script>  
</body>  
</html>

然后是：Andorid 界面

Activity:

package com.picc.greendao;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;
/**
 * <p>create by sunlei on 2019/1/3
 * <p>872822645@qq.com
 * <p>Describe :
 */
public class HtmlDemoActivity extends Activity implements View.OnClickListener {
    private WebView webView;
    private Button redButton, colorButton;
    Handler myHandler;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_html);
        webView = (WebView) findViewById(R.id.webview);
        redButton = (Button) findViewById(R.id.red);
         myHandler=new Handler();
        colorButton = (Button) findViewById(R.id.color);
        redButton.setOnClickListener(this);
        colorButton.setOnClickListener(this);
        initWebView();
        webView.loadUrl("file:///android_asset/mutual.html");//加载assets文件中的H5页面  
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.red:
                webView.loadUrl("javascript:setRed()");
                break;
            case R.id.color:
                webView.loadUrl("javascript:setColor('#00f','这是android 原生调用JS代码的触发事件')");
                break;
        }
    }
    private void initWebView() {
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);//设置运行使用JS  
        ButtonClick click = new ButtonClick();
//这里添加JS的交互事件，这样H5就可以调用原生的代码  
        webView.addJavascriptInterface(click, "android");
    }
  public  class ButtonClick {
        @JavascriptInterface
        public void click0() {
            show("title", "");
        }
        @JavascriptInterface
        public void click0(String data1, String data2) {
            show(data1, data2);
        }
        private void show(final String title, String data) {
            Toast.makeText(getApplication(),"测试",Toast.LENGTH_LONG).show();
            Log.d("result","sunlei1");
            myHandler.post(new Runnable() {
                @Override
                public void run() {
                    redButton.setText(title);
                }
            });
            Log.d("result","sunlei2");
        }
    }
}

xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
      <WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</WebView>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        >
        <Button
            android:id="@+id/red"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="背景变成红色"/>
        <Button
            android:id="@+id/color"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:layout_weight="1"
            android:text="背景色可以自定义"/>
    </LinearLayout>
</RelativeLayout>

总结：本项目本人亲测有效。如果您复制粘贴出现异常。请检查代码格式问题。

上面项目用Handler 是一个需要注意的地方。。如果不使用Handler是会报错的。。注意。

娃哈哈19910206

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Andorid APP与JS交互

本文展示了Android APP与js交互的代码，大部分来源于网路。DEMO地址：https://download.csdn.net/download/a872822645/10892939首先是js界面：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta content="text/html...
复制链接

扫一扫