Android中實(shí)現(xiàn)WebView和JavaScript的互相調(diào)用詳解
前言
很多復(fù)雜的UI界面，在Android中需要配合大量xml代碼和java代碼實(shí)現(xiàn)，而使用HTML5可以非常輕松的實(shí)現(xiàn)出來，而且具有很好的跨平臺(tái)特性，讓我們不必為了多個(gè)平臺(tái)而重寫代碼，H5學(xué)習(xí)成本也較低，上手快。雖然從目前來說H5在Android系統(tǒng)中的速度可能還欠佳一些，但相信隨著手機(jī)的性能不斷的提高，這些問題都會(huì)被解決
使用H5開發(fā)Android的UI界面，最重要的就是如何實(shí)現(xiàn)Js代碼和Java代碼之間的互相調(diào)用了
在講解之前，讓我們先把項(xiàng)目跑起來
效果圖：
準(zhǔn)備好index.html文件，將它放入Android工程下的assets文件夾中：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>JSTest</title> <script src="app.js"></script> </head> <body> <table border="1" width="100%" id="table" cellspacing="0"> <tr> <td width="50%" align="center">姓名</td> <td width="50%" align="center">電話</td> </tr> </table> <hr> <input id="jsinput"> <Button onclick="getMessage()">js傳值給Toast</Button> </body> </html>
JavaScript的代碼我單獨(dú)寫在一個(gè)js文件中了，把a(bǔ)pp.js文件也放入assets文件夾中：
function getMessage(){
var message = document.getElementById("jsinput");
contact.showToast(message.value);
}
function addPerson(persons){
var personObjs = eval(persons);
var table = document.getElementById("table");
for(var i=0; i < personObjs.length; i++){
var tr = table.insertRow(table.rows.length);
var td1 = tr.insertCell(0);
td1.align = "center";
var td2 = tr.insertCell(1);
td2.align = "center";
td1.innerHTML = personObjs[i].name;
td2.innerHTML = personObjs[i].phone;
}
}
最后就是Java代碼
public class MainActivity extends AppCompatActivity {
private WebView mWebView;
private Button mJsMethodBtn;
private JsObject jsobj;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mJsMethodBtn = (Button) findViewById(R.id.btn_js_method);
mWebView = (WebView) findViewById(R.id.web_view);
mWebView.loadUrl("file:///android_asset/index.html");
WebSettings setting = mWebView.getSettings();
setting.setJavaScriptEnabled(true);
setting.setDefaultTextEncodingName("utf-8");
jsobj = new JsObject();
mWebView.addJavascriptInterface(jsobj, "contact");
mJsMethodBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// 添加一個(gè)聯(lián)系人
jsobj.addPerson();
}
});
}
private class JsObject {
// 此方法被js調(diào)用
@JavascriptInterface
public void showToast(String message) {
Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
}
// 在Web頁面增加一個(gè)聯(lián)系人
public void addPerson() {
String json = "[{\"name\":\"zwt\",\"phone\":\"15949999999\"}]";
mWebView.loadUrl("javascript:addPerson('" + json + "')");
}
}
}
還有布局代碼：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#EED5B7" android:orientation="vertical"> <WebView android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="360dp"/> <Button android:id="@+id/btn_js_method" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="調(diào)用js方法"/> </LinearLayout>
一、JavaScript調(diào)用Android中的方法
這里實(shí)現(xiàn)的場(chǎng)景是點(diǎn)擊Web頁面中的Button，把input中輸入的數(shù)據(jù)傳遞給Android系統(tǒng)，并通過Toast顯示出來
對(duì)應(yīng)的js代碼：
function getMessage(){
var message = document.getElementById("jsinput");
contact.showToast(message.value);
}
對(duì)應(yīng)的java代碼：
// 此方法被js調(diào)用
@JavascriptInterface
public void showToast(String message) {
Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
}
其中的“contact”其實(shí)指的就是我們?cè)趈ava代碼中定義的JsObject類
他倆通過以下方法實(shí)現(xiàn)綁定：
mWebView.addJavascriptInterface(jsobj, "contact");
第一個(gè)參數(shù)傳入的是一個(gè)java對(duì)象，第二參數(shù)是指定對(duì)應(yīng)的js里調(diào)用該類時(shí)需要使用的自定義別名，這個(gè)方法的作用就是將一個(gè)Java對(duì)象和JavaScript聯(lián)系起來
這里需要注意個(gè)問題，在SDK17以上的版本中，google為了安全考慮，只允許js調(diào)用帶有@JavascriptInterface注解的Java方法，所以我們要給被js調(diào)用的java方法前加上@JavascriptInterface注解
二、Android調(diào)用JavaScript中的方法
用戶點(diǎn)擊Android中的Button控件后，傳一個(gè)json數(shù)據(jù)給JavaScript方法，js解析json數(shù)據(jù)后添加一個(gè)新的聯(lián)系人顯示在Web頁面上
對(duì)應(yīng)的js代碼：
function addPerson(persons){
var personObjs = eval(persons);
var table = document.getElementById("table");
for(var i=0; i < personObjs.length; i++){
var tr = table.insertRow(table.rows.length);
var td1 = tr.insertCell(0);
td1.align = "center";
var td2 = tr.insertCell(1);
td2.align = "center";
td1.innerHTML = personObjs[i].name;
td2.innerHTML = personObjs[i].phone;
}
}
對(duì)應(yīng)的java代碼：
// 在Web頁面增加一個(gè)聯(lián)系人
public void addPerson() {
String json = "[{\"name\":\"zwt\",\"phone\":\"15949999999\"}]";
mWebView.loadUrl("javascript:addPerson('" + json + "')");
}
想要調(diào)用JavaScript中的某個(gè)方法，使用以下方法的標(biāo)準(zhǔn)格式就可以了：
mWebView.loadUrl("javascript:xxxMethod()");
“xxxMethod()”指的是JavaScript中的某個(gè)方法，如需調(diào)用其它方法，只要把后面的xxxMethod()替換成js中對(duì)應(yīng)的方法就好
三、常見問題
1.Android與js互調(diào)不成功
- 給WebView的setJavaScriptEnabled方法設(shè)置為true，使其允許js代碼執(zhí)行
- 在API高于17的版本上，需要被js調(diào)用的java方法前加上@JavascriptInterface
- 檢查js中的別名是否寫錯(cuò)，調(diào)用java方法時(shí)類的別名，一定要是mWebView.addJavascriptInterface(jsobj, “contact”);里面定義的別名
2.網(wǎng)頁的alert彈不出
需要重寫WebChromeClient中的onJsAlert()方法
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
return super.onJsAlert(view, url, message, result);
}
});
如果需要把web頁面的alert彈出框替換成Android的AlertDialog，可以在onJsAlert()方法里進(jìn)行重寫，并設(shè)置return為true
3.Js調(diào)用java方法修改UI界面不成功
只要明白這一點(diǎn)：js調(diào)用的java方法，其實(shí)是運(yùn)行在另外一個(gè)子線程WebViewCoreThread中
測(cè)試一下：把以下語句分別放在Activity的onCreate()方法里和被js調(diào)用的java方法中
Log.e(TAG, "運(yùn)行線程name->" + Thread.currentThread().getName());
當(dāng)onCreate執(zhí)行時(shí)運(yùn)行的log：
運(yùn)行線程name->main
當(dāng)JsObject類中的方法運(yùn)行時(shí)的log：
運(yùn)行線程name->WebViewCoreThread
很明顯，子線程不允許修改主線程UI，所以我們想通過js調(diào)用java代碼直接修改UI界面的做法是不被允許的
如果需要修改，可以通過Handler機(jī)制去解決
4.如何讓手機(jī)的返回鍵跳到上一個(gè)Web頁面
如果不對(duì)手機(jī)系統(tǒng)的返回鍵進(jìn)行處理，那么我們按返回鍵會(huì)直接關(guān)閉當(dāng)前Activity，而不會(huì)回到上一個(gè)Web頁面
解決這個(gè)問題，我們可以重寫Activity中的onBackPressed()方法：
@Override
public void onBackPressed() {
super.onBackPressed();
if (mWebView.canGoBack()) {
mWebView.goBack();
} else {
finish();
}
}
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
- 三步搞定:Vue.js調(diào)用Android原生操作
- DCloud的native.js調(diào)用系統(tǒng)分享實(shí)例Android版代碼
- Android WebView的使用方法及與JS 相互調(diào)用
- Android編程使用WebView實(shí)現(xiàn)與Javascript交互的方法【相互調(diào)用參數(shù)、傳值】
- JS調(diào)用Android、Ios原生控件
- Android總結(jié)之WebView與Javascript交互（互相調(diào)用）
- Android與JS之間跨平臺(tái)異步調(diào)用實(shí)例詳解
- Android webview和js互相調(diào)用實(shí)現(xiàn)方法
- Android WebView使用方法詳解 附j(luò)s交互調(diào)用方法
- Android與JS相互調(diào)用的方法
相關(guān)文章
Android Filterable實(shí)現(xiàn)Recyclerview篩選功能的示例代碼
這篇文章主要介紹了Android Filterable實(shí)現(xiàn)Recyclerview篩選功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
最近有好多朋友向小編咨詢Android Studio多渠道的打包方法，今天小編給大家分享Android Studio多渠道打包套路，需要的朋友參考下吧2017-11-11
一文理解Android系統(tǒng)中強(qiáng)指針的實(shí)現(xiàn)
因?yàn)锳ndroid中很多地方代碼是用C++編寫，為了能夠保證C++中指針能夠被正確的釋放，于是Android引入了其實(shí)在C++中已經(jīng)有的智能指針技術(shù)2021-10-10
跟選擇銀行卡界面類似，也是用一個(gè)PopupWindow,不過輸入密碼界面是一個(gè)自定義view，當(dāng)輸入六位密碼完成后用回調(diào)在Activity中獲取到輸入的密碼并以Toast顯示密碼。這篇文章主要介紹了Android自定義View仿支付寶輸入六位密碼功能的相關(guān)資料,需要的朋友可以參考下2016-10-10
kotlin定義靜態(tài)變量、方法可以采用伴生對(duì)象companion object的方式。 下面這篇文章主要給大家介紹了關(guān)于Kotlin使用靜態(tài)變量與靜態(tài)方法的相關(guān)資料,需要的朋友可以參考下2018-12-12
android如何獲取手機(jī)聯(lián)系人的數(shù)據(jù)庫(kù)示例代碼
很多人在做手機(jī)聯(lián)系人的apk時(shí)會(huì)遇到，如何獲取手機(jī)聯(lián)系人數(shù)據(jù)庫(kù)的問題，本篇文章主要介紹了android如何獲取手機(jī)聯(lián)系人的數(shù)據(jù)庫(kù)示例代碼，有興趣的可以了解一下。2017-01-01
Android 版本、權(quán)限適配相關(guān)總結(jié)
針對(duì) Android 6.0 （API 23）已以上版本，Google 增強(qiáng)全新的權(quán)限，應(yīng)用程序在使用敏感權(quán)限（如拍照、查閱聯(lián)系人或存儲(chǔ)）時(shí)需要先征求用戶必須贏得用戶同意。2021-05-05
為使應(yīng)用程序之間能夠彼此通信，Android提供了IPC（Inter Process Communication，進(jìn)程間通信）的一種獨(dú)特實(shí)現(xiàn)：AIDL（Android Interface Definition Language，Android接口定義語言）2021-06-06
android 加載本地聯(lián)系人實(shí)現(xiàn)方法
在android開發(fā)過程中，有些功能需要訪問本地聯(lián)系人列表，本人搜集整理了一番，拿出來和大家分享一下，希望可以幫助你們2012-12-12
完美實(shí)現(xiàn)ExpandableListView二級(jí)分欄效果
這篇文章主要為大家詳細(xì)介紹了ExpandableListView實(shí)現(xiàn)二級(jí)分欄效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11