web前端练习4----h5和Android交互

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/84377487

效果图：

项目结构

思路：
1、安卓中请求到json
2、把json传给html文件（实际上传给js）,html渲染数据 (java调js)
3、html中的按钮点击事件，调用安卓文件中的方法，在安卓中处理 (js调Java)

代码：
WebNetActivity中：

package com.zhh.android;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;

/**
 *
 *   把jsons字符串传给 Listview3.html
 *   Listview3.html把字符串转成json对象，并显示到页面
 *   点击Listview3.html中的条目并传参数给Java，Java处理逻辑
 *
 *
 */
public class WebNetActivity extends Activity {
//  上下文
    private Context context;
//  按钮
    private Button button;
//  webView
    private WebView wvNet;
//  json数据
    public String jsonData = "{\"resultCode\":\"200\",\"resultMsg\":\"成功\",\"resultValue\":[{\"productId\":1635,\"brandId\":5,\"catalogId\":1,\"productName\":\"test\",\"productCode\":\"xxx181120173047660\",\"productModel\":\"23456543\",\"mainImgUrl\":null,\"dPrice\":8888.00,\"store\":888,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"3\",\"prodNum\":null},{\"productId\":1634,\"brandId\":1,\"catalogId\":2,\"productName\":\"有图片的单元机非变频挂机N1221213233\",\"productCode\":\"001181105145249891\",\"productModel\":\"变频挂机N12\",\"mainImgUrl\":\"/image/upload/1536565674154792.jpg\",\"dPrice\":2000.00,\"store\":100,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1632,\"brandId\":1,\"catalogId\":2,\"productName\":\"有图片的单元机非变频挂机N12\",\"productCode\":\"001180910154822846\",\"productModel\":\"变频挂机N12\",\"mainImgUrl\":\"/image/upload/1536565674154792.jpg\",\"dPrice\":2000.00,\"store\":1,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1630,\"brandId\":1,\"catalogId\":2,\"productName\":\"单元机非变频挂机N12\",\"productCode\":\"001180816135904552\",\"productModel\":\"变频挂机N12\",\"mainImgUrl\":null,\"dPrice\":2000.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1629,\"brandId\":6,\"catalogId\":2,\"productName\":\"非单元机厄尔\",\"productCode\":\"001180816135836780\",\"productModel\":\"多岁的\",\"mainImgUrl\":null,\"dPrice\":2000.00,\"store\":1000,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"2\",\"prodNum\":null},{\"productId\":1628,\"brandId\":6,\"catalogId\":1,\"productName\":\"单元机但是\",\"productCode\":\"xxx180802200843901\",\"productModel\":\"颠三倒四\",\"mainImgUrl\":null,\"dPrice\":5000.00,\"store\":900,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1627,\"brandId\":6,\"catalogId\":2,\"productName\":\"厄尔\",\"productCode\":\"001180802200813127\",\"productModel\":\"多岁的\",\"mainImgUrl\":null,\"dPrice\":2000.00,\"store\":1000,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"2\",\"prodNum\":null},{\"productId\":1432,\"brandId\":1,\"catalogId\":2,\"productName\":\"非变频挂机N12\",\"productCode\":\"073180424051842120\",\"productModel\":\"变频挂机N12\",\"mainImgUrl\":null,\"dPrice\":2000.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"2\",\"prodNum\":null},{\"productId\":1625,\"brandId\":1,\"catalogId\":1,\"productName\":\"KFR-35GW/QFS1D整机\",\"productCode\":\"xxx180801164726283\",\"productModel\":\"KFR-35GW/QFS1D\",\"mainImgUrl\":null,\"dPrice\":3730.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1624,\"brandId\":1,\"catalogId\":1,\"productName\":\"KFR-26GW/QFS1D整机\",\"productCode\":\"xxx180801200107725\",\"productModel\":\"KFR-26GW/QFS1D\",\"mainImgUrl\":null,\"dPrice\":3420.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1623,\"brandId\":1,\"catalogId\":1,\"productName\":\"KFR-25GW/QFS1C整机\",\"productCode\":\"xxx180801173308257\",\"productModel\":\"KFR-25GW/QFS1C\",\"mainImgUrl\":null,\"dPrice\":3050.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1622,\"brandId\":1,\"catalogId\":1,\"productName\":\"KFR-72LW/LESD整机\",\"productCode\":\"xxx180801162929326\",\"productModel\":\"KFR-72LW/LESD\",\"mainImgUrl\":null,\"dPrice\":7191.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1621,\"brandId\":1,\"catalogId\":1,\"productName\":\"KFR-51LW/LESD整机\",\"productCode\":\"xxx180802090858229\",\"productModel\":\"KFR-51LW/LESD\",\"mainImgUrl\":null,\"dPrice\":5781.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1620,\"brandId\":1,\"catalogId\":1,\"productName\":\"KFR-46GW/AHS2D整机\",\"productCode\":\"xxx180802051611294\",\"productModel\":\"KFR-25GW/MBDSAW\",\"mainImgUrl\":null,\"dPrice\":3199.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1619,\"brandId\":1,\"catalogId\":1,\"productName\":\"KFR-35GW/MDSD整机\",\"productCode\":\"xxx180802092648768\",\"productModel\":\"KFR-35GW/MDSD\",\"mainImgUrl\":null,\"dPrice\":3850.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1618,\"brandId\":1,\"catalogId\":1,\"productName\":\"KFR-26GW/MDSD整机\",\"productCode\":\"xxx180802060330400\",\"productModel\":\"KFR-26GW/MDSD\",\"mainImgUrl\":null,\"dPrice\":3520.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1617,\"brandId\":1,\"catalogId\":1,\"productName\":\"KFR-35GW/QDVBp整机\",\"productCode\":\"xxx180802143244750\",\"productModel\":\"KFR-35GW/QDVBp\",\"mainImgUrl\":null,\"dPrice\":4850.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1616,\"brandId\":1,\"catalogId\":1,\"productName\":\"KFR-25GW/QDVBp整机\",\"productCode\":\"xxx180802111717904\",\"productModel\":\"KFR-25GW/QDVBp\",\"mainImgUrl\":null,\"dPrice\":5000.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1615,\"brandId\":1,\"catalogId\":1,\"productName\":\"KFR-72LW/NEV1WBp整机\",\"productCode\":\"xxx180802071700957\",\"productModel\":\"KFR-72LW/NEV1WBp\",\"mainImgUrl\":null,\"dPrice\":12000.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null},{\"productId\":1614,\"brandId\":1,\"catalogId\":1,\"productName\":\"KFR-50LW/NEV1WBp整机\",\"productCode\":\"xxx180801172645459\",\"productModel\":\"KFR-50LW/NEV1WBp\",\"mainImgUrl\":null,\"dPrice\":9890.00,\"store\":999,\"prodType\":\"1\",\"integral\":null,\"rebateType\":\"1\",\"prodNum\":null}],\"extras\":{}}";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_net);
        findViews();
        initWebView();
    }

    /**
     * 初始化控件
     */
    private void findViews() {
        context = WebNetActivity.this;
        button = (Button)findViewById(R.id.button);
        wvNet = (WebView) findViewById(R.id.wvNet);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {


//              java调js，并传递数据给js,js来渲染数据
                JavaToJs(jsonData);


            }
        });
    }


    /**
     * 初始化控件
     * 并引入 html 页面
     */
    private void initWebView() {
        WebSettings webSettings = wvNet.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setBuiltInZoomControls(true);
        wvNet.setWebViewClient(new WebViewClient());
        //网络连接也可以
        wvNet.loadUrl("file:///android_asset/Listview3.html");
        //              js调java
        jsToJava();

    }
    /**
     * Java调 js
     * 并传入json数据
     *
     */
    private void JavaToJs(String json){
        //                  把返回来的数据传给 Listview3.html 让他渲染数据
        wvNet.loadUrl("javascript:diao3(" + "'" + json + "'" + ")");
    }

    /**
     * js 调 Java
     * 并传参数
     */
    private void jsToJava(){
        wvNet.addJavascriptInterface(new AndroidAndJs(), "Android");
    }
    class AndroidAndJs {
        /**
         * 被js调用的方法
         * js中的onclick="window.Android.showToast()"对应的方法名
         *
         */
        @JavascriptInterface
        public void dianji(String augs1,String augs2) {
            Toast.makeText(context, "js调java,并传入数据>>>" + augs1 + ":" + augs2, Toast.LENGTH_SHORT).show();
        }

    }





}

