b+c 模式 H5 与 Android 混合 开发详解

    h5 ios android 简介：
    概念: 
    加载网址
    加载网页
    加载网页字符串
    点击内容的时候 会调到浏览器 我们可以让其在当前页展示：h5 可以利用WebView,做一款app,混合开发，如果只是展示数据的话，只仅仅给你一个网址，就可以去访问了。

    h5 : 优点 变化比较快，界面都放在服务器上了，服务器的网页一遍，界面全都变了。
    h5 做布局变化很简单，服务端一改变，手机上全就变了，布局，快，变化快
    缺点： 下载数据的时候，除了真实想展示给用户的以外，还下载了样式，宽，色，点击色
    未点击色，滑动操作，都是网页下载下来的，下载数据量大，同样内容，下载的数据量要在原生的4-5倍。h5 页面加载速度慢

    若: 你将H5 打在apk 里，速度要快 缺点不灵活了 变化小了

    优点： 在android ios iba 文件 都可以用，写一个页面相当于写了两个页面
    android webView 加载它即可，ios 相应控件加载

    windosphone  使用极少 h5 也可展示同样效果 架一个壳子 

    h5 优点 跟java 差不多 一次编译 倒出运行 电商类的h5 做的 比原生好
    缺点 ： h5 做传输 加密很难，本身就是字符串形式 传递到本地的
    无法做安全性比较高的,h5 再发展的，对 android 比对 ios 冲击大
    应用类市场 被h5 冲击

    andorid 嵌入式，智能家居，物联网，android 比ios 优势，可以在任何地方编译
    运行

    缺点 ： 原来 c比java 快20 倍，h5 运行很慢
    h5 渲染一个页面 和 原生布局 渲染一个界面 10倍左右时间，


    java 抢了 很多 c 语言的工作 服务器 嵌入式 
    很多东西 无法比较 c 无法做硬件的访问
    c 可以直接访问 硬件 ，java 则写不了驱动 

    编程语言排名 java c c++ 

    Ios 硬件软件 兼容性高

    原生应用 ： 访问网页的时候布局是 变不了的 只能是数据发生变化的。

b+c 模式使用 ：

        在原生 app 中嵌入，html5 ：
xml布局文件中，引入webView控件：
activity 中 loadUrl 即可

## 使用：怎么用 LSO ##

        //webView 控件获取  设置ulr 设置在客户端显示，还是浏览器显示  
          assert webView!=null;
          webView.loadUrl("http://www.baidu.com");

        //设置 界面在当前窗口跳转不打开网页
          webView.setWebViewClient(new WebViewClient());


        // 让 webView 可以后退
        @Override
        public void onBackPressed() {

        if (webView.canGoBack()) {
            //webView Can go back
            webView.goBack();
        }

        // if isn't can call father method
        super.onBackPressed();
    }

点击html 按钮，调用 android 代码：

     在html 代码中我们可以调用 js， 利用webView 我们也可，加载html 界面，也可以，在html onClick 事件 中触发app 的代码，下面以吐司为例，

① 在main目录下，新建assets 文件夹，里边放个 html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function jstest(){
            document.getElementById("btn").textContent = "hhhhh"
        }
    </script>
</head>
<body>
    <button id="btn" onclick="obj.test('来自于HTML 5')">点我</button>
</body>
</html>

② MainActivity 目录下先建一个 类 JsInterface

package com.example.liyang.webviewforcsdn;

import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;


public class JsInterface {
    private Context context;

    public JsInterface(Context context) {
        this.context = context;
    }

    @JavascriptInterface
    public void test(String text){//方法名test与 html中方法名一致
        Toast.makeText(context, "html调用java后台代码"+text, Toast.LENGTH_SHORT).show();
    }
}

MainActivity 中代码：

package com.example.liyang.webviewforcsdn;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;

public class MainActivity extends AppCompatActivity {

    private WebView web_id;

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

        assert web_id!=null;
        web_id = (WebView) findViewById(R.id.web_id);

        // load Html code
        loadHtml();


    }

    /**
     * loadHtml to app
     */
    private void loadHtml() {
        InputStream html =null;
        ByteArrayOutputStream bos = null;
        try {
            html = getAssets().open("test.html");
             bos = new ByteArrayOutputStream();
            byte[] byff = new byte[1<<10];
            int len;
            while((len=html.read(byff))!=-1){
                bos.write(byff,0,len);
            }
            String str = bos.toString();
            web_id.loadData(str,"text/html;charset=utf-8","utf-8");

            //start js
            web_id.getSettings().setJavaScriptEnabled(true);

            // join native interface
            web_id.addJavascriptInterface(new JsInterface(this),"obj");


        } catch (IOException e) {
            e.printStackTrace();
        }finally {
            if (html!=null){
                try {
                    html.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }if (bos!=null){
                try {
                    bos.close();
                } catch (IOException e) {
                    e.printStackTrace();
                }
            }
        }
    }



}

在 android 点击按钮 调用js 代码，执行 js 事件
下边为按钮的监听事件

  @Override
    public void onClick(View v) {

        int id = v.getId();
        switch (id){
            case R.id.btn_id:

                // execute js code
                web_id.loadUrl("javascript:jstest()");

                break;

        }

    }

    //override


    @Override
    public void onBackPressed() {

        if (web_id.canGoBack()) {
            web_id.goBack();
        }
        else 
        super.onBackPressed();

    }