Android之与h5交互

最新推荐文章于 2021-12-20 13:17:25 发布

_Kvin

最新推荐文章于 2021-12-20 13:17:25 发布

阅读量467

点赞数

分类专栏： Android 文章标签： android h5交互混合开发

本文链接：https://blog.csdn.net/qq_16092901/article/details/63897924

版权

Android 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

》背景：

随着微信小程序的流行，市面上刮起了一股H5的浪潮；甚至，有流言——H5将取代传统app。对此，本人不做评论。
然而事实证明，她并不能取代。时间也为我们筛选出了一种做法——混合开发，即使用H5来作为程序中的某些界面。那么，问题来了，我们该怎么“混合”呢？
我们知道app中，最重要的一点就是“交互”，解决了交互问题，就自然而然地“混合”了。下面，交互的方法。

》与H5交互：

1.配置：

》提供js支持：
 mWeb.getSettings().setJavaScriptEnabled(true);
》提供JS调用的方法（我们一般写在一个类里，便于管理）：
（tips：提供的对外方法必须被@JavascriptInterface注解）
 /**
     * provide methods for js
     */
    class JavaMethod {
        @JavascriptInterface
        public void jump() {
            JumpUtils.simpleJump(MainActivity.this, WebActivity.class);
        }

        @JavascriptInterface
        public void search() {
            ToastUtils.simpleToast(MainActivity.this, "invoke by js");
        }
    } 
》提供JS调用接口：
 mWeb.addJavascriptInterface(new JavaMethod(), "javaMethod");//param1，方法类对象；param2，对象名（供js通过对象调用里卖弄的方法）

2.JS调用java方法

<a onClick="window.javaMethod.jump()"> <!--看见没，javaMethod就是我们上面提供的对象名-->
    <div style="width:80px;
            margin:0px auto;
            padding:10px;
            text-align:center;
            border:2px solid #202020;">
        <img id="icon" src="code_scan.png"/><br>
        Click me!
    </div>
</a>

3.JAVA调用JS方法

mWeb.loadUrl("javascript:goBaidu()");//直接以javascript：+js方法名

》完整测试demo

1.activity

public class MainActivity extends AppCompatActivity {
    private WebView mWeb;
    private Button updateBtn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init() {
        this.updateBtn = (Button) findViewById(R.id.update_btn);
        this.updateBtn.setOnClickListener(mOnClickListener);
        mWeb = (WebView) findViewById(R.id.mWeb);
        mWeb.getSettings().setJavaScriptEnabled(true);
        mWeb.loadUrl("file:///android_asset/android_js.html");

        mWeb.addJavascriptInterface(new JavaMethod(), "javaMethod");
    }

    /**
     * provide methods for js
     */
    class JavaMethod {
        @JavascriptInterface
        public void jump() {
            JumpUtils.simpleJump(MainActivity.this, WebActivity.class);
        }

        @JavascriptInterface
        public void search() {
            ToastUtils.simpleToast(MainActivity.this, "invoke by js");
        }
    }


    private View.OnClickListener mOnClickListener = new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            switch (v.getId()) {
                case R.id.update_btn:
                    mWeb.loadUrl("javascript:goBaidu()");
                    break;

            }
        }
    };
}

2.JS

（注意：本地网页及网页引用图片均放在assets文件夹下）

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>android and js</title>
</head>

<body>
<p>It is my first js demo</p>
<hr width="80%"/>
<script type="text/javascript">
         function greed(){
            alert("It's my first h5 page");
            document.getElementById("icon").src="code_add.png";
         }

         function goBaidu(){
         window.location.href="https://www.baidu.com/"
         <!--window.open("https://www.baidu.com/")-->
         }
         <!--// greed();-->


</script>

<!-- Calls into the javascript interface for the activity -->
<a onClick="window.javaMethod.jump()">
    <div style="width:80px;
            margin:0px auto;
            padding:10px;
            text-align:center;
            border:2px solid #202020;">
        <img id="icon" src="code_scan.png"/><br>
        Click me!
    </div>
</a>
<a onClick="window.javaMethod.search()">
    <div style="width:80px;
            margin:0px auto;
            padding:10px;
            text-align:center;
            border:2px solid #202020;">
        <img id="goBaidu" src="code_add.png"/><br>
        百度一下!
    </div>
</a>
</body>
</html>