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專案就沒有問題了。

發佈留言

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

相關推薦文章

希望您會喜歡
2020 年 12 月 9 日
讓你用個人Gmail也可以擁有免費又專業的自訂網域信箱

前言 大部分網友都擁有Google帳號,也很習慣使用Google提供的相關服務,所以Gamil也用的相當習慣, […]

Read More
2010 年 5 月 30 日
[遊戲]草監記憶翻牌大考驗之我要找工作

負責內容:企劃+設計+動畫程式    第一次這麼認真寫一個Flash game卻不小心給他 […]

Read More
2016 年 8 月 23 日
[教學] Vue js快速上手 (三) 必學的if else!v-show!

在上一篇我們學到了real time即時更新頁面的方法,在學習任何一種程式語言時,基本上都會有一些必學的東西, […]

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