第一講 phonegap 性能優(yōu)化 以及 phonegap angularjs ionic_W

1、第一講phonegap 性能優(yōu)化 以及 phonegap + Angularjs +ionic 移動(dòng) app 開發(fā)介紹 學(xué)習(xí)要點(diǎn)：.5.Phonegap 第一季 第二季視頻教程內(nèi)容簡(jiǎn)介 phonegap 介紹phonegap 運(yùn)行速度介紹以及 phonegap 安裝介紹 Angularjs 介紹 Ionic 介紹以及學(xué)習(xí) ionic 前為什么要學(xué) AngularjsIonic 安裝 helloword 演示 以及 ionic 在 android 環(huán)境下面導(dǎo)航在最上面解決方案 （重點(diǎn)） Phonegap3.0 以上 ios android 調(diào)試，以及 ionic 寫好代碼后瀏覽器動(dòng)

2、態(tài)預(yù)覽 開發(fā)工具介紹 ，如何不使用 eclipse 來運(yùn)行模擬器調(diào)試程序（重點(diǎn)） 已經(jīng)學(xué)會(huì)了 jqmobi , Sencha 這樣的 htnl5 移動(dòng) App 開發(fā)框架 為什么還要學(xué) ionicCrosswalk 開源 android WebView 引擎，讓 Phonegap android 應(yīng)用飛 .重點(diǎn)）起來（經(jīng)測(cè)試運(yùn)行速度可以提升 3-5 倍主講教師：（樹根） 合作網(wǎng)站： (PhoneGap 中文網(wǎng)) 合作網(wǎng)站： (IT 營(yíng))1. 第一季 第二季內(nèi)容簡(jiǎn)介 第一季內(nèi)容:（免費(fèi)） 1. JquerMobile

3、(發(fā)現(xiàn)做 app 運(yùn)行速度太慢，我們后續(xù)教程放棄用它做 App 開發(fā)，但是可以用它來做一些 wap 網(wǎng)站 或者微信中的微站)第二季內(nèi)容: （jqmobi 基礎(chǔ)免費(fèi)，其他贊助）贊助期滿后陸續(xù)免費(fèi)公開 1. jqmobi 基礎(chǔ) (運(yùn)行速度快)2. jqmobi+discuz+phonegapdiscuz 項(xiàng)目實(shí)戰(zhàn)3. SenchaTouch+Sencha Architecture 可視化開發(fā)工具基礎(chǔ) (運(yùn)行速度快)4. SenchaTouch+Sencha Architectures 淘寶導(dǎo)購 app 項(xiàng)目實(shí)戰(zhàn)2. phonegap 介紹 phonegap 運(yùn)行速度介紹以及 phonegap 安裝

4、介紹1. Phonegap 介 紹 PhoneGap 是一個(gè)用基于 HTML，CSS 和 JavaScript 的，創(chuàng)建移動(dòng)跨平臺(tái)移動(dòng)應(yīng)用程序的快速開發(fā)平臺(tái)。它使開發(fā)者能夠利用 iPhone，Android，Palm，Symbian,WP7,WP8,Bada 和Blackberry 智能手機(jī)的核心功能包括地理定位，加速器，聯(lián)系人，聲音和振動(dòng)等，此外PhoneGap 擁有豐富的插件，可以調(diào)用。 /view/4157600.htm2. Phonegap 運(yùn)行速度1. android 環(huán)境： 512 內(nèi)存手機(jī)可以放棄 phoengap1G雙核手機(jī) 運(yùn)行流暢

5、感覺速度稍微比原生慢 可結(jié)合 Crosswalk 優(yōu)化 2G4 核+ 手機(jī)運(yùn)行流暢 看不出和原生差別 部分手機(jī)兼容可能會(huì)出現(xiàn)問題 需要調(diào)整 css（原生開發(fā)也會(huì)有此問題） a)b)c)d)2. ios 環(huán)境： a) iphone4+運(yùn)行流暢 b) iphone5+ 看不出和原生差別 3. Phonegap 安裝教程 PhoneGap2.9 安裝視頻教程地址： /thread-174-1-1.htmlPhoneGap3.4 安裝視頻教程地址： /thread-668-1-1.html說明：如果 n

