html與android交互
一、通過html頁面打開Android本地的app
1、首先在編寫一個簡單的html頁面
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<a href="m://my.com/">打開app</a><br/>
</body>
</html>
2、在Android本地app的配置
在AndroidManifest的清單文件里的intent-filte中加入如下元素：
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
<category android:name="android.intent.category.BROWSABLE" />
<data
android:host="my.com"
android:scheme="m" />
</intent-filter>
示例截圖如下：
然後使用「手機瀏覽器」或者「webview」的方式打開這個本地的html網頁，點擊「打開APP」即可成功開啟本地的指定的app
⑵ 安卓開發的MVC模式，和html+css+js交互有什麼區別和聯系嗎
現在一般採用MVC的架構模式。
html,css,js就是MVC中的V（view視圖）
關於MVC
M（Model模型），負責數據的處理內。
V（View視圖），用戶能容看到的視圖界面（html,css,js）
C（Controller控制器），負責處理分發用戶請求。
，而實際上運行的順序為：C->M->V
用戶在瀏覽器輸入網址 這時候路由就接收到一個請求，接收到請求之後路由調用相應控制器（C），控制器再從模型（M）中調取數據，這時候控制器獲取到數據把數據賦值給視圖（V），最後視圖呈現給用戶
⑶ 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和視覺效果上就會節省很多時間，重復發明輪子沒有任何意義。
⑷ html5和andriod怎麼傳session
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的函數
⑸ 如何實現網頁代碼（JS/HTML）和IOS應用程序交互
//①ji與android交互
//js調用android方法
window.類.方法名稱(參數1,參數2);
//android調用js方法(loginIn:方法名稱，uname:參數)
//activity.loadUrl("javascript:loginIn('"+uname+"');");
//②js與ios交互
//js調用ios方法(objc:協議)
window.location.href='objc://方法名稱|參數1|參數2';
//ios調用js方法：
同android
其中：android的activity如下：
@Override
publicvoidonCreate(BundlesavedInstanceState){
//setFullScreen(true);
Intentintent=newIntent(getApplicationContext(),
SplashActivity.class);
startActivity(intent);
super.onCreate(savedInstanceState);
super.init();
//Setby<contentsrc="index.html"/>inconfig.xml
activity=this;
//this.appView.setBackgroundResource(R.drawable.welcome);//設置背景圖片
//
//super.setIntegerProperty("splashscreen",R.drawable.welcome);
//設置閃屏背景圖片
//super.setBooleanProperty(name,value)
//super.loadUrl("這里是html頁面的路徑");
super.appView.addJavascriptInterface(newFu(),"這里是類名(js中需要通過這個類名訪問android方法)");
super.loadUrl(Config.getStartUrl());
//super.loadUrl("file:///android_asset/www/index.html")
//mController.openShare(activity,false);
//try{
//getToken();
//}catch(NoSuchAlgorithmExceptione){
////TODOAuto-generatedcatchblock
////e.printStackTrace();
//}
}
⑹ js怎麼跟Android和ios進行交互
與android交互：
function onBtnClick() {
window.ncp.callOnJs("id");
}
與objective-c交互：
function onBtnClick(cmd,parameter1)
{
document.write(Date());
document.location="objc://"+callOnJs+":/"+id;
}
⑺ android app和app資源文件的html交互嗎
Android的開發中除了本地app的處理外,有時需要與html5的交互
⑻ 做Android和JS交互,請問這段在html內的代碼是什麼意思
創建一個方法，名字叫funFromjs，之後方法裡面的內容是：獲取一個id為helloweb的標簽，把這個標簽裡面的內容變為HelloWebview,i'm from js
⑼ 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的函數
⑽ android嵌入h5，怎麼交互
Android和H5之間的交互
hybrid App開發也不是什麼新鮮事了，其中native和h5之間的交互則是必不可少的。Android中是如何和H5交互的？
1、webView載入頁面
我們都知道在Android中是通過webView來載入html頁面的，根據HTML文件所在的位置不同寫法也不同：
//例如：載入assets文件夾下的test.html頁面
mWebView.loadUrl("file:///android_asset/test.html")
//例如：載入網頁
mWebView.loadUrl("http://www..com")
如果只是這樣調用mWebView.loadUrl()載入的話,那麼當你點擊頁面中的鏈接時，頁面將會在你手機默認的瀏覽器上打開。那如果想要頁面在App內中打開的話，那麼就得設置setWebViewClient：
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
mWebView.loadUrl(url);
return true;
}
}
});
2、Android本地通過Java調用HTML頁面中的JavaScript方法
想要調用js方法那麼就必須讓webView支持
WebSettings webSettings = mWebView.getSettings();
//設置為可調用js方法
webSettings.setJavaScriptEnabled(true);
若調用的js方法沒有返回值，則直接可以調用mWebView.loadUrl("JavaScript:do()");其中do是js中的方法；若有返回值時我們可以調用mWebView.evaluateJavascript()方法：
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
js代碼如下：
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function do(){
document.getElementById("p").innerHTML="hello world";
}
</script>
2、js調用Android本地Java方法
在Android4.2以上可以直接使用@JavascriptInterface註解來聲明，下面是在一個本地Java方法
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
定義完這個方法後再調用mWebView.addJavascriptInterface()方法：
mWebView.addJavascriptInterface(new JsInteration(), "android");
那麼在js中怎麼來調用呢？
<script type="text/javascript">
function s(){
//調用Java的back()方法
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
4、攔截HTML頁面中的點擊事件
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//判斷url攔截事件
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
以上就是Java調用js方法以及js調用Java方法的實現交互方式中的一種。下面給出完整代碼：
mainActivity
public class MainActivity extends AppCompatActivity {
public static final String TAG = "MainActivity";
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView);
mWebView.loadUrl("file:///android_asset/test.html");
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JsInteration(), "android");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
}
//Android調用有返回值js方法
@TargetApi(Build.VERSION_CODES.KITKAT)
public void onClick(View v) {
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
}
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
}
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function s(){
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
</head>
<body>
<button onclick="s()">調用本地方法</button>
<a href="file:///android_asset/test2.html">點擊</a>
<p id="p"></p>
</body>
</html>