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();

    }

你可能感兴趣的:(H5,anroid)