html5android交互

⑴ android平台的app 手機客戶端和後台伺服器怎麼進行數據交互的

首先不要管安卓端還是蘋果端，現在一般都是響應式的app，你放到安卓或者蘋果或者pc或者平板都是沒有問題的。一般採用的是http介面通訊，或者socket連接。具體你要去查資料找Demo了。而且現在主流是採用html5開發或者混合開發了。所以最好是伺服器提供appAPI介面，通過http訪問伺服器，獲取數據，數據一般是json，或者xml，拿到後解析數據就可以了，然後再用UI框架或者其他框架或者自定義的UI封裝下格式很漂亮了，至於cookie和session等，看你的習慣，網路驗證和簽名那些也自己看習慣，如果涉及到大數據，還需要引入第三方框架的，直接引入就可以了，不過推薦自己寫，防止侵權。都是很通用的。

⑵ 手機app前端交互是用什麼語言開發的

作者：塗鴉
鏈接：https://www.hu.com/question/20269059/answer/33226070
來源：知乎
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請註明出處。

1.比如說具體的應用在不同地方的形態。一款計算器：web app： 其實就是在網頁上的應用。這個很廣泛，只不過大家平時都不這么叫而已，你在 網頁上使用一款計算器都可以稱作web app。mobile web app：額，就是能在手機瀏覽器中打開使用的計算器，只不過根據手機的屏幕，調整了 自己的按鍵大小，布局等等。mobile app： 你在應用商店下載了一個計算器。2.比如說如何用代碼編寫：web前端：基本上就是html+css+javascript。至於html5，css3什麼的就是具體到你應該用什麼規則的代碼去寫了。這個如果樓主想要入門學習的話，推薦w3school 在線教程（中文）。mobile web 前端：其實還是那套東西，但是加入了一個叫做響應式設計的東西。而且據我了解，這個概念還要從html 5標準的普及說起，說通俗點就是屏幕多大的時候布局，字體是什麼樣的。網上有很多前端模板都提供了這個功能。比如比較火的Bootstrap中文網（中文）深層次點，比如通過html5的API調用手機的硬體等。mobile 前端：這個目前還分兩大陣營，一個是Android，一個是iOS。而且就我的了解，web前端有專門的崗位叫前端攻城師，但是很少聽說過只寫mobile前端的移動工程師，至少我至今沒有聽到過。Android：靜態的話就是xml，動態的話就是android的layout那堆東西。https://developer.android.com/guide/topics/ui/declaring-layout.html(可能需要翻牆)比較簡單的layout，比如:Linear Layout(可能需要翻牆)FrameLayout | Android Developers(可能需要翻牆)，想學習的話可以參考下。還有一些動畫效果。https://developer.android.com/guide/topics/graphics/index.htmll(可能需要翻牆)當然，提到Android的UI，不得不提的是那坑爹的適配。只能說，學習Android UI需謹慎。iOS：UIKit那套東西，其實現在感覺如果不是太復雜，.xib直接拖界面也還可以。UIKit Framework Reference 。storyboard就算了，不是太推薦。簡單的頁面還可以，想試也可以試試。反正我用的不是很舒服。當然還有一些動畫效果。Graphics and Animation3.比如說其他區別：其實最顯著的區別就是，web app是不依賴於具體的設備的，通用性較強，只要手機或PC有相應內核的瀏覽器就基本OK。而mobile的app則依賴於具體的設備，一旦更換設備，需要重新下載才能繼續使用。暫時就想到這么多，以後想到了再補充吧。

⑶ html5怎麼與android交互

Android中構建HTML5應用
使用WebView控制項,與其他控制項的使用方法相同在layout中使用一個標簽,WebView不包括導航欄，地址欄等完整瀏覽器功能，只用於顯示一個html.
在WebView中載入Web頁面:
（1）注意在manifest文件中加入訪問互聯網的許可權：
<</SPAN>uses-permission android:name="android.permission.INTERNET" />
在Android中點擊一個鏈接，默認是調用應用程序來啟動，因此WebView需要代為處理這個動作通過WebViewClient。
（2）在布局文件中(main.xml),添加標簽WebView的id
[html] view plainprint?
<</SPAN>WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
（2）在onCreate()中使用loadUrl(...)載入html。
[java] view plainprint?
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

