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

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