1.SASS
(1)概念:sass是一個css的預處理器,是css的超集;這意味著你可以定期寫CSS和Sass了解它。SASS編譯到CSS,因此,瀏覽器需要特殊的東西;
(2)sass提供了大量的css沒有的特征,比如變量,筑巢,和繼承,但是這個幾個特征對于我們自定義樣式是很有用的;
(3)資源url: http://sass-lang.com/;
(4)Ionic使用sass編寫自己的樣式(styling),并且使用了大量的變量。變量控制的主要有顏色樣式,字體,邊距,邊框上,和更多的。我們能繼承這些變量,并且那時生成我們自己的新值;
2.SASS環境搭建
(1)dos 執行命令:npm install -g gulp;
(2)dos 執行命令:npm install gulp --save-dev
(3)dos 執行命令:npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notifygulp-rename gulp-livereload gulp-cache --save-dev;
3.SASS在ionic項目使用
(1)在ionic start myapp ...生成的項目主目錄下執行 doc 命令:ionic setup sass(必須執行,否則不能進行下面的重新編譯的操作)? ,就會生成node_modules文件夾,里面包含了gulp所要依賴的模塊
(2)重新編譯scss文件dos命令:gulp sass,執行一次,但是如果實時執行,就設置用dos命令:gulp watch設置監聽;而且設置完之前兩個命令后(不執行也行),執行startserve時,每次都會先執行scss文件的重新編譯,之后才啟動服務;
4.自定義scss
(1)在scss文件夾下,創建自己的scss文件;
(2)導入自定義的scss文件在ionic.app.scss文件中,和導入Ionic Style文件一樣,但是自定義的文件導入必須在ionic-style文件之后,語法:@import "customizations"
(3)可以自定義scss文件在www文件夾下面,但是注意兩點:一、在主app文件中導入時文件路徑得修改成'www/...';二、默認情況,Gulp task 認為你會將所有的.scss文件都放在scss文件夾下面,因此在www下的scss文件不會被wather監聽,導致不能監聽到www下scss文件變更,但是可以通過修改gulpfile.js文件來實現對www下的scss文件也進行監聽,
varpaths = {
sass: ['./scss/**/*.scss']
};
可以看到,監聽路徑是個對應的數組,我們只要將www下的scss路徑添加進去,即可實現修改的監聽;
5.手勢事件
(1)兩種方式,一、ionic提供了一些事件,可以通過創建ionic指令,基于ionic提供的事件實現;二、添加監聽事件在你的控制器中(controller),使用ionic提供的$ionicGesture服務;
(2)
6.$apply()和$digest()
(1)在監聽事件中修改了model的值,
(2)$scope.left = event.gesture.deltaX;
(3)所以需要手動調用$digest循環運行,在循環過程中watcher會被調用,檢查model是否發生變化,如果發生變化對應的監聽函數會被執行,進而實現Model和View數據雙向綁定同步至少循環兩次,直到model不再發生變化為止,這就是臟檢查;因此盡可能不要在監聽函數中修改model的值,一般會自動執行的,但是在外部修改或者監聽事件中修改model的值時,就只能手動調用一般是由$apply()來實現的,因為調用$apply()后,會自動執行$digest(),而且$apply()方法的兩種調用方式,無參數,和有參數,無參數直接$apply(),即可;有參數的$apply(function(){..//你的修改model的代碼塊//..}),有參數的,參數會被包含在try...catch中,出錯是由系統幫忙處理。有參數樣式:$scope.$apply(function() { ... }) ;
7.localStorage,WebSQL 和 IndexedDB
(1)localStorage.setItems(key,value);
(2)WebSql由于不同的瀏覽器廠商的不同導致在2010被放棄使用了,在這本書寫作時,只有android和ios兩個在使用,但是隨著時間的推移它將可能被放棄;而且cordova是很好的支持的,
(3)IndexedDB是一個對象儲存,支持不同的數據類型儲存,它有一個域這個域有不同的數據類型,通過這個域可以獲取相應類型的數據,但是在寫這本書時,android和ios還不支持;
(4)cordova數據庫支持文檔:http://cordova.apache.org/docs/en/edge/cordova_storage_storage.md.html#Storage? ; 通過這個文檔我們可以選擇我們平臺應該適合哪個數據庫儲存;
(5)cordova storage plugins : http://plugins.cordova.io/? ;
(6)Android:
(7)IOS:
8.Ionic
(1)ionic.Platform服務提供了有光平臺的方法:isIOS(),isAndroid(),或者platform()返回平臺的名稱;
(2)$ionicConfigProvider初始化配置,
.config($ionicConfigProvider.tabs.style('striped').position('bottom'));
android實現將tabs顯示在底部