親手使用Sencha Touch + phonepag開發Web APP隨筆 -- 第一個APP

參考博文：

[Phonegap+Sencha Touch] 移動開發一、準備工做

[Phonegap+Sencha Touch] 移動開發二、PhoneGap/Cordova初步使用

 

通過差很少1天的折騰，對Sencha Touch和phonepag算是有了初步的瞭解，而後就按照網上的教程開始作的本身的APP。

說到phonepag，補充一點phonepag和cordova的歷史，對你們有個比較深刻的理解，至少我在看到這兩個東西的時候，最開始也是有點懵的。傳送門：新手的第一個phonegap Android應用中關於phonegap的介紹。

 

第一個Hello程序

    第一個程序操做其實很是簡單，只有短短的3個命令，但做爲一個新手來說確實是一次考驗。爲何？由於這個過程當中須要等待很是長的時間，對於新手來說，不知道是出錯了，仍是程序卡死了，又或者什麼庫不存在，或者是網絡慢，等等。（反正這些心情我都有，）。

    OK，進入正題，按照上一步親手使用Sencha Touch + phonepag開發Web APP隨筆 -- 環境安裝篇把軟件都裝好以後，根據教程進入先建立第一個app。

    根據[Phonegap+Sencha Touch] 移動開發二、PhoneGap/Cordova初步使用執行便可。命令只有phonepag爲2個，cordova爲3個，分別是：

#phonepag

>cd d:\
>phonegap create hello com.zwh.hello Hello
>cd hello
D:\hello> phonegap build android

#cordova

>cd d:\
>cordova create hello com.zwh.hello Hello
>cd hello
D:\hello> cordova platform add android
D:\hello> cordova build android

 

    生成的apk文件

   

 

    須要說明的是：

    1. 我第一遍使用了phonepag命令，在create命令下等待了大約10分鐘。

        在build命令下等待了大約40來分鐘，放棄了，就停止了命令。緣由是界面沒有任何提示，一直停在這裏：

       

       

    2. 而我第二遍使用cordova命令時，create命令的時間差很少，

        在執行add android的時候有下載的提示，等了大約10來分鐘，還獲得了一個」This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.「提示。

        在以後的build命令中，從下載gradle-2.13-all.zip開始，界面一直多有內容在閃動，至少能證實程序還在跑（好幾回我都想中斷了），以後安裝了gradle以後，開始下載一堆jar包，過程最後build完成提示執行了43分鐘，提示在」$project\platforms\android\build\outputs\apk「生成了apk文件。

        隨後，我也進行簡單的試驗，證實這些操做只會對第一次操做有影響（刪掉apk文件以後，再次執行build命令，只須要3s就生成了），由於第一次要下載大量須要的庫和jar文件，並且都是經過maven庫下載，速度也比較慢。

 

這樣，個人第一個WebAPP就生成好了，嘗試在電腦的模擬器上安裝，成功！

而後點擊運行一下，雖然只有一個界面，表示操做成功。

 

寫在最後

    本篇博客對實際操做沒有太多詳細描述，主要用來告訴第一次使用者（或者是新環境）裏一些須要注意的地方。

 

 

附錄：

若是須要爲webapp提供一些調用原生api或設備的功能，好比攝像頭、電池信息、訪問文件、讀取通信錄等，須要爲phongap項目添加phonegap插件。

添加插件的方法(確保已經安裝了Git)

cmd執行下面的命令，便可添加對應功能的插件，下面是官方完整的插件列表，我直接拷貝過來，可能會有變化：

Basic device information 基本設備信息:

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

Network and battery status 網絡和電池狀態:

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-network-information.git

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-battery-status.git

Accelerometer, compass, and geolocation 加速度計、指南針和地理位置:

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-device-motion.git

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-device-orientation.git

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-geolocation.git

Camera, media capture, and media playback 攝像頭、網頁攝像頭和多媒體播放:

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-media-capture.git

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-media.git

Access files on device or network 訪問本地或網絡文件:

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git

Notifications via dialog box or vibration 提示框通知或震動:

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-dialogs.git

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git

Contacts 通信錄:

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-contacts.git

Globalization 全球化 多語言:

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-globalization.git

Splash Screen 啓動畫面:

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-splashscreen.git

In-app browser App內嵌瀏覽器:

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-inappbrowser.git

Debug console 調試控制檯:

phonegap local plugin add http://git-wip-us.apache.org/repos/asf/cordova-plugin-console.git   

下面是一些非官方的插件：

• 條形碼

  • phonegap/phonegap-plugin-barcodescanner

  • Scandit/BarcodeScannerPlugin

• 百度定位

  • PhoneGap3.0 使用百度地圖SDK定位

  • DoubleSpout/phonegap_baidu_sdk_location

• 安卓自動更新

  • phonegap更新插件

  • post2000/androidUpdatePlugin

• 手寫簽名

  • cordova-plugin-signature-view

  • netinhoteixeira/cordova-plugin-signature-view

• 推送

  • phonegap-build/PushPlugin

  • mrwutong/cordova-qdc-baidu-push

• 選擇文件或圖片

  • don/cordova-filechooser

  • albertut/cordova-filepicker

  • wymsee/cordova-imagePicker

• Toast提示 - Toast-PhoneGap-Plugin

• 工具類 - Wizcorp/phonegap-plugin-wizUtils

• 本地通知 - katzer/cordova-plugin-local-notifications · GitHub

• 列表選擇 - roberthovhannisyan/PhoneGap-Plugin-ListPicker · GitHub

• 打開文件 - pwlin/cordova-plugin-file-opener2

• 圖片縮放 - RaananW/PhoneGap-Image-Resizer

• 保存圖片到相冊 - grnadav/SaveToPhotoAlbumPhonegapPlugin

• 日期選擇器 - VitaliiBlagodir/cordova-plugin-datepicker

• 屏幕方向 - yoik/cordova-yoik-screenorientation

• SQLite - brodysoft/Cordova-SQLitePlugin

• 鍵盤 - driftyco/ionic-plugins-keyboard

• 封裝了File的操做類 - torrmal/cordova-simplefilemanagement

• WebIntent - Initsogar/cordova-webintent

• 聯繫人選擇 - hazemhagrass/ContactPicker

• ActionSheet - EddyVerbruggen/cordova-plugin-actionsheet