免費(fèi)AI編程助手
Android WebView和JavaScrip交互基礎(chǔ)
2023-03-31 14:16 更新
本節(jié)引言：
在上一節(jié)中我們對Android的WebView(網(wǎng)頁視圖)進(jìn)行了學(xué)習(xí)，相信已經(jīng)了解了WebView的基本用法；
而本節(jié)我們要學(xué)習(xí)的就是通過：HTML -> JS ->Java來完成HTML5端與Android手機(jī)間的 互訪！好的，話不多說，有嗎有真相，讓我們通過編寫代碼來體驗(yàn)這種微妙的聯(lián)系吧~
PS：為了方便，本節(jié)用到的HTML都是以文件的形式放到assets目錄下，只需通過 loadUrl("file:///android_asset/~")即可加載對應(yīng)的HTML~
1.核心步驟講解：
首先，我們定義一個類，用于將數(shù)據(jù)暴露出來，JS通過該類暴露的方法(Public)來調(diào)用Android！
接著，我們在WebView所在頁面Activity，使用下述代碼:
webview.getSettings().setJavaScriptEnabled(true);
webview.addJavascriptInterface(object,"name");
然后js或者h(yuǎn)tml中調(diào)用name.xxx調(diào)用對象里的暴露的方法：
比如：
另外，setJavaScriptEnabled是在Android 4.4以前的系統(tǒng)才有效?。?！下一節(jié)我們會來講解Android 4.4后 WebKit的變化以及要注意的地方！
2.使用示例講解：
1）HTML通過JS顯示Toast與普通列表的對話框
運(yùn)行效果圖：
代碼實(shí)現(xiàn)：
先準(zhǔn)備我們的HTML文件，創(chuàng)建好后放到assets目錄下：
demo1.html:
<html>
<head>
<title>Js調(diào)用Android</title>
</head>
<body>
<input type="button" value="Toast提示" onclick="myObj.showToast('曹神前來日狗~');"/>
<input type="button" value="列表對話框" onclick="myObj.showDialog();"/>
</body>
</html>自定義一個Object對象，js通過該類暴露的方法來調(diào)用Android
MyObject.java:
/**
* Created by Jay on 2015/9/11 0011.
*/
public class MyObject {
private Context context;
public MyObject(Context context) {
this.context = context;
}
//將顯示Toast和對話框的方法暴露給JS腳本調(diào)用
public void showToast(String name) {
Toast.makeText(context, name, Toast.LENGTH_SHORT).show();
}
public void showDialog() {
new AlertDialog.Builder(context)
.setTitle("聯(lián)系人列表").setIcon(R.mipmap.ic_lion_icon)
.setItems(new String[]{"基神", "B神", "曹神", "街神", "翔神"}, null)
.setPositiveButton("確定", null).create().show();
}
}最后是MainActivity.java，啟用JavaScript支持，然后通過addJavascriptInterface暴露對象~
public class MainActivity extends AppCompatActivity {
private WebView wView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wView = (WebView) findViewById(R.id.wView);
wView.loadUrl("file:///android_asset/demo1.html");
WebSettings webSettings = wView.getSettings();
//①設(shè)置WebView允許調(diào)用js
webSettings.setJavaScriptEnabled(true);
webSettings.setDefaultTextEncodingName("UTF-8");
//②將object對象暴露給Js,調(diào)用addjavascriptInterface
wView.addJavascriptInterface(new MyObject(MainActivity.this), "myObj");
}
}2）HTML通過JS調(diào)用三種不同的對話框
運(yùn)行效果圖：
實(shí)現(xiàn)代碼：
先往assets目錄下塞一個html文件： demo2.html：
<html>
<head>
<meta http-equiv = "Content-Type" content="text/html;charset=UTF-8"
<title>測試Js的三種不同對話框</title>
<script language="JavaScript">
function alertFun()
{
alert("Alert警告對話框!");
}
function confirmFun()
{
if(confirm("訪問百度?"))
{location.;}
else alert("取消訪問!");
}
function promptFun()
{
var word = prompt("Prompt對話框","請輸入點(diǎn)什么...:");
if(word)
{
alert("你輸入了:"+word)
}else{alert("呵呵,你什么都沒寫!");}
}
</script>
</head>
<body>
<p>三種對話框的使用</p>
<p>Alert對話框</p>
<p>
<input type="submit" name = "Submit1" value="展示1" onclick="alertFun()"/>
</p>
<p>Confirm對話框</p>
<p>
<input type="submit" name = "Submit2" value="展示2" onclick="confirmFun()"/>
</p>
<p>Prompt對話框</p>
<p>
<input type="submit" name = "Submit3" value="展示3" onclick="promptFun()"/>
</p>
</body>
</html>PS：主布局和prompt布局這里就不貼了！ 直接上MainActivity.java:
public class MainActivity extends AppCompatActivity {
private WebView wView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
wView = (WebView) findViewById(R.id.wView);
//獲得WebSetting對象,支持js腳本,可訪問文件,支持縮放,以及編碼方式
WebSettings webSettings = wView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setAllowFileAccess(true);
webSettings.setBuiltInZoomControls(true);
webSettings.setDefaultTextEncodingName("UTF-8");
//設(shè)置WebChromeClient,處理網(wǎng)頁中的各種js事件
wView.setWebChromeClient(new MyWebChromeClient());
wView.loadUrl("file:///android_asset/demo2.html");
}
//這里需要自定義一個類實(shí)現(xiàn)WebChromeClient類,并重寫三種不同對話框的處理方法
//分別重寫onJsAlert,onJsConfirm,onJsPrompt方法
class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url, String message,
final JsResult result) {
//創(chuàng)建一個Builder來顯示網(wǎng)頁中的對話框
new Builder(MainActivity.this).setTitle("Alert對話框").setMessage(message)
.setPositiveButton("確定", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
}).setCancelable(false).show();
return true;
}
@Override
public boolean onJsConfirm(WebView view, String url, String message,
final JsResult result) {
new Builder(MainActivity.this).setTitle("Confirm對話框").setMessage(message)
.setPositiveButton("確定", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.confirm();
}
})
.setNegativeButton("取消", new DialogInterface.OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}
}).setCancelable(false).show();
return true;
}
@Override
public boolean onJsPrompt(WebView view, String url, String message,
String defaultValue, final JsPromptResult result) {
//①獲得一個LayoutInflater對象factory,加載指定布局成相應(yīng)對象
final LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
final View myview = inflater.inflate(R.layout.prompt_view, null);
//設(shè)置TextView對應(yīng)網(wǎng)頁中的提示信息,edit設(shè)置來自于網(wǎng)頁的默認(rèn)文字
((TextView) myview.findViewById(R.id.text)).setText(message);
((EditText) myview.findViewById(R.id.edit)).setText(defaultValue);
//定義對話框上的確定按鈕
new Builder(MainActivity.this).setTitle("Prompt對話框").setView(myview)
.setPositiveButton("確定", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
//單擊確定后取得輸入的值,傳給網(wǎng)頁處理
String value = ((EditText) myview.findViewById(R.id.edit)).getText().toString();
result.confirm(value);
}
})
.setNegativeButton("取消", new OnClickListener() {
@Override
public void onClick(DialogInterface dialog, int which) {
result.cancel();
}
}).show();
return true;
}
}
}3.HTML通過JS讀取Android聯(lián)系人并顯示
該代碼實(shí)現(xiàn)的是通過js讀取Android手機(jī)中聯(lián)系列表,然后顯示到HTML中 當(dāng)我們點(diǎn)擊某個電話號碼時,會直接跳轉(zhuǎn)到撥號頁面 實(shí)現(xiàn)關(guān)鍵： 利用onload()在網(wǎng)頁加載的時候加載相應(yīng)的js腳本,而js腳本中定義的一個函數(shù)是 取出傳遞過來的對象,獲取里面的數(shù)據(jù),通過for循環(huán)以單元行的形式打印出來！
運(yùn)行效果圖：
實(shí)現(xiàn)代碼：
往assets文件夾下編寫要給demo3.html文件，內(nèi)容如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顯示獲取的聯(lián)系人列表</title>
<script language="JavaScript">
function show(jsondata)
{
//將傳遞過來的Json轉(zhuǎn)換為對象
var jsonobjs = eval(jsondata);
//獲取下面定義的表格
var table = document.getElementById("PersonTable");
//遍歷上面創(chuàng)建的Json對象,將每個對象添加為
//表格中的一行,而它的每個屬性作為一列
for(var i = 0;i < jsonobjs.length;i++)
{
//添加一行,三個單元格:
var tr = table.insertRow(table.rows.length);
var td1 = tr.insertCell(0);
var td2 = tr.insertCell(1);
td2.align = "center";
var td3 = tr.insertCell(2);
//設(shè)置單元格的內(nèi)容和屬性
//其中innerHTML為設(shè)置或者獲取位于對象起始和結(jié)束標(biāo)簽內(nèi)的HTML
//jsonobjs[i]為對象數(shù)組中的第i個對象
td1.innerHTML = jsonobjs[i].id;
td2.innerHTML = jsonobjs[i].name;
//為現(xiàn)實(shí)的內(nèi)容添加超鏈接,超鏈接會調(diào)用Java代碼中的
//call方法并且把內(nèi)容作為參數(shù)傳遞過去
td3.innerHTML = "<a href = 'javascript:sharp.call(\""+jsonobjs[i].phone + "\")'>"
+jsonobjs[i].phone + "</a>";;
}
}
</script>
</head>
<!-- onload指定該頁面被加載時調(diào)用的方法,這里調(diào)用的是Java代碼中的contactlist方法-->
<body style="margin:0px; background-color:#FFFFFF; color:#000000;" onload = "javascript:sharp.contactlist()">
<!--定義一個表格-->
<table border = "0" width = "100%" id = "PersonTable" cellspacing = "0">
<tr>
<td width = "15%">用戶id</td>
<td align = "center">姓名</td>
<td width = "15%">號碼</td>
</tr>
</table>
</body>
</html> 再寫一個業(yè)務(wù)類Contact.java：
/**
* Created by Jay on 2015/9/11 0011.
*/
public class Contact {
private String id;
private String name;
private String phone;
public Contact(){}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
@Override
public String toString() {
return this.id + "~" + this.name + "~" + this.phone;
}
}再寫一個業(yè)務(wù)類Contact.java：
public class MainActivity extends AppCompatActivity {
private WebView wView;
@SuppressLint("JavascriptInterface")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//設(shè)置WebView的相關(guān)設(shè)置,依次是:
//支持js,不保存表單,不保存密碼,不支持縮放
//同時綁定Java對象
wView = (WebView) findViewById(R.id.wView);
wView.getSettings().setJavaScriptEnabled(true);
wView.getSettings().setSaveFormData(false);
wView.getSettings().setSavePassword(false);
wView.getSettings().setSupportZoom(false);
wView.getSettings().setDefaultTextEncodingName("UTF-8");
wView.addJavascriptInterface(new SharpJS(), "sharp");
wView.loadUrl("file:///android_asset/demo3.html");
}
//自定義一個Js的業(yè)務(wù)類,傳遞給JS的對象就是這個,調(diào)用時直接javascript:sharp.contactlist()
public class SharpJS {
public void contactlist() {
try {
System.out.println("contactlist()方法執(zhí)行了！");
String json = buildJson(getContacts());
wView.loadUrl("javascript:show('" + json + "')");
} catch (Exception e) {
System.out.println("設(shè)置數(shù)據(jù)失敗" + e);
}
}
public void call(String phone) {
System.out.println("call()方法執(zhí)行了！");
Intent it = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
startActivity(it);
}
}
//將獲取到的聯(lián)系人集合寫入到JsonObject對象中,再添加到JsonArray數(shù)組中
public String buildJson(List<Contact> contacts)throws Exception
{
JSONArray array = new JSONArray();
for(Contact contact:contacts)
{
JSONObject jsonObject = new JSONObject();
jsonObject.put("id", contact.getId());
jsonObject.put("name", contact.getName());
jsonObject.put("phone", contact.getPhone());
array.put(jsonObject);
}
return array.toString();
}
//定義一個獲取聯(lián)系人的方法,返回的是List<Contact>的數(shù)據(jù)
public List<Contact> getContacts()
{
List<Contact> Contacts = new ArrayList<Contact>();
//①查詢r(jià)aw_contacts表獲得聯(lián)系人的id
ContentResolver resolver = getContentResolver();
Uri uri = ContactsContract.CommonDataKinds.Phone.CONTENT_URI;
//查詢聯(lián)系人數(shù)據(jù)
Cursor cursor = resolver.query(uri, null, null, null, null);
while(cursor.moveToNext())
{
Contact contact = new Contact();
//獲取聯(lián)系人姓名,手機(jī)號碼
contact.setId(cursor.getString(cursor.getColumnIndex(ContactsContract.Contacts._ID)));
contact.setName(cursor.getString(cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.DISPLAY_NAME)));
contact.setPhone(cursor.getString(cursor.getColumnIndex(ContactsContract.CommonDataKinds.Phone.NUMBER)));
Contacts.add(contact);
}
cursor.close();
return Contacts;
}
}好的，就是那么簡單，但是，當(dāng)你看到效果示意圖，我祭出的是我大聯(lián)想而非N5，就說明了，上述代碼 在N5中執(zhí)行不了，因?yàn)樵?.4以后addJavascriptInterface()就不可以用了~至于為什么，我們會在下節(jié)課 中對WebView在4.4后的注意事項(xiàng)跟大家說下~
代碼下載：
WebViewDemo4：下載 WebViewDemo4.zip
WebViewDemo5：下載 WebViewDemo5.zip
本節(jié)小結(jié)：
好的，本節(jié)我們對WebView和JavaScrip交互進(jìn)行了簡單的學(xué)習(xí)，有點(diǎn)意思是吧~，如果你會 HTML + CSS + JS，那么你可以嘗試著自己創(chuàng)建一個HTML5端的移動APP試試~本節(jié)就說這么多， 謝謝~
以上內(nèi)容是否對您有幫助：
更多建議：