混合app開發(fā)基礎(chǔ)-課件ionic項目實戰(zhàn)課程筆記

Ionic項目實第1章概 課程目標(biāo)說 項目效果演 Ionic開發(fā)簡 第2章開發(fā)環(huán)境配 java環(huán) C++環(huán) AndroidADT環(huán) Node環(huán) Git環(huán) 安裝時常見問 第3章快速開 安裝項目依 快速創(chuàng)建項 項目結(jié)構(gòu)說 打包 第4章項目結(jié)構(gòu)搭 為什么要從新整理結(jié)構(gòu) 抽取步 外面四個js實現(xiàn)步 功能模塊js的整理步 擴展..........................................................................................第5章功能實 路由的實 引導(dǎo)頁的實 創(chuàng)建引導(dǎo)頁步 使用swiper步 首頁的實 京東項目布局改 Ion-view的生命周 延遲加載的實 Ionic中的頁面跳轉(zhuǎn)和參數(shù)傳 Ionic中的路由跳轉(zhuǎn)方 Ionic中的參數(shù)傳 數(shù)據(jù)請 $http服務(wù)使 promise/A+規(guī) $q服 Ion-refresher介 使用介 上拉加載..................................................................................ion-infinite-scroll介 使用介 簡 和webSQL的比 ng- 官 使用步 白設(shè) 頁面代 設(shè)置白..........................................................................代碼實 文章資 雙擊退出應(yīng) 實現(xiàn)思 app圖 項目優(yōu) 第6章插件擴 第1章概用前端技術(shù)+混合開發(fā)框架的東西，開發(fā)出來一個appIonic配置環(huán)操作（第2章開發(fā)環(huán)境配javaAndroidADT需1、在上搜索“javajdk”并安2、配置到全局變量JAVA_HOME Node需1、注意要從新安裝一下vs2016，把c++環(huán)境勾AndroidADT打包android應(yīng)用的時候需1、安裝ADT并添加到環(huán)境變量 中，請參考中的第一個問題進行/2、點擊installer_r24.3.4-windows進行安裝，其他文件只需要解壓縮后，放置結(jié)構(gòu)如下圖即可。Android項目結(jié)構(gòu)3、配置到全局變量 Node一些插件環(huán)境需1、在搜“node”，安裝即可，默認(rèn)已經(jīng)配置到環(huán)境變量中Gitng-cordova插件需要，源代碼管理1、在搜“git”，安裝即可環(huán)境安裝遇到的問2、配置到全局 1、在運行ionicbuildandroid的時候報錯[Error:ANDROID_HOMEisnotsetand“android”commandnotinyourPATH.這個時候要這樣設(shè)置： path中寫：%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools2、這個是問題是在環(huán)境變量配置的PATH中要添加3、一直遇到這個問題，找不到build-解決辦4、這個問題是大家在配置npm的時候用了，要把的代碼去5、這個問題是把c盤/用戶/用戶名下的/.gradle文件夾刪掉，然后ionicbuildandroid第3章快速開打開命令窗口,在搜索中輸入輸入npminstallgcordova先找到一個放項目的 中按住shift鍵右擊,在當(dāng)前文件夾打開命令窗 myApp(默認(rèn)是tab樣式先找到項目的 中按住shift鍵右擊,在當(dāng)前文件夾打開命令窗 第4章項目結(jié)構(gòu)搭控制項目啟動的app.js控制路由跳轉(zhuǎn)的route.js控制全局變量的控制不同平臺兼容性的功能模塊劃Controller：業(yè)務(wù)邏Factory:數(shù)據(jù)請求，和服務(wù)器進行操作Html頁面：功能Route:子功能路由js，控制我們的頁js1、創(chuàng)建四個控制全局功能的js文2、把每個js文件變成模config:configglobal:constantroute:config3、把js文件在html中引4、在app.js文件中注入我們其他三個模塊的東西（加入功能1、通過angular.module.config方法定義路2、引入$stateProvider（）,3、就是根據(jù)瀏覽器url地址后面#部分后面你的變化匹配不同的路由，匹配到合適的路由之后，就會把templateUrl中寫得頁面模板渲染到我們頁面中name屬性的值進行選擇渲染。Controller屬性中的控制器會被自動渲染到模板頁面中，變?yōu)閚g-controller=”控制器名稱”。1angular.module.constant2GlobalVariable，在其他模塊1、通過angular.module.config定義成模2、注入$ionicConfigProvider服js1、創(chuàng)建四個文Controller文件：控制業(yè)務(wù)邏Route文件：功能模塊路由Service文件：數(shù)據(jù)請求的Html頁面2、把每個js文件變成模塊route:angular.moduleconfigservice:angular.modulefactoryroute:angular.moduleconfig3、把js文件在html中引4、在模塊js文件中注入需要的服務(wù)和模/2014/12/ionic-javascript-api-/2014/12/ionic-javascript-api-view-第5章功能實Ui-router的介地址： /angular-ui/ui-ui-router他算是angular中進行路由跳轉(zhuǎn)的一個第插件，本質(zhì)是對ng-route進行了一些封裝。1、通過npminstallangular-ui-router2、index.html啟動頁面中引入js文件，引入順序要注意，因為需要angular中的ng-route的東西，所以要在引入angular.js文件之后引3、需要引入ui-router模4、在html中的某個加上ui-view，作用就是在頁面中挖了一5、js文件中編寫我們的路由6、根據(jù)瀏覽器地址欄的變化，匹配不同的路由，然后進行模板頁面的為了實現(xiàn)在一個頁面中可以出現(xiàn)多個坑（模板頁面替換位置）抽象路由的概念：1路由中的模板2父子路由的層級關(guān)系。Ionic1、在index頁面中加入<ion-nav-view></ion-nav-view>，在ionic中ui-routerui-view已經(jīng)被<ion-nav-view>組件封裝了，所以不會出現(xiàn)在頁面中。2、要寫路由模塊的配置信息，通過angular.module.config配置路由信（設(shè)置路由名稱，url地址，模板頁3、在index.html頁面把路由jsapp.js中注入路由模塊的功4、把頁面的功能包裹在ion-view或者是ion-tab5、根據(jù)瀏覽器中url地址的變化，匹配不同的6、渲染我們的模板頁面到相應(yīng)的<ion-nav-view></ion-nav-view>1、創(chuàng)建四個功能模塊2、編寫模塊功能，（這里從之前的代碼html頁面和css樣式3、在index.html頁面中引入三個文件(controller,route,service)Swiper3簡官網(wǎng) Swier3插件結(jié)構(gòu)swiper步1、在任意一個位置打開開命令窗口，輸npminstallbower–g2、在項目根打開命令窗口，輸入bowerinstallswiper–save3、在index.html頁面引入swiper.min.css，swiper.min.js4、把頁面中的html代碼加上對應(yīng)的class樣5、在controller中初始化swiper插件，并設(shè)置相應(yīng)的京東項目布局改2、在index頁面引入四個文件3、在總路由中注入子功能路由，controller,service也都要在子功能路由中Tab模板改1、對ion-tabs里面變?yōu)樗膫€ion-tab組2、對四個ion-tab組件的名稱，圖標(biāo)，跳轉(zhuǎn)地址進行了修改，ion-nav-view組件的name屬性改掉3、把tabs的抽象路由給抽取了出來，變?yōu)橐粋€功能4、在index頁面中引入tabs的相關(guān)文5、在總路由中注入tabs.route模動態(tài)生成1、在controller中模擬請求數(shù)據(jù)，把請求回來的數(shù)據(jù)放到$scope2、在html頁面中通過ng-repeat指令循環(huán)生成slider3、初始化swiper對象，注意最好把observeParents，observer這兩個設(shè)置為4、要注意初始化swiper的時間，最好放中Ion-viewIonic 不能在ionic angular中實現(xiàn)延遲加載 me- /package/angular-ionic-image-lazy-load（專門的Ionic延遲加載插件/paveisistemas/ionic-image-lazy-1、用bower進行2、在index頁面中引入ion-image-lazy-load.js文4、在ion-content組件上加上lazy-scroll指令，注意lazy-scroll指令只能作用Ioni-content組件上5、把滾動容器中所有img的src屬性替換為image-lazy-IonicIonic中的路由跳轉(zhuǎn)方1、通過代碼的方式進行controller里面注入$state服在頁面中給單擊按鈕增加單擊在事件方法里面調(diào)用$state.go(“路由名稱2、通過href屬性進行注意：寫我們跳轉(zhuǎn)的錨記，url地址進行跳3、通過ui-sref屬性進行跳Ionic中的參數(shù)傳1、先修改路由，在路由中加上2、將參數(shù)進行傳（1）ui-sref：（1）ui-sref：ui-（2）<a<ahref="#/goodsList/34">跳轉(zhuǎn)到商品詳細頁面（3）代碼跳3、controller里面注入$stateParams服務(wù)，是一個參數(shù)45、其他：用LoaclStorage傳遞參數(shù)Angular中的service(父級概念包含Service,factory,Provider三個子級概念，都是返回service（父級概念對三種概念定義模塊的使用場Factory:返回一個對象，對象中是方法的集Service:在一個模塊中返回多個服務(wù)，適合用service創(chuàng)建模Provider：是service的底層實現(xiàn)，angular本身的東西，提供的$http服務(wù)使1、在Factory中注入$http服2、請求3、$http服務(wù)可以進行鏈?zhǔn)綄懛ǖ脑?4、$http服務(wù)的跨域請求promise/A+規(guī)Promise/A+規(guī)范簡Promise/A+規(guī)范表現(xiàn)1、可以通過鏈?zhǔn)骄幊痰姆绞綄Ξ惒讲僮鬟M行同步處2、上一個操作的輸出值是下一個操作的輸入$q服$q服務(wù)的使用$q服務(wù)使用步驟1、首先注入$q服2、在Factory中使用如下3、在controller4、把異步變?yōu)橥降牟僮?，上一個操作的輸入時下一個操作的輸Ion-refresher介Ion-refresher:必須在ion-content里面使用，而且必須緊挨著ion-。使用介1、添加ion-refersher，然后配置里面的屬2、實現(xiàn)獲取數(shù)據(jù)觸發(fā)的3、在獲取數(shù)據(jù)完畢后停止廣ion-infinite-scroll介必須在ion-content里面使用，而且必須緊挨著ion-content。在部使用介添加ion-infinite-scroll，然后配置里面的屬實現(xiàn)獲取數(shù)據(jù)觸發(fā)的在獲取數(shù)據(jù)完畢后停止廣$scope.$on('$ionicView.enter',function(e)如果在enter時間中執(zhí)行刷新方法，會報錯，數(shù)據(jù)還沒有出來，可是頁面已經(jīng)渲染，加載的距離大于1%$scope.$on('$ionicView.enter',function(e)所以我們要放在beforeEnter事件中執(zhí)$scope.$on('$ionicView.beforeEnter',function(e)<divng-hide="pms_isMoreItemsAvailable"style="text-align: 要添加沒有數(shù)據(jù)的提示，在刷新和加載的方法里面要對返回來的result數(shù)據(jù)進行<divng-hide="pms_isMoreItemsAvailable"style="text-align: <ion-infinite-scrollng-if="pms_isMoreItemsAvailable"on-infinite="func_loadMoreGoodsList()"通過ng-if方法來控制加載的無限循<ion-infinite-scrollng-if="pms_isMoreItemsAvailable"on-infinite="func_loadMoreGoodsList()"遮罩template:在廣播完畢之后執(zhí)行取消遮簡indexedDBHTML5-WebStorage的重要一環(huán)，是一種輕量級NOSQL數(shù)據(jù)庫。相比websql()更加高效，包括索引、事務(wù)處理和健壯的查詢功能。webSQL的比允許快速索引和搜索的對象，所以在HTML5web應(yīng)用程序中可W3C主推的離線數(shù)據(jù)庫類型，逐漸WebSQL類型數(shù)據(jù)庫，更新效率工作在異步模式下執(zhí)行每步操作。讓你使用高效率的的JavaScript事件驅(qū)官 使用步1、ng-cordova的js文在項目 下面打開命令窗口，輸 -2、index.html文件中引入ng-cordova.js文3、在app.js(項目中)引入依angular.module('myApp',4、在$ionicPlatform.ready事件中使用插件功5、相應(yīng)功能的插在項目 下面打開命令窗cordovapluginadd白設(shè)頁面代<a<a ephone" 設(shè)置白代碼實方法方法二文章資 實現(xiàn)思app1、在項目的 下創(chuàng)建resources文件夾2、在文件夾中都放入icon.png（應(yīng)用圖標(biāo)，最小192x192px，不角），splash.png（啟動屏幕，最小2208x2208px，中間區(qū)域1200x1200px）(可以是png、psd、ai)3、在cmd中進入項目所在文件夾執(zhí)ionicresources--ionicresources--4、項目中的config文件中是這<platform<iconsrc="resources\android\icon\drawable-ldpi-icon.png"<iconsr