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

来源：互联网发布：成都犀牛软件培训编辑：程序博客网时间：2024/04/30 13:23

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

1 0

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

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