WebView mWebView = (WebView)findViewById(R.id.webview);
// mWebView.getSettings().setJavaScriptEnabled(true);
// mWebView.setWebChromeClient(new WebChromeClient());
mWebView.loadUrl("file:///android_asset/www/NewFile.html");
}
(3)實現android與js交互
默認情況下WebView中的js是禁用的，通過將WebSettings附加到WebView中啟動js，可以用getSettings()檢索WebSettings,然後用setJavaScriptEnabled()啟動js。
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebChromeClient(new WebChromeClient());
（4）在JS中調用Android的函數方法
把本類的一個實例添加到js的全局對象window中，這里是"injs"。
mWebView.addJavascriptInterface(new JavaScriptInterface(),"injs");
實現JavaScriptInterface()類，這里在該類中定義一個方法public void runOnAndroidJavaScript(final String str){...}
在js中調用java函數
windows.injs.runOnAndroidJavaScript(str);//調用android的函數

⑷ webview 與html5有幾種交互方式

對於android初學者應該都了解webView這個組件。之前我也是對其進行了一些簡單的了解，但是在一個項目中不得不用webview的時候，發現了webview的強大之處，今天就分享一下使用webview的一些經驗。

1、首先了解一下webview。
webview介紹的原文如下：A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.
從上面你應該了解到了基本功能，也就是顯示網頁。之所以我說webview功能強大是因為它和js的交互非常方便，很簡單就可以實現。

2、webview能做什麼？
①webView可以利用html做界面布局，雖然目前還比較少人這么使用，不過我相信當一些客戶端需要復雜的圖文（圖文都是動態生成）混排的時候它肯定是個不錯的選擇。
②直接顯示網頁，這功能當然也是它最基本的功能。
③和js交互。（如果你的js基礎比java基礎好的話那麼採用這種方式做一些復雜的處理是個不錯的選擇）。

3、如何使用webview？
這里直接用一個svn上取下的demo，先上demo後講解。demo的結構圖如下：

WebViewDemo.java

package com.google.android.webviewdemo;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

/**
* Demonstrates how to embed a WebView in your activity. Also demonstrates how
* to have javascript in the WebView call into the activity, and how the activity
* can invoke javascript.
* <p>
* In this example, clicking on the android in the WebView will result in a call into
* the activities code in {@link DemoJavaScriptInterface#clickOnAndroid()}. This code
* will turn around and invoke javascript using the {@link WebView#loadUrl(String)}
* method.
* <p>
* Obviously all of this could have been accomplished without calling into the activity
* and then back into javascript, but this code is intended to show how to set up the
* code paths for this sort of communication.
*
*/
public class WebViewDemo extends Activity {

private static final String LOG_TAG = "WebViewDemo";

private WebView mWebView;

private Handler mHandler = new Handler();

@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
mWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();
webSettings.setSavePassword(false);
webSettings.setSaveFormData(false);
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportZoom(false);

mWebView.setWebChromeClient(new MyWebChromeClient());

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

mWebView.loadUrl("file:///android_asset/demo.html");
}

final class DemoJavaScriptInterface {

DemoJavaScriptInterface() {
}

/**
* This is not called on the UI thread. Post a runnable to invoke
* loadUrl on the UI thread.
*/
public void clickOnAndroid() {
mHandler.post(new Runnable() {
public void run() {
mWebView.loadUrl("javascript:wave()");
}
});

}
}

/**
* Provides a hook for calling "alert" from javascript. Useful for
* debugging your javascript.
*/
final class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
Log.d(LOG_TAG, message);
result.confirm();
return true;
}
}
}

demo.html

<html>
<script language="javascript">
/* This function is invoked by the activity */
function wave() {
alert("1");
document.getElementById("droid").src="android_waving.png";
alert("2");
}
</script>
<body>
<!-- Calls into the javascript interface for the activity -->
<a onClick="window.demo.clickOnAndroid()"><div style="width:80px;
margin:0px auto;
padding:10px;
text-align:center;
border:2px solid #202020;" >
<img id="droid" src="android_normal.png"/><br>
Click me!
</div></a>
</body>
</html>

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/intro"
android:padding="4dip"
android:textSize="16sp"
/>

<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
/>

</LinearLayout>

4、如何交互？
①android如何調用js。
調用 形式：
mWebView.loadUrl("javascript:wave()");

