Android 与 H5 之间的互调

来源：互联网发布：php网页设计培训编辑：程序博客网时间：2024/06/04 23:59

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 一致。

阅读全文

0 0