/
index.html
408 lines (247 loc) · 15.6 KB
/
index.html
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
<!DOCTYPE html>
<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>[PhoneGap] 第一次開發PhoneGap教學筆記 - apa</title>
<meta name="author" content="阿帕">
<meta name="description" content="很早很早以前曾經摸過一下Android，還曾想過要走開發手機這條路，但最後還是繼續寫著網頁，不知道選擇對不對，不過至少現在可以用寫網頁的方式做出APP，那就是利用已經出很久的PhoneGap，但到今天才真正的開始學習他，在這邊也會開始慢慢記錄一些有關於PhoneGap的心得 …">
<!-- http://t.co/dKP3o1e -->
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://blog.rx836.tw/blog/phonegap-first/">
<link href="/favicon.png" rel="icon">
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
<script src="/javascripts/modernizr-2.0.js"></script>
<script src="/javascripts/ender.js"></script>
<script src="/javascripts/octopress.js" type="text/javascript"></script>
<link href="/atom.xml" rel="alternate" title="apa" type="application/atom+xml">
<!--Fonts from Google"s Web font directory at http://google.com/webfonts -->
<link href="http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css">
<meta property="fb:admins" content="100000102681259"/>
<meta property="fb:app_id" content="416172151763823" />
<meta property="og:title" content="[PhoneGap] 第一次開發PhoneGap教學筆記 - apa" />
<meta property="og:description" content="很早很早以前曾經摸過一下Android，還曾想過要走開發手機這條路，但最後還是繼續寫著網頁，不知道選擇對不對，不過至少現在可以用寫網頁的方式做出APP，那就是利用已經出很久的PhoneGap，但到今天才真正的開始學習他，在這邊也會開始慢慢記錄一些有關於PhoneGap的心得 …" />
<meta property="og:url" content="http://blog.rx836.tw/blog/phonegap-first/" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-31245620-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body >
<header role="banner"><hgroup>
<h1><a href="/">apa</a></h1>
<h2>Stay Hungry, Stay Foolish</h2>
</hgroup>
</header>
<nav role="navigation"><ul class="subscription" data-subscription="rss">
<li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
</ul>
<form action="http://google.com/search" method="get">
<fieldset role="search">
<input type="hidden" name="q" value="site:blog.rx836.tw" />
<input class="search" type="text" name="q" results="0" placeholder="Search"/>
</fieldset>
</form>
<ul class="main-navigation">
<li><a href="/">Blog</a></li>
<li><a href="/blog/archives">Archives</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<div id="main">
<div id="content">
<div>
<article class="hentry" role="article">
<header>
<h1 class="entry-title">[PhoneGap] 第一次開發PhoneGap教學筆記</h1>
<p class="meta">
<time datetime="2012-10-10T22:39:00+08:00" pubdate data-updated="true">Oct 10<span>th</span>, 2012</time>
| <a href="#disqus_thread">Comments</a>
</p>
</header>
<div class="entry-content"><p>很早很早以前曾經摸過一下Android，還曾想過要走開發手機這條路，但最後還是繼續寫著網頁，不知道選擇對不對，不過至少現在可以用寫網頁的方式做出APP，那就是利用已經出很久的PhoneGap，但到今天才真正的開始學習他，在這邊也會開始慢慢記錄一些有關於PhoneGap的心得</p>
<!--more-->
<p>網路上已經有很多很多的觀念與介紹，所以這邊就不在多述，要開始之前請先安裝<a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html" target="_blank">Java 開發工具包( Java Development Kit , JDK )</a>，建議大家下載JDK6</p>
<p><img src="https://lh3.googleusercontent.com/-O98JK3DRzHM/UHWWC5uq4QI/AAAAAAAABtY/ABoTETFnIJo/s538/1.png" /></p>
<p>安裝好以後接著就下載並安裝<a href="http://www.eclipse.org/downloads/" target="_blanl">Eclipse</a>，Eclipse是一個IDE，一個整合開發環境，類似Microsoft Visual Studio，因為Android官方並沒有推出專屬的手機應用程式開發軟體，但有支援 Eclipse 的官方外掛開發套件</p>
<p><img src="https://lh6.googleusercontent.com/-vDbyAlgXX8M/UHWWDDRPM3I/AAAAAAAABtg/nsLxVsp43L0/s731/2.png" /></p>
<p>以上的安裝和設定過程，都可以參考<a href="http://blog.chinatimes.com/tomsun/archive/2011/11/08/1029787.html" target="_blank">[Android 教學] Android 4.0 SDK 下載安裝中文教學課程講義</a></p>
<p>接著就是下載本篇主角<a href="http://www.phonegap.com/download" target="_blank">PhoneGap</a>，下載以後進行解壓縮</p>
<p>但其實PhoneGap官方網站有詳細的<a href="http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android" target="_blank">入門教學</a>，這裏我就直接按照他的步驟敘述</p>
<p>1.首先開啟Eclipse，選擇<strong>New Project</strong></p>
<p>2.選擇new一個<strong>Android Application Project</strong></p>
<p>3.輸入<strong>Application Name</strong>、<strong>Project Name</strong>和<strong>Package Name</strong></p>
<p>4.設定應用程式icon</p>
<p>5.建立一個<strong>Blank Activity</strong></p>
<p>6.在你的Android專案裡面建立新的目錄，分別是</p>
<pre><code>/libs
assets/www
</code></pre>
<p>7.從剛剛下載的PhoneGap的資料夾裡面，找到<strong>lib/android/</strong>，並且複製<strong>cordova-2.0.0.js</strong>到<strong>assets/www</strong>資料夾底下</p>
<p>8.複製<strong>cordova-2.0.0.jar</strong>到<strong>/libs</strong>底下</p>
<p>9.複製整個<strong>xml</strong>這個資料夾到Android專案底下的<strong>/res</strong>資料夾</p>
<p>10.針對剛剛的<strong>cordova-2.0.0.jar</strong>檔案按下右鍵，選擇<strong>Build Paths/ > Configure Build Path</strong>，切換到Libraries這個頁籤，將<strong>cordova-2.0.0.jar</strong>加入到裡面</p>
<p>11.找到<strong>src</strong>資料夾底下，副檔名為java的檔案並且開啟編輯他</p>
<p>增加<strong>import org.apache.cordova.*;</strong>這行程式</p>
<p>修改class’s extend從Activity改成DroidGap</p>
<p>將<strong>setContentView()</strong>這行取代成<strong>super.loadUrl(“file:///android_asset/www/index.html”);</strong></p>
<p>12.接著點擊<strong>AndroidManifest.xml</strong>選擇<strong>Open With > Text Editor</strong></p>
<p>13.將以下程式加到<strong><uses-sdk…/></strong>和<strong><application…/></strong>tags之間</p>
<pre><code><supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true" />
<uses-permission android:name="android.permission.VIBRATE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECEIVE_SMS" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.GET_ACCOUNTS" />
<uses-permission android:name="android.permission.BROADCAST_STICKY" />
</code></pre>
<p>14.將以下程式加到<strong><activity../></strong>這個tag裡面</p>
<pre><code>android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale"
</code></pre>
<p>15.新增一個<strong>index.html</strong>到<strong>assets/www</strong>資料夾底下，裡面的html碼為</p>
<pre><code><!DOCTYPE HTML>
<html>
<head>
<title>Cordova</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
</code></pre>
<p>接下來就可以點擊專案名稱右鍵，選擇<strong>Run As > Android Application</strong>，開始看結果囉！</p>
<p>假如你沒有AVD可以看<a href="http://blog.chinatimes.com/tomsun/archive/2011/11/24/1054452.html" target="_blank">這篇</a>教學怎麼設定AVD</p>
<p>這樣index.html裡面就是你的Android應用程式的內容了，可以用你熟悉的html+css+js來開發手機應用程式</p>
<p>參考資料:</p>
<p><a href="http://cire.pixnet.net/blog/post/37927775-%5B%E7%AD%86%E8%A8%98%5D--%E7%AC%AC%E4%B8%80%E6%AC%A1%E9%96%8B%E7%99%BC-android-%E7%89%88%E6%9C%AC-phonegap--%2B-jquery-" target="_blank">[筆記] 第一次開發 Android 版本 PhoneGap + JQuery Mobile 就上手</a></p>
<p><a href="http://docs.phonegap.com/en/2.1.0/guide_getting-started_android_index.md.html#Getting%20Started%20with%20Android" target="_blank">Getting Started with Android</a></p>
<p><a href="http://www.eclipse.org/" target="_blank">eclipse</a></p>
<p><a href="http://blog.chinatimes.com/tomsun/archive/2011/11/08/1029787.html" target="_blank">[Android 教學] Android 4.0 SDK 下載安裝中文教學課程講義</a></p>
<p><a href="http://blog.chinatimes.com/tomsun/archive/2011/11/24/1054452.html" target="_blank">[Android 教學] Android 4.0 模擬器安裝設定教學課程講義</a></p>
<p>內容如有錯誤，歡迎指正</p>
</div>
<div>如果你覺得這篇文章有幫助，請幫我讚聲一下:)</div>
<div class="sharing">
<div class="fb-like" data-send="true" data-width="450" data-show-faces="false"></div>
</div>
<footer>
<p class="meta">
<span class="byline author vcard">Posted by <span class="fn">阿帕</span></span>
<time datetime="2012-10-10T22:39:00+08:00" pubdate data-updated="true">Oct 10<span>th</span>, 2012</time>
<span class="categories">
<a class='category' href='/blog/categories/phonegap/'>PhoneGap</a>
</span>
</p>
<p class="meta">
<a class="basic-alignment left" href="/blog/first-win8-app/" title="Previous Post: [Win8] 入門要學說Hello world">« [Win8] 入門要學說Hello world</a>
<a class="basic-alignment right" href="/blog/javascript-currying/" title="Next Post: [JavaScript] 如何保留重複參數的函式，不必每次傳遞-Currying">[JavaScript] 如何保留重複參數的函式，不必每次傳遞-Currying »</a>
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
<section>
<h1>FB Comments</h1>
<div id="facebook_comments" aria-live="polite">
<noscript>Please enable JavaScript to view the comments powered by facebook</noscript>
<div class="fb-comments"
data-href="http://blog.rx836.tw/blog/phonegap-first/"
data-num-posts="5"
data-width="570">
</div>
</div>
</section>
</div>
<aside class="sidebar">
<section>
<h1>Categories</h1>
<ul id="category-list"><li><a href='/blog/categories/css'>CSS (14)</a></li><li><a href='/blog/categories/facebook'>Facebook (5)</a></li><li><a href='/blog/categories/html5'>HTML5 (2)</a></li><li><a href='/blog/categories/javascript'>JavaScript (7)</a></li><li><a href='/blog/categories/jq-plugin'>jQ-Plugin (11)</a></li><li><a href='/blog/categories/jquery'>jQuery (19)</a></li><li><a href='/blog/categories/octopress'>Octopress (3)</a></li><li><a href='/blog/categories/phonegap'>PhoneGap (3)</a></li><li><a href='/blog/categories/win8'>Win8 (4)</a></li><li><a href='/blog/categories/好書分享'>好書分享 (6)</a></li><li><a href='/blog/categories/學習筆記'>學習筆記 (8)</a></li></ul>
</section>
<section>
<h1>Recent Posts</h1>
<ul id="recent_posts">
<li class="post">
<a href="/blog/css-styling-scrollbars/">[CSS] 用CSS改變scrollbar</a>
</li>
<li class="post">
<a href="/blog/css-cursor-rule/">[CSS] 關於CSS Cursor</a>
</li>
<li class="post">
<a href="/blog/css-positioning/">[CSS] CSS position 觀念筆記心得</a>
</li>
<li class="post">
<a href="/blog/jquery-tags-manager/">[jQ-Plugin] 輕鬆加入Tag標籤功能的plugin-Tags Manager</a>
</li>
<li class="post">
<a href="/blog/javascript-documentframent/">[JavaScript] DocumentFragments-JS加快效能的好物</a>
</li>
</ul>
</section>
</aside>
</div>
</div>
<footer role="contentinfo"><p>
Copyright © 2013 - 阿帕 -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'rx836';
// var disqus_developer = 1;
//var disqus_identifier = 'http://blog.rx836.tw/blog/phonegap-first/';
var disqus_identifier = 'http://blog.rx836.tw/blog/phonegap-first/';
var disqus_url = 'http://blog.rx836.tw/blog/phonegap-first/';
var disqus_script = 'embed.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=416172151763823";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
</body>
</html>