Android 与 H5 之间的互调

最新推荐文章于 2024-04-29 09:22:15 发布

jwllls

最新推荐文章于 2024-04-29 09:22:15 发布

阅读量515

点赞数 1

分类专栏： android 文章标签： android webview

本文链接：https://blog.csdn.net/jwllls/article/details/78750182

版权

android 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.前言

在APP的开发中嵌入了H5页面，这样就可以在Android和iOS系统上跑，大大节约了成本。因此作为移动端开发者，一定要学会使用手机系统与H5页面的互调，下面介绍一下Android与H5的互调，关于其具体使用会在代码中说明。

2.简介

安卓与H5的互调是在 WebView 上实现的，首先简单介绍一下WebView，它是一个基于webkit引擎，用于加载web页面的控件，在4.4后被替换成基于Chromium实现。有以下特点：
1. 能够加载网络页面和本地页面
2. 可以使 JAVA 和 JavaScript 相互操作
3. 可以自定义该控件

3.效果

输入账号密码，将用户名作为参数传递到网页中（java调js）
点击网页中的按钮，弹出提示（js调java）

这里写图片描述

4.代码

//H5代码如下
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script type="text/javascript">

    function javaCallJs(arg){
         document.getElementById("content").innerHTML =
             ("username："+arg );
    }

    </script>
</head>

<body>

<p align="center">这是一个网页</p>
<div id="content">content</div><br/>
<img  width="200" height="100" align="center" src="http://img4.imgtn.bdimg.com/it/u=2557743232,2622704824&fm=27&gp=0.jpg"><br/><br/>
<input  type="button" value="按钮" onclick="window.Android.showToast()"/>

</body>
</html>

Java调Js

// 登陆界面的java代码如下
public class LoginActivity extends AppCompatActivity implements OnClickListener {

    private AutoCompleteTextView etusername;   //账号编辑框
    private EditText etpassword;               //密码编辑框
    private Button btnLogin;                   //按钮
    private WebView webView;                   //Web视图

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        findViews();            //初始化控件
        initWebView();          //初始化webView
    }

    /**
     * 初始化控件
     */
    private void findViews() {
        etusername = (AutoCompleteTextView) findViewById(R.id.email);
        etpassword = (EditText) findViewById(R.id.password);
        btnLogin = (Button) findViewById(R.id.email_sign_in_button);
        btnLogin.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        if (v == btnLogin) {
            checkAccount();   //判断用户
        }
    }

    /**
     * 判断用户
     */
    private void checkAccount() {
        String username = etusername.getText().toString().trim();
        String psw = etpassword.getText().toString().trim();
        //判断非空
        if (TextUtils.isEmpty(username) || TextUtils.isEmpty(psw)) {
            Toast.makeText(this, "账号密码不能为空", Toast.LENGTH_SHORT).show();
        } else {
            login(username);  // 登陆，传入用户名
        }
    }

    /**
     * 登陆
     *
     * @param username
     */
    private void login(String username) {
        //将参数传到H5页面，注意括号中的书写格式
        webView.loadUrl("javascript:javaCallJs(" + "'" + username + "'" + ")");
        setContentView(webView);  //使webView显示页面
    }

    /**
     * 初始化WebView
     */
    public void initWebView() {
        webView = new WebView(this);

        WebSettings webSettings = webView.getSettings();

        //设置支持javaScript
        webSettings.setJavaScriptEnabled(true);

        //设置不调用系统自带的浏览器
        webView.setWebViewClient(new WebViewClient());

        //加载网络页面或者本地页面
        //webView.loadUrl("http://www.baidu.com");

        //加载本地图片，在项目的路径app/main中创建文件夹 assets
        //注意！！这里的 android-asset 中， asset 不能写成 assets ;
        webView.loadUrl("file:///android_asset/JavaAndJavaScript.html");
    }
}

Js调Java

步骤
1. 配置JavaScript接口
2. 实现javaScript接口

注意：当出现如下图问题的时候，有两种解决addJavascriptInterface无效的办法：

这里写图片描述

因为在API17的时候WebView进行了改版，因此知支持17以下的版本（不包括17）

//在build.gradle(APP)中，将targetSdkVersion改成16，如下：
   defaultConfig {
        applicationId "com.jwllls.androidh5demo"
        minSdkVersion 19
        targetSdkVersion 16
        versionCode 1
        versionName "1.0"
    }

在接口方法中添加注解，如下：

   // 该类的方法提供给JS调用
    class JsCallJavaInterface {
        @JavascriptInterface                         //添加注解
        public void showToast(Context context) {
            Toast.makeText(context, "js调Java", Toast.LENGTH_SHORT).show();
        }
    }

代码

//设置支持js调用java，js能够通过Android字段来调用AndroidAndJSInterface中的方法
webView.addJavascriptInterface(new AndroidAndJSInterface(),"Android");

// h5代码
<input type="button" value="按钮" onclick="window.Android.showToast()" />

5.总结

完成以上步骤就实现了 Android 与 H5 的基本互调，
要注意的是：

将参数传到H5页面，注意括号中的书写格式，如下：

 webView.loadUrl("javascript:javaCallJs(" + "'" + username + "'" + ")");

创建文件夹的时候要命名为 ==assets==, 而在代码中要写成 ==asset==
addJavascriptInterface 方法里面的字段 Android 一定要与 window.Android.showToast 中的 Android 一致。

jwllls

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android 与 H5 之间的互调

在APP的开发中嵌入了H5页面，这样就可以在Android和iOS系统上跑，大大节约了成本。因此作为移动端开发者，一定要学会使用手机系统与H5页面的互调，下面介绍一下Android与H5的互调，关于其具体使用会在代码中说明。
复制链接

扫一扫