HTML5 + PhoneGap + Android - PDF 免费下载

HTML5 + PhoneGap + Android 建國科技大學資管系饒瑞佶 2013/5 V1 2016/7 V2

開始前建議您準備一台實體手機!

Native App Web App 與 Hybrid App 比較表 Native App Web App Hybrid App 特性不同的行動裝置作業可以跨行動裝置將 Web App 與系統各自提供開發需要的 SDK, 彼此並不相容平台, 直接透過瀏覽器來執行 Native App 兩種開發方式混合使用, 截長補短需要的 IT 技術 Java, Object-C 或.NET HTML5+CSS3+ 綜合前兩者等 JavaScript 跨平台能力低強強使用者經驗與效最佳尚可可能與行動裝置本機最佳弱尚可資源整合性學習門檻高最低低上架銷售可不行可

相關技術方塊 HTML5:HTML5 + jquery(javascript) + jquery Mobile PhoneGap(Cordova): 行動裝置硬體控制模組 HTML5 與 PhoneGap 透過瀏覽器的 webkit 串接 ( 中介者就是 JavaScript) 最後透過原始 SDK(Android ios Windows) 封裝上述兩者

PhoneGap 又稱 Apache Cordova ( 賣給 Adobe) 行動開發框架 (frame) 透過這個框架, 開發者可以專心寫 HTML, JavaScript 與 CSS, 與 Native 溝通的事就交給 PhoneGap 所以寫網頁的人也可以加入行動 App 的開發支援 Android 與 ios 是網頁 /JS 與原生程式碼 (JAVA Object-C SWIFT C#) 間的溝通橋樑

串接示意圖行動裝置本機硬體 GPS Compass Camera WiFi BT Native Code 控制 + Webkit HTML5 Browser Webkit Javascript interface Web App 6

安裝 PhoneGap/Cordova http://cordovawithandroidstudio.blogspot.tw/

安裝 PhoneGap 前準備 https://cordova.apache.org/docs/en/latest/gu ide/cli/ 安裝 JDK 安裝 Android Studio with SDK 安裝 nodejs(https://nodejs.org/en/) Nodejs 建議不要安裝在路徑文字有空白的目錄上安裝 git, 安裝後建議登出 windows 再登入, 讓 Path 生效

輸入 node -v 安裝 nodejs 後

http://git-scm.com/ 安裝 git

安裝 git 後登出 windows 後再登入, 讓 path 生效輸入 git --version

安裝 PhoneGap 確認 nodejs 與 git 安裝完成後輸入 npm install -g cordova

將 C:\Users\ 使用者代號 \AppData\Roaming\npm 加入 path 登出 windows 後再登入, 讓 path 生效

建立 PhoneGap Project 輸入 cordova create d:\cordova rcjao.ctu.im MyCordova 正確安裝後的訊息

D:\Cordova 實際目錄內容目前是空的

可能發生

Update cordova 需要一點時間

After update

專案中加入 Android 平台切換到專案目錄 cd Cordova 輸入 cordova platform add android

Add android platform

platforms 目錄出現 android 目錄與相關檔案

執行專案確認已安裝行動裝置的 adb USB 驅動, 且行動裝置正確連接到電腦切換到專案目錄輸入 cordova run

需要一段時間

In Device 如果你在裝置上看到這個畫面, 那就成功了!

後續直接修改 d:\cordova 專案內的檔案需要修改的是 www 目錄內的 index.html 與 www\js 內的 index.js 如果要調整 Android 那就需要改 platforms\android

將 PhoneGap 專案載入 Android Studio

Import Project

選擇 d:\cordova\platforms\android

假如出現

After few minutes

run

In device 跟之前執行結果一致

整合 jquery Mobile

先整合 jquery 與 jquery Mobile 加入 jquery 與 jquery 的相關 js 到 assets\www 內加入下列 tag 到 assets\www\index.html 中 <script type="text/javascript" src="jquery-2.2.4.min.js"></script> <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"> <script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script>

修改 index.html <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script type="text/javascript" src="jquery-2.2.4.min.js"></script> <link rel="stylesheet" href="jquery.mobile-1.4.5.min.css"> <script type="text/javascript" src="jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" charset="utf-8" src="cordova.js"></script> <script type="text/javascript" charset="utf-8" src="js/index.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>phonegap 測試 </h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li><a href="#"> 選項 1</a></li> <li><a href="#"> 選項 2</a></li> <li><a href="#"> 選項 3</a></li> </ul> </div> <div data-role="footer"> <h1>2013/5/20</h1> </div> </div> </body> </html>

result

提醒到這裡只是載入 HTML 與 jquery/jquery Mobile, 尚未碰到 PhoneGap 要可以執行 PhoneGap, 需要有 cordova.js 1 個 res/xml 的目錄, 裡面需要一個檔案 config.xml 修改 AndroidManifest.xml 載入需要的 plugins

使用時主要是修改 index.html 加入需要的新版面 html 加入對應的處理事件 javascript 程式, 例如 index.html 對應的是 www\js\index.js

實際應用 (I) GPS 定位

建立 Locator 專案調用 GPS 定位 cordova create d:\locator rcjao.ctu.im Locator 加入 android platform cordova platform add android

加入 plugins cordova plugin add https://git-wipus.apache.org/repos/asf/cordova-plugingeolocation.git

Locator 專案載入 Android Studio 自動加入權限

修改 index.html 可以載入 Android studio 後修改 <body> <div class="app"> <div id="messagediv"></div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript">app.initialize();</script> </body> 呼叫 index.js 內的 initialize() 函式

修改 www\js\index.js ondeviceready: function() { app.display("locating..."); app.watchlocation(); },

watchlocation: function() { // onsuccess Callback // 成功取得 GPS 座標 function onsuccess(position) { app.clear(); app.display('latitude: ' + position.coords.latitude.tofixed(6)); app.display('longitude: ' + position.coords.longitude.tofixed(6)); app.display(new Date().toString()); } // 未取得 GPS 座標 // function onerror(error) { app.display(error.message); } // 設定 30 秒逾時則顯示錯誤 // var watchid = navigator.geolocation.watchposition(onsuccess, onerror, { timeout: 30000, enablehighaccuracy: true }); },

display: function(message) { var label = document.createtextnode(message), linebreak = document.createelement("br"); messagediv.appendchild(linebreak); // add a line break messagediv.appendchild(label); // add the text }, clear: function() { messagediv.innerhtml = ""; }

結果

實際應用 (II) 照相機

使用目前專案加入相機 plugin cordova plugin add cordova-plugin-camera

Android 專案會自動更新加入 plugin

使用 Camera 測試看看 Index.html 上加入連結 takephoto.html <body style="font-size: 1.4em;"> <a href="takephoto.html">camera</a> <br> <div class="app"> <div id="messagediv"></div> </div> <script type="text/javascript" src="cordova.js"></script> <script type="text/javascript" src="js/index.js"></script> <script type="text/javascript"> app.initialize(); </script> </body>

takephoto.html <body> <div data-role="page"> <div data-role="header"> <h1>phonegap 照相 </h1> </div> <div data-role="content"> <a data-role="button" data-theme="b" id="take_photo"> 開始拍照 </a> <img style="display:none;width:180px;height:180px;" id="smallimage" src="" /> </div> <div data-role="footer"> <h1>2013/5/20</h1> </div> </div> </body> 啟動照相顯示照片

結果