js交互

『壹』 在Android上怎樣實現java和js交互

java和js交互分為三種情況，分別是：

1 調用網頁上的js代碼

Android中可以通過webview來實現和js的交互，在程序中調用js代碼，只需要將webview控制項的支持js的屬性設置為true，，然後通過loadUrl就可以直接進行調用，如下所示：

mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("javascript:test()");

2 網頁java代碼的方法

在網頁中調用java代碼，需要在webview控制項中添加javascriptInterface。如下所示：

mWebView.addJavascriptInterface(newObject(){
publicvoidclickOnAndroid(){
mHandler.post(newRunnable(){
publicvoidrun(){
Toast.makeText(Test.this,"測試調用java",Toast.LENGTH_LONG).show();
}
});
}
},"demo");

在網頁中，只需要像調用js方法一樣，進行調用就可以

<div id='b'><a onclick="window.demo.clickOnAndroid()">b.c</a></div>

3 Java代碼調用js並傳參

首先需要帶參數的js函數，如functiontest(str)，然後只需在調用js時傳入參數即可，如下所示：

mWebView.loadUrl("javascript:test('aa')");

4.Js中調用java函數並傳參

首先一樣需要帶參數的函數形式，但需注意此處的參數需要final類型，即得到以後不可修改，如果需要修改其中的值，可以先設置中間變數，然後進行修改。如下所示：

mWebView.addJavascriptInterface(newObject(){
publicvoidclickOnAndroid(finalinti){
mHandler.post(newRunnable(){
publicvoidrun(){
intj=i;
j++;
Toast.makeText(Test.this,"測試調用java"+String.valueOf(j),Toast.LENGTH_LONG).show();
}
});
}
},"demo");

然後在html頁面中，利用如下代碼<divid='b'><aonclick="window.demo.clickOnAndroid(2)">b.c</a></div>，

下面是安卓無憂中js 與安卓相互調用的效果圖，可以網路一下安卓無憂，點擊源碼，看看裡面的源碼。

『貳』 Android 與js 交互的目的

實現數據傳輸，完成交互操作。
JS代表的是網頁，這個網頁可以展示到Android、iOS或者pc的瀏覽器上，內嵌到程序里就是webview，是相對獨立的模塊，可以自成一套，但是有些數據或者操作在網頁完成比較麻煩，特別是手機上，比如登錄，需要單獨輸入賬號密碼，很是麻煩，現在都是由QQ微信授權登錄，一鍵完成，即使登錄了，登錄信息也不易持久保存(比如下次打開登錄信息就失效了)，安全性也不高。
與Android或者iOS的交互主要是完成數據的交互，比如一個網頁查詢用戶數據需要登錄信息，APP已經登錄了，就可以直接中Android或者iOS的App直接拿，不需要在網頁再次登錄；比如用戶沒有登錄點擊了網頁登錄按鈕，js拉起App的原生登錄，這樣統一登錄路徑，登錄完成把數據回傳給js，完成登錄流程。比如評論，操作界面比較復雜，可能涉及圖片、表情、視頻的上傳下載，用網頁來做的話交互麻煩、性能也不理想，js上點擊評論拉起Android或者iOS的原生評論模塊，評論完畢通知js刷新數據，是比較理想的交互模式。

『叄』 如何使用vue.js與後台實現數據交互

使用vue.js與後台實現數據交互的方法是利用vue-resource組件提供的一系列api：
get(url, [data], [success], [options])
post(url, [data], [success], [options])
put(url, [data], [success], [options])
patch(url, [data], [success], [options])
delete(url, [data], [success], [options])
jsonp(url, [data], [success], [options])

具體舉例如下：
1、導入vue-resource
2、基於全局Vue對象使用http
// 通過someUrl獲取後台數據，成功後執行then的代碼
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
3、在一個Vue實例內使用$http
// $http是在vue的局部范圍內的實例
...使用vue.js與後台實現數據交互的方法是利用vue-resource組件提供的一系列api：
get(url, [data], [success], [options])
post(url, [data], [success], [options])
put(url, [data], [success], [options])
patch(url, [data], [success], [options])
delete(url, [data], [success], [options])
jsonp(url, [data], [success], [options])

說明：
在發送請求後，使用then方法來處理響應結果，then方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。