Android与Html5交互

最新推荐文章于 2024-07-08 02:26:33 发布

开心工作室V(kaic_kaic)

最新推荐文章于 2024-07-08 02:26:33 发布

阅读量480

点赞数 2

分类专栏：计算机文章文章标签： Android与Html5交互

本文链接：https://blog.csdn.net/weixin_39563171/article/details/78302431

版权

计算机文章专栏收录该内容

723 篇文章 36 订阅

订阅专栏

 
 
  
  概述

  
  目前主流应用程序大体分为三类



  
  

   
   

   
   

  
  

  
  Web App

  
  Web App是指采用Html5语言写出的App，不需要下载安装，类似于现在所说的轻应用，存在于浏览器中的应用，基本上可以说是触屏版的网页应用。

  
  优点

  
  开发成本低
更新快
更新无需通知用户，不需要手动升级
能够跨多个平台和终端


  
  缺点

  
  临时性的入口
无法获取系统级别的通知，提醒，动效等
用户留存率低
设计受限制诸多
体验较差


  
  Hybrid App

  
  Hybrid App是半原生，半Web的混合类App。

需要下载安装，看上去类似NativeApp，但是只有很少的UI，大多用WebView，访问的内容是Web。

  
  Native App

  
  Native APP指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强。需要用户下载安装使用。

  
  优点

  
  打造完美的用户体验
性能稳定
操作速度快，上手流畅
访问本地资源（通讯录，相册）
设计出色的动效，转场，
拥有系统级别的贴心通知或提醒
用户留存率高


  
  缺点

  
  分发成本高（不同平台有不同的开发语言和界面适配）
维护成本高（例如一款App已更新至V5版本，但仍有用户在使用V2， V3， V4版本，需要更多的开发人员维护之前的版本，不然旧版本出问题了，用户可能就不用了）
更新缓慢，根据不同平台，提交–审核–上线 等等不同的流程，需要经过的流程较复杂


  
  三者对比

  
  

   
   

   
   

  
  

  
  

  
  Hybrid App开发中Android与H5（JS）交互

  
  准备工作

  
  
打开assets中的Html。



  
  mWebView = (WebView) findViewById(R.id.webview_test);
mWebView.loadUrl("file:///android_asset/index.html");

  
  打开SD卡中的Html
  
  mWebView = (WebView) findViewById(R.id.webview_test);
mWebView.loadUrl(“content://com.android.htmlfileprovider/sdcard/index.html”);

  
  打开服务端指定Url的Html。
  
  mWebView = (WebView) findViewById(R.id.webview_test);
mWebView.loadUrl(“http://www.baidu.com”);

  
  Android与Html的交互，实际就是与Js的交互。
  
  分两种情况，原生调用Js，Js调用原生。
  
  配置
  
  <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>测试网站</title>

    <script type="text/javascript">
        function test(){
            var name = document.getElementById("textName").value
            app.sayHello(name) <!--Js调用原生-->
        }

        <!--原生调用Js-->
        function showName(name){
            document.getElementById("textName").value = name;
        }
    </script>
</head>

<body>
<input id="textName">
<br/>
<hr>

<button onclick="test()">测试</button>
</body>

</html>

  
  mWebView.loadUrl("file:///android_asset/index.html");
mWebView.getSettings().setJavaScriptEnabled(true); //开启支持JavaScript

mWebAppInterface = new WebAppInterface();
//设置和原生和Js交互的接口
//参数：接口类，Js调用原生时需要的引用名（自定义命名）
mWebView.addJavascriptInterface(mWebAppInterface, "app");

  
  交互接口
  
  class WebAppInterface {
        /**
         * Js 调用原生
         */
        @JavascriptInterface //一定加注解否则可能会报错
        public void sayHello(String name) {
            if (!TextUtils.isEmpty(name)) {
                Toast.makeText(MainActivity.this, name, Toast.LENGTH_SHORT).show();
            }
        }

        /**
         * 原生调用Js
         */
        public void showName(String name) {
            mWebView.loadUrl("javascript:showName('" + name + "')");
        }
    }

  
  完整交互代码
  
   private void initView() {
        mWebView = (WebView) findViewById(R.id.webview_test);
        btn_test = (Button) findViewById(R.id.btn_test);


        mWebView.loadUrl("file:///android_asset/index.html");
        mWebView.getSettings().setJavaScriptEnabled(true); //开启支持JavaScript

        mWebAppInterface = new WebAppInterface();
        //设置和原生和Js交互的接口
        //参数：接口类，Js调用原生时需要的引用名（自定义命名）
        mWebView.addJavascriptInterface(mWebAppInterface, "app");

        btn_test.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mWebAppInterface.showName("测试");
            }
        });
    }

    class WebAppInterface {
        /**
         * Js 调用原生
         */
        @JavascriptInterface //一定加注解否则可能会报错
        public void sayHello(String name) {
            if (!TextUtils.isEmpty(name)) {
                Toast.makeText(MainActivity.this, name, Toast.LENGTH_SHORT).show();
            }
        }

        /**
         * 原生调用Js
         */
        public void showName(String name) {
            mWebView.loadUrl("javascript:showName('" + name + "')");
        }
    }