Zi 字媒體
2017-07-25T20:27:27+00:00
Introduction - 前言
在之前的文章「Android WebApp 開發教學 - HTML5 + PhoneGap = 如虎添翼」中，已經與各位介紹過 JavaScript Bridge 技術與 PhoneGap。接下來我們就來試試看 PhoneGap 用起來的感覺是如何囉。
PhoneGap Contacts API 使用教學
首先我們先參考前面幾篇文章建立 Android Project，並且掛上 PhoneGap Library。還記得之前的「Android WebApp 開發教學 - HTML5 Web Storage」這一篇文章中，我們使用 HTML5 Web Storage 設計了一個聯絡簿 WebApp。接下來我們要透過 PhoneGap Contacts API 將聯絡簿的資料與手機進行整合。先說明一下，PhoneGap 都是採用 JavaScript 的方式呼叫，並且統一用 Callback 進行非同步處理，所有 PhoneGap 的 API 都是建立在 navigator 這個物件中，如果您有對 PhoneGap 實作自己的 Plugins 也是一樣透過 navigator 來呼叫喔。接下來的聯絡簿範例我們會用到以下兩個函式：
1
2
3
4
5
// 讀取手機聯絡簿
navigator.contacts.find(fields, onSuccess, onError);
// 建立手機聯絡簿
navigator.contacts.create();
先看一下 index.html 的內容，這裡僅設計顯示畫面，有關業務邏輯的程式我們放在 contacts_pg.js 這一支檔案中。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
xmlns="http://www.w3.org/1999/xhtml" lang="zh-TW">
http-equiv="Content-Type" content="text/html; charset=UTF-8" />
HTML5 WebApp Contacts Example
type="text/javascript" charset="utf-8" src="cordova-1.7.0.js">
type="text/javascript" charset="utf-8" src="jquery.min.js">
type="text/javascript" charset="utf-8" src="contacts_pg.js">
WebApp PhoneGap 聯絡簿
type="button" value="刷新聯絡簿" id="refresh_btn" />
border="1">
姓名
電話
id="contact_body">
姓名：type="text" name="name_txt" id="name_txt" />
電話：type="text" name="tel_txt" id="tel_txt" />
type="button" value="新增" id="create_btn" />
接著來看一下 contacts_pg.js 的內容（如下程式碼），處理的過程中我們也會用到 jQuery 函式，這裡就先不介紹囉。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
// 網頁都載入完畢後才會執行
$(document).ready(function(){
// 重新刷新手機聯絡簿
$('#refresh_btn').click(function(){
// 只抓 displayName, phoneNumbers 兩個欄位
var fields = ['displayName', 'phoneNumbers'];
navigator.contacts.find(fields, onSuccess, onError);
});
// 建立一筆新的聯絡簿成員
$('#create_btn').click(function(){
// 電話必須使用陣列存放
var phoneNumbers = [];
phoneNumbers[0] = new ContactField('work', $('#tel_txt').val(), false);
// 建立 Contact 物件並且儲存
var myContact = navigator.contacts.create();
myContact.displayName = $('#name_txt').val();
myContact.phoneNumbers = phoneNumbers;
myContact.save(
function(){
alert('新增完成');
$('#name_txt').val('');
$('#tel_txt').val('');
},
onError
);
});
});
// 讀取手機聯絡簿成功後要執行的程式
function onSuccess(contacts) {
// 先清空 Table
$('#contact_body').children().remove();
for (var i=0; i<contacts.length; i++) {
var tels = '';
for (x in contacts[i].phoneNumbers) {
tels += contacts[i].phoneNumbers[x].value + '';
}
// 新增資料到畫面 Table 中
$('#contact_body').append(''+contacts[i].displayName+''+tels+'');
}
}
// 發生錯誤要執行的程式
function onError(contactError) {
alert('Error!');
}
Android WebApp 執行後的畫面如下，輸入姓名與電話後按下「新增」按鈕，新增完成後按下「刷新聯絡簿」重新讀取手機聯絡簿：
剛剛新增的聯絡簿也可在手機裡面看的到，畫面如下：
整體用起來的感覺還算順暢，理論上把這樣的程式拿到 iOS 等等其他作業系統中，應該是能夠正常運作的（筆者手邊暫無環境可以測試）。PhoneGap 還有其他很多 API 可以玩，有機會再跟各位介紹囉。
Reference - 參考資料
PhoneGap Contacts API Document
jQuery Web Site
系列文章
Android WebApp 開發教學 (1) – HTML5 WebView 行動應用
Android WebApp 開發教學 (2) – HTML5 Web Storage
Android WebApp 開發教學 (3) – HTML5 + PhoneGap = 如虎添翼
Android WebApp 開發教學 (4) – PhoneGap Contacts API 使用教學
分享到 Twitter(在新視窗中開啟)
按一下以分享至 Facebook(在新視窗中開啟)
分享到 LinkedIn(在新視窗中開啟)
點這裡寄給朋友(在新視窗中開啟)
按一下即可分享至 Skype(在新視窗中開啟)
分享到 Reddit(在新視窗中開啟)
分享到 Tumblr(在新視窗中開啟)
按一下以分享到 Telegram(在新視窗中開啟)
寫了
5860316篇文章，獲得
23313次喜歡