其中wave（）是js中的一個方法，當然你可以把這個方法改成其他的方法，也就是android調用其他的方法。
②js如何調用android。
調用形式：
<a onClick="window.demo.clickOnAndroid()">

代碼中的「demo」是在android中指定的調用名稱，即
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

代碼中的clickOnAndroid()是「demo」對應的對象：new DemoJavaScriptInterface() 中的一個方法。
③雙向交互。
當然是把前面的兩種方式組合一下就可以了。

5、講解demo。
現在你一定了解了android和js的交互了。是時候分析一些demo了，根據上面講的你也應該比較清楚了。具體交互流程如下：
①點擊圖片，則在js端直接調用android上的方法clickOnAndroid()；
②clickOnAndroid()方法（利用線程）調用js的方法。
③被②調用的js直接控制html。

個人總結：利用webView的這種方式在有些時候UI布局就可以轉成相應的html代碼編寫了，而html布局樣式之類有DW這樣強大的工具，而且網上很多源碼，很多代碼片。在UI和視覺效果上就會節省很多時間，重復發明輪子沒有任何意義。

⑸ 怎樣實現android應用向網頁發送數據，在網頁中用php代碼接收所發來的數據

不知道樓主懂不懂 javascript ，會php js應該不賴哈 哈哈！
android已經給你提供了 javascript 調用介面！
我這里就不寫網頁程序了啊 ，懶的敲的

就是使用webview載入網頁，然後android本地程序和webview網頁裡面的js進行交互
實力話一個WebVIew 比如對象名為：webview 調用其中的方法 setJavascritEnable(true);
1：android客戶端程序 調用webview裡面的js程序
webview.loadUrl("javascripot:test()");

這個時候他就會調用你網頁裡面javascript代碼當中的test方法

2:通過網頁中的javascript代碼進行調用本地 android程序

mWebView.addJavascriptInterface(new Object() {

public void heiHei() {

mHandler.post(new Runnable() {

public void run() {

Toast.makeText(Test.this, "測試調用java", Toast.LENGTH_LONG).show();

}

});

}

}, "demo");
括弧裡面demo 就是偽造的一個dom對象的名字
然後通過 window.demo.heiHei()方法 就可以調用 本地android中代碼了
如：
<div id='b'><a onclick="window.demo.clickOnAndroid()">b.c</a></div>

最後：傳參我就不說了 ，相信你如果看懂以上的，基本你就可以實現你說的，傳參也一樣！

親,給分兒吧！手敲的啊！

⑹ H5必知必會之與App交互

奇技指南

2018年11月26日發表的「360 AI音箱H5開發實踐」一文中，曾簡單提到「與Native交互」。本文將就此主題深入探討H5與App交互的幾種常見模式。

本文內容如下：

H5，在中國被專門用來指代開發內嵌於手機應用中的網頁的技術，外國好像並沒有這個說法。從技術上講，H5是HTML5即Hyper Text Markup Language（超文本標記語言）第5版的簡稱。而HTML只是開發網頁要用到的多種技術之一。除了HTML，還要用CSS設計界面，用JavaScript實現交互，甚至要用Node.js實現服務端邏輯。為什麼H5會被用來籠統地指代這些技術呢？我猜一是因為它簡單，二是移動端網頁開發技術又恰好需要這么一個概念。

移動端網頁運行在手機應用內嵌的瀏覽器引擎中，這個沒有UI的內核容器統稱WebView，即iPhone的UIWebView（iOS 2.0–12.0）、WKWebView（iOS 8.0+，macOS 10.10+）和Android的WebView。總之，WebView就是在手機應用中運行和展示網頁的界面和介面（神奇的是，英文Interface，既可以翻譯成「界面」也可以翻譯成「介面」）。

H5與原生應用的交互都是通過原生應用中的WebView實現的。通過這個環境，H5可以調用原生應用注入其中的原生對象的方法，原生應用也可以調用H5暴露在這個環境中的JavaScript對象的方法，從而實現指令與數據的傳輸。

比如，在Android應用中，WebView類有一個公有方法addJavascriptInterface，簽名為：

調用這個方法可以向WebView中以指定的名稱name注入指定的Java對象object。這樣，WebView中的JavaScript就可以通過name調用object的方法。比如：

在iOS或macOS中，需要通過創建WKWebView類的實例在應用中嵌入網頁，交互過程類似。

