Ionic in Action MEAP v06 - 07

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顯示在底部

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • ionic工程發布之前的最后一步,即代碼壓縮(獲取更好的性能)以及代碼混淆(以免源碼被有心者輕易獲取)。包括以下步...
    全棧弄潮兒閱讀 2,867評論 0 11
  • 在現在的前端開發中,前后端分離、模塊化開發、版本控制、文件合并與壓縮、mock數據等等一些原本后端的思想開始...
    Charlot閱讀 5,504評論 1 32
  • 安裝Gulp首先需要安裝Node.js,并在控制臺輸入$ npm install gulp -gMac端需要寫成$...
    LaBaby_閱讀 959評論 0 1
  • 參照Gulp for Beginners來學習Gulp基本內容。以下為學習記錄筆記。 安裝Gulp 首先需要安裝N...
    JenniferYe閱讀 2,576評論 1 17
  • 原文標題:Gulp for Beginners作者: Zell Liew翻譯:治電小白菜原文地址:https://...
    ZZES_ZCDC閱讀 1,611評論 6 18