HTML5+PhoneGap+Android-建国科技大学.ppt

HTML5 + PhoneGap + Android 建國科技大學 資管系 饒瑞佶 2013/5 V1 ? Native App Web App Hybrid App 特性 不同的行動裝置作業系統各自提供開發需要的SDK，彼此並不相容 可以跨行動裝置平台，直接透過瀏覽器來執行 將Web App與Native App兩種開發方式混合使用，截長補短 需要的IT技術 Java, Object-C或.NET等 HTML5+CSS3+ JavaScript 綜合前兩者 跨平台能力 低 強 強 使用者經驗與效能 最佳 尚可 可 與行動裝置本機資源整合性 最佳 弱 尚可 學習門檻 高 最低 低 上架銷售 可 不行 可 Native App、Web App與Hybrid App之比較表 相關技術方塊 HTML5：HTML5 + jQuery(Javascript) + jQuery Mobile PhoneGap：行動裝置控制模組(例如硬體) HTML5與PhoneGap透過瀏覽器的webkit串接 最後透過SDK(Android、iOS、Windows)封裝兩者 PhoneGap 又稱?Apache Cordova? 行動開發框架(frame) 透過這個框架，開發者可以專心寫 HTML, JavaScript 與 CSS，與 Native 溝通的事就交給 PhoneGap 所以寫網頁的人也可以加入行動App的開發 利用PhoneGap開發Android /en/2.0.0/guide_getting-started_android_index.md.html 其他系統： /en/2.7.0/guide_getting-started_index.md.html#Getting%20Started%20Guides 下載PhoneGap Download the latest copy of?PhoneGap?and extract its contents. We will be working with the Android directory. /download/ PhoneGap for Android 步驟0：準備好需要的網頁 步驟1：使用Eclipse建立Android專案 步驟2：下載PhoneGap開發包(目前是2.7版) 步驟3：解壓縮PhoneGap開發包，取出lib\android目錄內的cordova-2.7.0.jar與cordova-2.7.0.js 串接示意圖 Webkit Javascript interface Webkit HTML5 Browser GPS WiFi Compass Camera … 行動裝置本機硬體 Native Code 控制 BT + Web App * 步驟4：在Android專案內的assets目錄建立www目錄，用來放置HTML網頁(離線模式) 步驟5：把cordova.jar(原始是cordova-2.7.0.jar，建議更名)複製到/libs裡，cordova.js(原始是cordova-2.7.0.js)複製到/assets/www裡 步驟6：修改程式 把Class extends 從Activity 改成 DroidGap 把setContentView(R.layout.main);改成 super.loadUrl(“file:///android_asset/www/index.html”); 步驟7： 將既有的網頁加入到assets/www內，配合步驟6，首頁命名為index.html !DOCTYPE HTML html head titleHello Inside/title script type=text/javascript charset=utf-8″ src=cordova.js/script /head body h1PhoneGap架構測試/h1 /body /html 發佈測試看看！ 先整合jQuery與jQuery Mobile 加入jQuery與jQuery的相關js到assets\www內 加入下列tag到assets\www\index.html中 meta charset=utf-8 / meta name=viewport content=width=device-width, initial-scale=1/ script src=jquery-1.9.1.min.js/script link rel=stylesheet href=jquery.mobile-1.3.0.min.css script src=jquery.mobile-1.3.0.min.js/script 修改index.h