所謂基礎介面，就是首先要規定原生應用和JS分別在WebView里注入/暴露一個什麼對象：

並約定在這兩個對象上分別可以調用什麼方法：

顧名思義，NativeBridge.callNative是由JS調用向Native傳遞指令或數據的方法，而JSBridge.callJS則是由Native調用向JS傳遞指令或數據的方法。方法簽名中的參數含義如下：

基礎介面只有兩個對象和兩個方法，JS與App間的互操作則通過action和params來擴展和定義。

對於JS而言，雖然這里只定義了一個對象一個方法，但實踐中，可以把action對應方法的實現附加到JSBridge上，只要把callJS實現為一個分發方法即可，比如：

這樣，所有對callJS的調用，都會轉化成對JSBridge上相應action方法的調用，優點是只需一行代碼。

另一種實現方式是通過switch...case語句實現調用分發，比如:

這樣實現的優點是所有方法一目瞭然，當然同樣也是把所有相關介面都附加到同一個JSBridge對象上。

以上兩種實現模式各有利弊。

由JS發起的單向調用App的操作，主要涉及載入URL和切換到原生界面，可對應如下action：

loadUrl調用的參考協議如下：

這里NativeBridge是App的原生對象，其callNative方法被調用時，會收到一個對象（字典/映射）參數。根據這個參數的action屬性的值，App可知需要執行的操作是載入URL。於是再取得params屬性中的url，發送請求即可。

loadContent調用的參考協議如下：

同上，這里通過params向App傳遞了必要參數，App負責切換到相應的原生界面。

由App發起的單向調用JS的操作，主要涉及用戶點擊後退按鈕（<），可對應如下action：

can_back調用的參考協議如下：

此調用返回的值示例如下：

顧名思義，can_back用於App詢問JS：在返回上一級界面前，是否彈窗提示用戶？

返回值中的can如果是true，則直接返回，不提示；如果是false，則彈出一個確認框，請用戶確認。另一個值target是與App約定的返回目標，比如prev表示返回上一級，top表示返回頂級，等等。

雙向調用是JS先調用App，然後App在完成操作後再調用JS，雙向通常都需要傳遞數據。雙向調用主要涉及JS調用App原生組件和用戶點擊右上角按鈕，可對應如下action：

loadComponent的參考協議如下：

在這個例子中，涉及JS調用App顯示其實現的城市選擇組件：type: 'location'，用戶選擇完城市之後，App再調用set_location，將用戶選擇的城市名稱傳給JS：

JS根據拿到的值更新界面，完成一次雙向調用。另一個例子是JS調用原生的日期選擇組件，與此類似。

為什麼叫displayNextButton？因為根據具體業務場景，可能存在如下三種情況：

displayNextButton協議的參考實現如下：

以上代碼示例表明，JS調用App，告訴App顯示「下一步」按鈕，但是要禁用變灰，因為enable: false。如果傳遞的是enable: true，那麼用戶就可以點擊「下一步」按鈕了。點擊之後，App再調用JS的save_form。最後，如果不想顯示按鈕，可以傳遞name: ''。

下面重點說一下用戶點擊「下一步」按鈕，App調用save_form的場景。此時也分兩種情況：

如果是JS通過App保存數據——可能因為App端實現了數據寫入必需的加密機制——那麼，JS可以在App調用save_form時將約定好的數據返回給App，由App去保存數據。

如果是JS直接保存數據，比如通過Ajax，那麼在保存完數據之後，則還需要調用前面所說的App暴露的loadUrl或loadComponent方法，以告知App切換界面。當然這種情況下會出現第三次調用，但仍然屬於雙向調用。

本文介紹了JS與App交互的幾種模式，而且只討論了JS端的實現。在開發實踐中，團隊各端總會面臨哪一端主導的問題。本文展示的參考實現就是H5端主導的一種實現形式。H5主導的特點是把主要業務邏輯都封裝到WebView中，App主要協同配合，而優點是業務邏輯的變更不會蔓延到App。畢竟相對於H5，App的安裝部署模式會造成多版本共存問題，需要盡可能控制新版本。假如由App端主導，將邏輯封裝在App端，勢必造成版本不受控，給整個項目或產品埋下隱患。

當然，事無絕對。具體情況還要具體分析。而且，哪方主導有時候也取決多方面因素。實踐中還是要因人、因時、因勢制宜。