2015 年 1 月 28 日

[教學] Hello World! Cordova!

本篇目錄

上一篇介紹了如何安裝Cordova,所以這次當然就是非常復古的Hello World!教學,為什麼非常復古呢?因為打從盤古開天以來.....C語言的第一個範例程式就是Hello World,所以導致後面許多語言都以Hello World為開場,既然這是個傳統,我們也來依循傳統簡單的開始我們的Hello World!Cordova!

當我們安裝完Cordova之後,可以輸入以下指令來瞭解Cordova的功能:cordova help瞭解指令對於後續再操作上會覺得比較得心應手,當然如果你嫌麻煩或覺得英文一堆看不懂,也可以直接開始以下的教學。

首先第一步我們要建立一個Cordova 專案,建立顧名思義就是英文的create,而使用creat這個指令來說也有簡便與完成的寫法,簡便的寫法如下:cordova create project_folder 但是建議初學寫還是用完整的寫法,以免日後發現有漏掉,不知道該如何如何家回去等等,完整的寫法如下:cordova create project_folder app_id app_name簡單解釋一下,建立一個Cordova專案最重要的當然就是專案名稱project_folder,這樣會替這個專案建立一個專屬的資料夾,而app_id以iOS App為例,通常都是網址,而且還會把網址反過來寫,比方說這個App如果在網路上,網址就是helloworld.nowilldesign.com,但是當我填寫app_id時就會變成com.nowilldesign.helloworld,而app_name就會是 HelloWorld。

我相信看到這邊還是有很多朋友不懂,所以接下來我們就以step by step方式重新寫一次:

第一步:打開終端機terminal,並切換資料夾到你想放置Cordova 專案的資料夾,比方說我想統一將Cordova專案都放在/Users/nowillchang/projects裡,我就在終端機terminal中輸入以下指令
cd /Users/nowillchang/projects第二步:確定自己在目的地資料夾後,輸入以下指令,建立Cordova專案,app_ID部分記得做更換,若無app_id也可以使用簡便的寫法即可。cordova create HelloWorld helloworld.nowilldesign.com HelloWorld第三步:開啟Finder切換資料夾到目的地,即可看到新增了一個HelloWorld,內容如下圖。

第四步:打開www資料夾開始編寫你熟悉的html、js、css等內容,由於本次範例為Hello World!Cordova!,所以我只在index.html中第36行輸入“Hello World!Cordova!”。

而index.html為建立Cordova專案時,由Cordova自動產生的測試首頁,你可以直接用瀏覽器打開瀏覽看看畫面。

你可以看到上圖中在Connecting to Device下多了一行Hello World!Cordova!,這就是我剛剛輸入的36行。以step by step方式寫下來感覺步驟好像很多,但是其實最重要的還是第二步的建立專案指令,只要會使用這行指令,對建立Cordova專案就沒有問題了。

文章分類:

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關推薦文章

希望您會喜歡
2008 年 5 月 18 日
[appserv] NET HELPMSG 3547

今天開啟我架在本機的PHP站時,appserv又罷工了,整個404找不到網頁,使用appserv重裝功能, 他 […]

Read More
2008 年 7 月 16 日
[欣賞]SPIN - Double Edge Films

God is a DJ ! (Spin - Double Edge) 這個短片是我還在學生的時候就看過了,算一 […]

Read More
2008 年 4 月 23 日
[網站]天義企業股份有限公司官方網站

負責內容:企劃+設計+動畫程式   http://www.uicgroup.com.tw

Read More
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram