iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
自我挑戰組

資訊技術解戈迪安繩結系列 第 3

IT|程式設計|Front-End|Cordova + eclipse

前言


談起跨平台手機 Apps,PhoneGap 應該算是最為人熟識的 Framework。

PhoneGap 與 Cordova 的實際差異:按照官方的說法 PhoneGap 是 Cordova 的一個 distribution。

原來是 Adobe 在 2011 年從一家小型公司手上收購了 PhoneGap。然後又把它的 Source Code 捐獻了給 Apache 基金會成為 OSS。但 Adobe 又保留了 PhoneGap Build 這個服務自己獨有。

從此於是乎兩者的關係曖昧不清…按照官方的說法 PhoneGap 是 Cordova 的一個 distribution。

”PhoneGap is a distribution of Apache Cordova. You can think of Apache Cordova as the engine that powers PhoneGap, similar to how WebKit is the engine that powers Chrome or Safari.“

實作


作業系統:Mac

[Hello World]

確保 Android SDK 已經有被加入 PATH 環境變數中,在 Mac 上可以加到 ~/.bash_profile 裡面
export ANDROID_HOME=/Users/Kevin/Agile-MAC/Android/android-sdk-macosx

準備 ios build

1.安裝 Xcode
2.安裝 ios-sim、ios-deploy

npm install -g ios-sim
npm install -g ios-deploy

3.安裝 Node.js
官方建議 用 npm 來安裝 Cordova
sudo npm install -g cordova

建立 Hello World 專案

cordova create hello com.errui.hello HelloWorld

上述指令會建立一個 hello 目錄,接下來的指令都是要在這個 hello 目錄下執行

cordova platform add ios
cordova platform add android

查詢目前 cordova 支援的平台

cordova platform

執行 Hello World 程式

cordova emulate android
cordova emulate ios

如果目前在 Android 模擬器那邊已經建立了多個 AVD 的話,
跑起來的可能不是我們要的那個,
可以執行下面的指令先看一下目前有的 AVD:
cordova run android —list

若是要指定 Nexus_4_API_15 這個 AVD,可以這麼做
cordova run android --target=Nexus_4_API_15

下面就是 Android 和 iOS 模擬器,分別把 Hello World 專案執行起來的畫面

Android
https://ithelp.ithome.com.tw/upload/images/20171210/20107621kTPRmLa1kA.png

iOS
https://ithelp.ithome.com.tw/upload/images/20171210/20107621fFnhAsHFmZ.png

參考資料:
Cordova: The Command-Line Interface
Cordova: Android Platform Guide
Cordova: iOS Platform Guide
http://blog.tiger-workshop.com/difference-between-phonegap-and-cordova/


上一篇
IT|程式設計|Front-End|PhoneGap APP 快速開發移動端應用
下一篇
IT|程式設計|Front-End|Redis 及 WebSocket的一個實時消息推送系統
系列文
資訊技術解戈迪安繩結29

尚未有邦友留言

立即登入留言