Android与H5交互

最新推荐文章于 2024-08-12 04:01:01 发布

Android_覃杰

最新推荐文章于 2024-08-12 04:01:01 发布

阅读量328

点赞数

分类专栏： Android 高级开发文章标签： android html h5

本文链接：https://blog.csdn.net/qjsjjsotony/article/details/76721630

版权

Android 高级开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近项目中需要用到与HTML5交互,也就是WebView的使用,与js的交互肯定必不可少.Java与JS的相互调用.先看效果图:

首先在Module下的assets目录下有个本地的.html文件,我们知道assets目录下的文件是被原封不动的打包进apk的.如下图所示
web.html

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type="text/javascript">
   function javaCallJs(arg){
       document.getElementById("content").innerHTML =
            ("androidJS互调："+arg );
   }
    </script>
</head>
<body>
<div align="left" id="content"> </div><br/>
<input type="button" value="js调android " οnclick="window.Android.showToast()" />
</body>
</html>

xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@android:color/holo_blue_light"
        android:gravity="center">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="登录页面"
            android:textColor="@android:color/black"
            android:textSize="20sp" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/bg_shap"
            android:orientation="vertical"
            android:padding="5dp">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="账号："
                android:textColor="#000000" />
            <EditText
                android:id="@+id/et_number"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="请输入账号..."
                android:textColor="#000000" />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="密码："
                android:textColor="#000000" />
            <EditText
                android:id="@+id/et_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="请输入密码..."
                android:password="true"
                android:textColor="#000000" />
            <Button
                android:id="@+id/btn_login"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="登录"
                android:textColor="#000000"
                android:textSize="25sp" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

JavaAndJSActivity

**
 * 作用：java和js互调
 */
public class JavaAndJSActivity extends Activity implements View.OnClickListener {
    private EditText etNumber;
    private EditText etPassword;
    private Button btnLogin;
    private WebView webView;

    private void findViews() {
        setContentView(R.layout.activity_java_and_js);
        etNumber = (EditText) findViewById(R.id.et_number);
        etPassword = (EditText) findViewById(R.id.et_password);
        btnLogin = (Button) findViewById(R.id.btn_login);
        btnLogin.setOnClickListener(this);
        initWebView();
    }

    @Override
    public void onClick(View v) {
        if (v == btnLogin) {
            login();
        }
    }

    private void login() {
        String numebr = etNumber.getText().toString().trim();
        String password = etPassword.getText().toString().trim();
        if (TextUtils.isEmpty(numebr) || TextUtils.isEmpty(password)) {
            Toast.makeText(JavaAndJSActivity.this, "账号或者密码为空", Toast.LENGTH_SHORT).show();
        } else {
            //登录
            login(numebr);
        }
    }

    /**
     * Java调用javaScript
     * @param numebr
     */
    private void login(String numebr) {
        webView.loadUrl("javascript:javaCallJs(" + "'" + numebr + "'" + ")");
        setContentView(webView);
    }
    private void initWebView() {
        webView = new WebView(this);
        WebSettings webSettings = webView.getSettings();
        //设置支持javaScript脚步语言
        webSettings.setJavaScriptEnabled(true);
        //支持双击-前提是页面要支持才显示
//        webSettings.setUseWideViewPort(true);
        //支持缩放按钮-前提是页面要支持才显示
        webSettings.setBuiltInZoomControls(true);
        //设置客户端-不跳转到默认浏览器中
        webView.setWebViewClient(new WebViewClient());
        //设置支持js调用java
        webView.addJavascriptInterface(new AndroidAndJSInterface(), "Android");
        //加载网络资源
//        webView.loadUrl("http://10.0.2.2:8080/assets/JavaAndJavaScriptCall.html");
        webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");
    }
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        findViews();
    }
    /**
     * js可以调用该类的方法
     */
    class AndroidAndJSInterface {
        @JavascriptInterface
        public void showToast() {
            Toast.makeText(JavaAndJSActivity.this, "我被js调用了哦!", Toast.LENGTH_SHORT).show();
        }
    }

WebView还有很多方法,体现了其强大之处,后续用到再继续补充!!!!!!!

Android_覃杰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android与H5交互

最近项目中需要用到与HTML5交互,也就是WebView的使用,与js的交互肯定必不可少.Java与JS的相互调用.先看效果图:首先在Module下的assets目录下有个本地的.html文件,我们知道assets目录下的文件是被原封不动的打包进apk的.如下图所示web.htmlhtml>head> meta http-equiv="Content-Ty
复制链接

扫一扫

专栏目录