2. 程式人生 > >混合開發之webView載入html,android 和 html之間進行資料互動

混合開發之webView載入html,android 和 html之間進行資料互動

阿新 • • 發佈：2019-01-18

現在混合開發比較普遍了，其實早就該學學了，只限於自己對html不是很熟，搭的介面太醜了，哈哈…

今天寫Demo的需求是這樣的
1、在一個介面裡，半面html,半面android原生控制元件。
2、點選html傳送html的資料給android ，android原生控制元件接收並顯示。
3、點選原生控制元件，html接收並顯示.

介面是這樣的這裡寫圖片描述

半邊html 半邊android 原生控制元件，進行資料互動

我的html是自己寫的，很醜別介意

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
 
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript"  src="js/jQuery.js"></script>
    <title>這是一個網頁 </title>
</head>
    <input id="input"  />
    <br/>
    <button id = "button1"
 
 type="button" onclick="WebToAndroid()"> （這是html按鈕）傳遞給android </button>
    <br/>
    <br/>
    <br/>
    <br/>
    獲取從android 傳遞過來的值為:
    <br/>
    <br/>
    <label id = "label"/>
<body>
</body>
</html>

JS中有兩個方法

// JavaScript Document（點選html控制元件時，向android 傳遞資料的方法）
 

function WebToAndroid() {

    var ss = document.getElementById("input").value;

    demo.toAndroid(ss)
}

//接收android傳遞的資料，並顯示在html上
function AndroidToWeb(str){
    document.getElementById("label").innerHTML = str;
}

下面的程式碼
android中通過這句程式碼和html進行互動
主要是將html的關鍵字繫結android的一個方法，
之後接收html的傳遞資料，並顯示出來

@SuppressLint("AddJavascriptInterface")
    private void initData() {
        webView.getSettings().setJavaScriptEnabled(true);//設定支援js
        webView.requestFocus();
        webView.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);

        webView.addJavascriptInterface(new JavascriptInterface(), "demo");
        webView.loadUrl("file:///android_asset/index.html");//設定載入網頁
    }
    class JavascriptInterface{
        @android.webkit.JavascriptInterface
        public void toAndroid(final String order){
            Log.e("Logs","-----------------------"+order);
            webView.post(new Runnable() {
                @Override
                public void run() {
                    android_text.setText(order);
                    android_text.setTextColor(Color.RED);
                }
            });
        }
    }

傳送android原生控制元件資料到html

button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webView.post(new Runnable(){
                    @Override
                    public void run(){
                        String str = edit.getText().toString();
//這一句很容易出錯，有單引號和雙引號                        webView.loadUrl("javascript:AndroidToWeb('" + str + "')");
  );
                    }
                });
            }
        });

裡面的一句程式碼，用了我很長的時間才找到正確的書寫方式，很多人都呼叫不帶引數的傳遞方法，肯定沒問題，可是很少看到帶引數的傳遞方式，大部分還是錯的（~~ 我的是正確的哦）。


String str = "sssssssss";
webView.loadUrl("javascript:AndroidToWeb('" + str + "')");

最後實現的過程如下圖

這裡寫圖片描述

過兩天寫一個EventBu

相關推薦

混合開發之webView載入html,android 和 html之間進行資料互動

現在混合開發比較普遍了，其實早就該學學了，只限於自己對html不是很熟，搭的介面太醜了，哈哈… 今天寫Demo的需求是這樣的 1、在一個介面裡，半面html,半面android原生控制元件。 2、點選html傳送html的資料給android ，andro

Android和Unity3D之間的資料互動

如果將一個unity3D專案匯出成Android工程，然後將該專案作為另一個Android專案的module使用時，如果涉及到相互呼叫，可以寫一個Activity繼承自UnityPlayerActivity public class UnityActivity exten

關於Android之WebView載入網頁快取和清除問題

無獨有偶，Android開發中也需要一個網頁快取機制，自然網路上成熟的案例舉不勝舉，比如： 一、設定快取： private static final String APP_CACAHE_DIRNA

Android混合開發之——WebView頁面棧遇上重定向

場景:我們的現在開發的App基本都會嵌入一些網頁是內容更加的豐滿。我們在網頁展示頁面想點選返回鍵退出到前一個頁面。當退出到最開始的頁面的時候直接退出當前的Activity。通常的做法是，監聽返回鍵，判斷頁面棧是否可以回退。 @Override

App混合開發之WebView進行H5頁面基本操作

現在淘寶、京東、聚划算、甚至於一些銀行的App都是利用原生加H5混合開發技術進行開發的，混合開發越來越成為App開發主流技術。WebView是android內嵌的Web頁面訪問元件，通過它可以輕鬆實