6、 年后地址不對(duì)可以去 下載 3. Angularjs 介紹AngularJS 誕生于 2009 年，由 Misko Hevery 等人創(chuàng)建，后被 Google 收購。是一款優(yōu)秀的前端 JS 框架，已用于 Google 的多款產(chǎn)品當(dāng)中 如Gmail、Maps、Calender 等。AngularJS 有著諸多特性，最為核心的是：MVVM、模塊化、自動(dòng)化雙向數(shù)據(jù)綁定、語義化標(biāo)簽、依賴 注入，等等。 /view/9604951.htmAngularjs 號(hào)稱 下一代 web 應(yīng)用 主要特性如下： 1. MVC2. 模塊

7、化與依賴注入3. 雙向數(shù)據(jù)綁定 4. 指令與 UI 控件 官方網(wǎng)站 A但是打不開 大家都懂的angularJs 資源 //angular///api/(phonegap 中文網(wǎng))angularJs 下載 1. /angular.js/2. npm install an

8、gular4. Ionic 介紹 以及學(xué)習(xí) ionic 前為什么要學(xué) AngularjsIonic 是一個(gè)強(qiáng)大的 HTML5 應(yīng)用程序開發(fā)框架，號(hào)稱 AdvancedHTML5 Hybrid Mobile AppFramework 是 AngularJS 移動(dòng)端解決方案 可以幫助您使用 Web 技術(shù)，比如 HTML、CSS 和Javascript 構(gòu)建接近原生體驗(yàn)的移動(dòng)應(yīng)用程序。Ionic 主要關(guān)注外觀和體驗(yàn)，以及和你的應(yīng)用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動(dòng)應(yīng)用程序開發(fā)。 Ionic 是一個(gè)輕量的手機(jī) UI 庫，具有速度快，界面現(xiàn)代化、美觀等特點(diǎn)。為了

9、解決其他一些 UI 庫在手機(jī)上運(yùn)行緩慢的問題。 官網(wǎng)：/學(xué)習(xí) ionic 前為什么要學(xué) Angularjs1. Ionic整合（AngularJs integrate）AngularJs2.IonicUrl routing，use AngularUIRouterIonic url 路由使用AngularUI Router，可以指定不同的路由，方便開發(fā)和集成 3 . Ionic 擴(kuò)展了 AngularJS 指令 （AngularJS Extensions & Directives）ion-tab, ion-content, ion-nav-view

10、, ion-header$ionicPopup,$ionicLoading, $ionicModal遺憾：ionic 直接放棄了 IOS6 和 Android4.1 以下的版本支持，來獲取更好的使用體驗(yàn)。 /devices/android_osandroid 市面設(shè)備統(tǒng)計(jì)圖 Ios 市面設(shè)備統(tǒng)計(jì)圖5. Ionic 安裝 helloword 演示以及 ionic 在 android 環(huán)境下面導(dǎo)航在最上面解決方案 1. 配置環(huán)境 2. 先安裝 node.js3. 安裝 cordovanpm install -g cordovasudo npm instal

11、l -g cordova注意：部分同學(xué)現(xiàn)在直接使用 npm install -g cordova 發(fā)現(xiàn)安裝了以后 執(zhí)行 cordova build android 的時(shí)候 提示需要安裝 platform for android-21 sdk ，意思就是需要 最新版本的 sdk解決方法： 1. 更新 sdk（推薦）或者想其他辦法 2. Sdk 沒法更新的情況下面 可以先卸載當(dāng)前的 cordova，然后再重新指定版本安裝 cordova3. 下載 sdk 包集成 推薦/thread-1566-1-1.htmlAndroid adt 離線包集成 sd

12、k/thread-1456-1-1.html4. 安裝 ionic5.創(chuàng)建運(yùn)行項(xiàng)目Ios 創(chuàng)建安裝運(yùn)行ionic start myproject cd myprojectionic platform add ios ionic build iosionic emulate iosAndroid 創(chuàng)建安裝運(yùn)行 ionic start myproject cd myprojectionic platform add android ionic build androidionic emulate android(模擬器運(yùn)行) ionic run a

13、ndroid(連接上手機(jī)運(yùn)行)npm install -g ionic sudo npm install -g ionic卸載 cordova/thread-1180-1-1.html重新指定版本 安裝 cordova/thread-1127-1-1.htmlnpm install -g cordova4.1.2安裝完成后發(fā)現(xiàn) android 環(huán)境下面導(dǎo)航在最上面解決方案:/thread-1495-1-1.html6. Phonegap3.0 以