布局文件夹activity_web_net.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zhh.android.WebNetActivity"
    android:orientation="vertical"
    >
     <Button
         android:id="@+id/button"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:text="java调用js并传入数据"

         />
    <WebView
        android:id="@+id/wvNet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></WebView>

</LinearLayout>

h5文件Listview3.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!--手机上运行时，加上这句话-->
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
    <style>
        * {
        margin: 0px;
        padding: 0px;
        }

        /*写样式*/
        .title {
        width: 100%;
        color: #fff;
        background-color: cornflowerblue;
        line-height: 50px;
        text-align: center;
        position: fixed;
        top: 0px;
        left: 0px;
        }

        .myroot {
        margin-top: 50px;

        }

        .item {
        height: 85px;
        border-bottom: 1px solid #CCC;

        }

        .tupian {
        width: 85px;
        height: 85px;
        float: left;
        }

        .right {
        margin-left: 10px;
        width: 200px;
        height: 85px;
        float: left;

        }

        .name {
        margin-top: 5px;
        }

        .jiage {
        margin-top: 20px;
        color: red;
        }

        .myclear {
        clear: both;
        }


    </style>
</head>
<body>
<!-- 标题-->
<div id="titleId" class="title">商品详情</div>
<!--列表的总布局-->
<div id="root" class="myroot">

</div>
<!-- 写 js 代码-->
<script>
    function diao3(data){
     var jsonO = JSON.parse(data);
     // 把传过来的json字符串转化成json对象
        var shuzu = jsonO.resultValue;
                for (i = 0; i < shuzu.length; i++) {
                    html = "<div class='item' onclick=\"window.Android.dianji('" + shuzu[i].productId + "','" + i + "')\">"
                    + "<img class='tupian' src='https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542863386348&di=b6627cd6ebd83ee6086ae7038cf587ba&imgtype=0&src=http%3A%2F%2Fwww.zhlzw.com%2FUploadFiles%2FArticle_UploadFiles%2F201503%2F20150305144628652.jpg'>"
                    + "<div class='right'>"
                    + "<div class='name'>" + shuzu[i].productName + "</div>"
                    + "<div class='jiage'>" + "￥"+shuzu[i].dPrice + "</div>"
                    + "</div>"
                    + "<div class='myclear'></div>"
                    + "</div>"
                    $("#root").append(html);
                }
    }

</script>

</body>
</html>

源码下载
https://download.csdn.net/download/zhaihaohao1/10802577