使用Echarts總結之——使用柱狀圖和地圖與後臺資料互動

一、引入js 當然首先肯定是要引入相關的echart, 簡單的開發基本上一個<script language="javascript" type="text/javascript" src="$

XZ_iOS之block實現在cell和controller之間進行資訊傳遞

如上圖，tableView的每一行都有兩個button，點選button的時候，跳入到另一個控制器或者獲取cell上的一些值，這時候可以用block進行資訊的傳遞； 1、當點選button進行頁面跳轉 1）在cell的.h中定義帶有引數的block, 2）定義兩個b

html與js和php之間實現資料互動

一、總述 標題取得假大空，主要還是為了記錄一下課設做的圖片搜尋引擎。 之前的python是用來爬取圖片搜尋引擎的圖片資源的，然後把圖片放在伺服器，圖片對應的tag（關鍵字）和存放路徑放在mangoDB裡面。 這篇部落格主要記錄一下我完成前端（html+js

Android混合開發之Activity類與html頁面之間的相互跳轉(並解決黑屏問題)

在底部有本程式原始碼下載 本程式流程：程式啟動-->testActivity--->phonegap2框架類--->index.html--->testActivity，主要實現activity與html頁面的相互跳轉，並實現 傳遞引數的功能。 程式

Android開發之WebView和JS互動詳解

Android提供了一個很強大的WebView控制元件用來處理Web網頁，而在網頁中，JavaScript又是一個很舉足輕重的指令碼。本文將介紹如何實現Java程式碼和Javascript程式碼的相互呼叫。 如何實現 實現Java和js互

混合開發之Android原生載入ReactNative頁面

這片文章主要記錄一下Android原生載入ReactNative頁面的方法，和上一篇混合開發之ReactNative呼叫Android原生方法可作為上下篇食用 首先還是大概的講一下流程： 1、Androidstudio新建Android專案，命令列執行npm

Android 開發之Windows環境下Android Studio安裝和使用教程(圖文詳細步驟)

9.png 虛擬機 jdk版本 編寫 clip 開發平臺 集成開發 arc 電腦安裝 鑒於谷歌最新推出的Android Studio備受開發者的推崇，所以也跟著體驗一下。 一、介紹Android Studio Android Studio 是一個Android

Android開發之Webview中原生與JS互動

文章目錄 概述 使用場景 互動方式 Java呼叫JS程式碼 JS呼叫Java程式碼 總結 概述 由於手機硬體資源的快速提升，使得采用混合開發的可能性逐漸成為現實並且流行起來。Android開發中

Android開發之獲取SIM卡資訊和手機號碼

獲取SIM卡資訊和手機號碼的工具類，記錄一下方便以後使用 import android.content.Context; import android.telephony.TelephonyManager; /** * Created by WangJinyong on 20

android開發--使用webView載入tel協議不會開啟撥號盤解決

在載入url之前進行判斷，url是否是tel協議開頭，然後進行載入，即可開啟撥號盤 mWebView.setWebViewClient(new WebViewClient() {

Android讀取assets目錄下的資源 （webview載入assets下的html）

1。獲取資源的輸入流 資原始檔 sample.txt 位於 $PROJECT_HOME/assets/ 目錄下，可以在 Activity 中通過 Context.getAssets().open(“sample.txt”) 方法獲取輸入流。 注意：如果資原始檔是文字檔案

IOS學習之WebView載入本地HTML程式碼或網路資源

新建SingleViewApplication應用，命名WebViewSample, 在storyboard中拖3個Button，定義動作，再拖一個WebView，然後建立他們的弱連結輸出口，得到如下的程式碼： #import <UIKit/UIKit.h>

android ReactNative混合開發之最新教程

參考官方文件->react native 文件 本文使用開發環境 Android studio 注意最新的react native支援的最新的SDK為16（android4.1） 建立Android專案（已有專案跳過） 開啟Android studio 輸入專案名稱，選擇專案目錄，點選nex

iOS開發之獲取iPhone/iPad/Android 介面和icon尺寸規範

注意：iOS所有圖示的圓角效果由系統生成，給到的圖示本身不能是圓角的。1. 桌面圖示 (app icon)for iPhone6 plus(@3x) : 180 x 180for iPhone 6/5s

Android開發之圖片載入快取框架Picasso的領教

Picasso實現了圖片的非同步載入,並解決了Android中載入圖片時常見的一些問題,它有以下特點: 在Adapter中取消了不在檢視範圍內的ImageView的資源載入,因為可能會產生圖片錯