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

第1章概 課程目標(biāo)說 項(xiàng)目效果演 Ionic開發(fā)簡 第2章開發(fā)環(huán)境配 java環(huán) C++環(huán) AndroidADT環(huán) Node環(huán) Git環(huán) 安裝時(shí)常見問 第3章快速開 安裝項(xiàng)目依 快速創(chuàng)建項(xiàng) 項(xiàng)目結(jié)構(gòu)說 打包 第4章項(xiàng)目結(jié)構(gòu)搭 為什么要從新整理結(jié)構(gòu) 抽取步 外面四個(gè)js實(shí)現(xiàn)步 功能模塊js的整理步 擴(kuò)展.............................................................................................第5章功能實(shí) 路由的實(shí) 引導(dǎo)頁的實(shí) 創(chuàng)建引導(dǎo)頁步 使用swiper步 首頁的實(shí) 京東項(xiàng)目布局改 Ion-view的生命周 延遲加載的實(shí) Ionic中的頁面跳轉(zhuǎn)和參數(shù)傳 Ionic中的路由跳轉(zhuǎn)方 Ionic中的參數(shù)傳 數(shù)據(jù)請 $http服務(wù)使 promise/A+規(guī) $q服 使用介 上拉加載.....................................................................................ion-infinite-scroll介 使用介 簡 和webSQL的比 ng- 官 使用步 白設(shè) 頁面代 設(shè)置白.............................................................................代碼實(shí) 文章資 雙擊退出應(yīng) 實(shí)現(xiàn)思 app圖 項(xiàng)目優(yōu) 第6章插件擴(kuò) 第1章概課程目標(biāo)說用前端技術(shù)+混合開發(fā)框架的東西，開發(fā)出來一個(gè)app項(xiàng)目效果演Ionic開發(fā)簡配置環(huán)操作（第2章開發(fā)環(huán)境配java環(huán)AndroidADT需1、在上搜索“javajdk”并安2、配置到全局變量JAVA_HOME C++環(huán)Node需1、注意要從新安裝一下vs2016，把c++環(huán)境勾選上AndroidADT環(huán)打包android應(yīng)用的時(shí)候需1、安裝ADT并添加到環(huán)境變量 /2、點(diǎn)擊installer_r24.3.4-windows進(jìn)行安裝，其他文件只需要解壓縮后，放置結(jié)構(gòu)如下圖即可。Android項(xiàng)目結(jié)構(gòu)3、配置到全局變量 Node環(huán)一些插件環(huán)境需1、在搜“node”，安裝即可，默認(rèn)已經(jīng)配置到環(huán)境變量中Git環(huán)ng-cordova插件需要，源代碼管理1、在搜“git”，安裝即可環(huán)境安裝遇到的問2、配置到全局變 安裝時(shí)常見問1、在運(yùn)行ionicbuildandroid的時(shí)候報(bào)錯(cuò)[Error:ANDROID_HOMEisnotsetand“android”commandnotinyourPATH.這個(gè)時(shí)候要這樣設(shè)置： path中寫：%ANDROID_HOME%\tools;%ANDROID_HOME%\tform-tools2、這個(gè)是問題是在環(huán)境變量配置的PATH中要添加3、一直遇到這個(gè)問題，找不到build-解決辦第3章快速開安裝項(xiàng)目依打開命令窗口,在搜索中輸入輸入npminstallgcordova快速創(chuàng)建項(xiàng)先找到一個(gè)放項(xiàng)目的位 中按住shift鍵右擊,在當(dāng)前文件夾打開命令窗 myApp(默認(rèn)是tab樣式項(xiàng)目結(jié)構(gòu)說先找到項(xiàng)目的 中按住shift鍵右擊,在當(dāng)前文件夾打開命令窗 第4章項(xiàng)目結(jié)構(gòu)搭為什么要從新整理結(jié)抽取步控制項(xiàng)目啟動(dòng)的js控制路由跳轉(zhuǎn)的js控制全局變量的js控制兼容性的js功能模塊劃Controller：業(yè)務(wù)邏Factory:數(shù)據(jù)請求，和服務(wù)器進(jìn)行操作Html頁面：功能界Route:路由js，控制我們的頁面跳外面四個(gè)js實(shí)現(xiàn)步1、創(chuàng)建四個(gè)控制全局功能的js文2、把每個(gè)js文件變成模config:configglobal:constantroute:config3、把js文件在html中引4、在app.js文件中注入我們其他三個(gè)模塊的東西（加入功能功能模塊js的整理步1、創(chuàng)建四個(gè)文Controller文件：控制業(yè)務(wù)邏輯的Route文件：功能模塊路由Service文件：數(shù)據(jù)請求的Html頁面2、把每個(gè)js文件變成模塊Controller:controller3、把js文件在html中引4、在模塊js文件中注入需要的服務(wù)和模擴(kuò)/2014/12/ionic-javascript-api-/2014/12/ionic-javascript-api-view-第5章功能實(shí)路由的實(shí)1、在index頁面中加入<ion-vav-view></ion-vav-2、配置路由模塊的內(nèi)容（設(shè)置路由名稱，url地址，模板頁面3、在index.html頁面把路由js引進(jìn)來，在app.js中注入路由模塊的功4、把頁面的功能包裹在ion-view或者是ion-tab引導(dǎo)頁的實(shí)官網(wǎng) Swier3插件結(jié)構(gòu)創(chuàng)建引導(dǎo)頁步1、創(chuàng)建四個(gè)功能模塊文2、編寫模塊功3、在index.html頁面中引入三個(gè)文件(controller,route,service)swiper步1、在任意一個(gè)位置打開開命令窗口，輸入npminstallbower–g2、在項(xiàng)目根打開命令窗口，輸入bowerinstallswiper–save3、在index.html頁面引入swiper.min.css，swiper.min.js4、去官網(wǎng)把案例代碼到項(xiàng)目中使首頁的實(shí)京東項(xiàng)目布局改2、對ion-tabs進(jìn)行了改造3、對tab路由進(jìn)行了改4、對項(xiàng)目進(jìn)行刪減，把沒用的東西都給刪除Ion-view的生命延遲加載的實(shí) angular中實(shí)現(xiàn)延遲加載 me- /package/angular-ionic-image-lazy-load（專門的Ionic延遲加載插件/paveisistemas/ionic-image-lazy-Ionic中的頁面跳轉(zhuǎn)和參數(shù)傳Ionic中的路由跳轉(zhuǎn)方1、通過代碼的方式進(jìn)行跳controller里面注入$state服在頁面中給單擊按鈕增加單2、通過href屬性進(jìn)行跳轉(zhuǎn)寫我們跳轉(zhuǎn)的錨記，url地址進(jìn)行跳3、通過ui-sref屬性進(jìn)行跳轉(zhuǎn)Ionic中的參數(shù)1、先修改路由，在路由中加上參2、將參數(shù)進(jìn)行傳（1）ui-sref：（1）ui-sref：ui-（2）<ahref="#/goodsList/34"><ahref="#/goodsList/34">跳轉(zhuǎn)到商品詳細(xì)頁面（3）代碼跳3、在controller里面注入$stateParams服務(wù)，是一個(gè)參數(shù)對4、其他：用LoaclStorage傳遞參數(shù)數(shù)據(jù)請$http服務(wù)使1、在Factory中注入$http服2、請求使3、$http服務(wù)可以進(jìn)行鏈?zhǔn)綄懛ǖ脑?4、$http服務(wù)的跨域請求promise/A+規(guī)Promise/A+規(guī)范簡Promise/A+規(guī)范表現(xiàn)1、可以通過鏈?zhǔn)骄幊痰姆绞綄Ξ惒讲僮鬟M(jìn)行同步處2、上一個(gè)操作的輸出值是下一個(gè)操作的輸入$q服$q服務(wù)的使用$q服務(wù)使用步驟1、首先注入$q服2、在Factory中使用如下3、在controller中使4、把異步變?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ù)還沒有出來，可是頁面已經(jīng)渲染，加載的距離大于1%所$scope.$on('$ionicView.enter',function(e)所以我們要放在beforeEnter中執(zhí)$scope.$on('$ionicView.beforeEnter',$scope.$on('$ionicView.beforeEnter',function(e)沒有數(shù)據(jù)提示問<divng-hide="pms_isMoreItemsAvailable"style="text-align:<span>我去 家也沒有余糧啊要添加沒有數(shù)據(jù)的提示，在刷新和加載的方法里面要對返回來的result數(shù)據(jù)進(jìn)行非空判斷，然<divng-hide="pms_isMoreItemsAvailable"style="text-align:<span>我去 家也沒有余糧啊循環(huán)加載的問<ion-infinite-scrollng-if="pms_isMoreItemsAvailable"on-infinite="func_loadMoreGoodsList()"</ion-infinite-通過ng-if方法來控制加載的無限循環(huán)默認(rèn)<ion-infinite-scrollng-if="pms_isMoreItemsAvailable"on-infinite="func_loadMoreGoodsList()"</ion-infinite-遮罩 te:在廣播完畢之后執(zhí)行取消遮罩簡indexedDB是HTML5-WebStorage的重要一環(huán)，是一種輕量級(jí)NOSQL數(shù)據(jù)庫。相比websql()更加高效，包括索引、事務(wù)處理和健壯的查詢功能。webSQL的比允許快速索引和搜索的對象，所以在HTML5web應(yīng)用程序中可W3C主推的離線數(shù)據(jù)庫類型，逐漸替代WebSQL類型數(shù)據(jù)庫，更新效率工作在異步模式下執(zhí)行每步操作。讓你使用高效率的的JavaScript驅(qū)官 使用步1、ng-cordova的js文在項(xiàng)目 下面打開命令窗口，輸 -2、在index.html文件中引入ng-cordova.js文3、在app.js(項(xiàng)目中)引入依angular.module('myApp',4、在$ionictform.ready中使用插件功5、相應(yīng)功能的插在項(xiàng)目 下面打開命令窗cordovapluginadd白設(shè)頁面<a<a ephone" 設(shè)置白代碼實(shí)方法方法二文章資 雙擊退出應(yīng)實(shí)現(xiàn)思 app圖1、在項(xiàng)目的 下創(chuàng)建resources文件夾2、在文件夾中都放入icon.png（應(yīng)用圖標(biāo)，最小192x192px，不帶角），ssh.png（啟動(dòng)屏幕，最小2208x2208px，中間區(qū)域1200x1200px）(可以是png、psd、ai)3、在cmd中進(jìn)入項(xiàng)目所在文件夾執(zhí)行 - -- 4、項(xiàng)目中的config文件中是這<tform src="resources\android\icon\drawable-ldpi-icon.png" src="resources\android\icon\drawable-mdpi-icon.png" src="resources\android\icon\drawable-hdpi-icon.png" icon.png"density="xhdp