概述

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



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