14、上 ios android 調(diào)試，以及 ionic 寫好代碼后瀏覽器動(dòng)態(tài)預(yù)覽7. 開發(fā)工具介紹 ，如何不使用 eclipse 來運(yùn)行模擬器調(diào)試程序 前面給大家講過 weinre 在 xcode 開發(fā)中調(diào)試我們的代碼還有 Phonegap 桌面開發(fā)工具 Desktop-App 與手機(jī)調(diào)試工具 /thread-1315-1-1.html下面的 ionic 調(diào)試方法適合于 ios 和 android 并且非常簡(jiǎn)單 ionicserve重要用于瀏覽器調(diào)試 cordova serve第二季中我們采用的是eclipse 開發(fā)工具 發(fā)現(xiàn)對(duì) html5 的支持

15、不是特別好，所以第三季中我們采用了其他編輯器 其他編輯器：任何 html5 編輯器 但是必須不占用 adb 端口Apatana Studio 3sublimeWebStorm可以使用的：例如：dw不可以使用的：國(guó)內(nèi)優(yōu)秀的 Hbuilder html5 開發(fā)共工具 (原因：占用 adb ，暫時(shí)未找到如何解除占用)WebStorm8.0 免費(fèi)下載地址： /thread-1567-1-1.html8. 已經(jīng)學(xué)會(huì)了 jqmobi , Sencha 這樣的 htnl5 移動(dòng) App 開發(fā)框架 為什么還要學(xué) ionic1.Jqmobi輕量級(jí)框架，它的語言基

16、于 jquery 語言容易上手,運(yùn)行速度快，但是沒有 MVC 多人協(xié)作 開發(fā)的概念，項(xiàng)目比較大后 代碼不易維護(hù)(中小項(xiàng)目 1-2 個(gè)人開發(fā)很適用)SenchaTouch2.運(yùn)行速度快 和 jqmobi 運(yùn)行速度差不多，兼容性好，基于 MVC 世界上第一個(gè) html5 移動(dòng)開發(fā)框架，但是它是一個(gè)重量級(jí)的框架，需要 extjs 基礎(chǔ) 代碼復(fù)雜需要較強(qiáng)的程序基礎(chǔ)。 但是 sencha architect 是個(gè)很不錯(cuò)的可視化開發(fā)工具，彌補(bǔ)了 sencha 的不少缺點(diǎn) ionic運(yùn)行速度快 和 jqmobi 運(yùn)行速度差不多，輕量級(jí)框架，基于 Angularjs，支持 Angularjs 的特性，MVC

17、，代碼易維護(hù) IONIC 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開發(fā)框架。通過 SASS 構(gòu)建應(yīng)用程序，它提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。它使用 JavaScript MVVM 框架和AngularJS 來增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用它成為 Web 和移動(dòng)開發(fā)者的共同選擇。即將發(fā)布的AngularJS 2.0 將會(huì)專注于移動(dòng)開發(fā)，相信IONIC 一定會(huì)取得不錯(cuò)的成就 。 3.9. Crosswalk 開源 android WebView 引擎，讓 Phonegap android 應(yīng)用飛起來（經(jīng)測(cè)試運(yùn)行速度可以提升 3-5 倍） 1. Crosswalk 介紹： C

18、rosswalk 作為一款開源的 web 引擎，正是為了跨越這些障礙而生。目前 Crosswalk 正式支持的移動(dòng)操作系統(tǒng)包括 Android 和 Tizen，在 Android 4.0 及以上的系統(tǒng)中使用 Crosswalk 的Web 應(yīng)用程序在 HTML5 方面可以有一致的體驗(yàn)，同時(shí)和系統(tǒng)的整合交互方面（比如啟動(dòng)畫面、權(quán)限管理、應(yīng)用切換、社交分享等等）可以做到類似原生應(yīng)用?，F(xiàn)在 Crosswalk 已經(jīng)成為眾多知名 HTML5 平臺(tái)和應(yīng)用的推薦引擎，包括 Google Mobile Chrome App、Intel XDK、Famo.us 和 Construct2 等等，未來的 Cordova 4.X 也計(jì)劃集成 Crosswalk。同時(shí)在去年的中國(guó)iWeb 大會(huì)上，Cocos2d-HTML5 游戲引擎也宣布與 Crosswalk 展開合作。 2使用 Crosswalk 的優(yōu)點(diǎn)和缺點(diǎn)優(yōu)點(diǎn)：運(yùn)行速度提升 安裝包比較大 Ionic 中集成 Crosswalk （也可以集成其他的 htnl5 框架 如 jqmobi）介紹：/thread-1446-1-1.htmlCordova 中集成 CorssWall(比較復(fù)雜,上面方法已經(jīng)適用于所有應(yīng)