web前端練習4----h5和Android互動
阿新 • • 發佈：2019-01-02
效果圖：
專案結構
思路：
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