概述

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



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 + "')");
        }
    }