Ionic in Action MEAP v06 - 07

1.SASS

(1)概念:sass是一個css的預(yù)處理器,是css的超集;這意味著你可以定期寫CSS和Sass了解它。SASS編譯到CSS,因此,瀏覽器需要特殊的東西;

(2)sass提供了大量的css沒有的特征,比如變量,筑巢,和繼承,但是這個幾個特征對于我們自定義樣式是很有用的;

(3)資源url: http://sass-lang.com/;

(4)Ionic使用sass編寫自己的樣式(styling),并且使用了大量的變量。變量控制的主要有顏色樣式,字體,邊距,邊框上,和更多的。我們能繼承這些變量,并且那時生成我們自己的新值;

2.SASS環(huán)境搭建

(1)dos 執(zhí)行命令:npm install -g gulp;

(2)dos 執(zhí)行命令:npm install gulp --save-dev

(3)dos 執(zhí)行命令: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 ...生成的項目主目錄下執(zhí)行 doc 命令:ionic setup sass(必須執(zhí)行,否則不能進行下面的重新編譯的操作)? ,就會生成node_modules文件夾,里面包含了gulp所要依賴的模塊

(2)重新編譯scss文件dos命令:gulp sass,執(zhí)行一次,但是如果實時執(zhí)行,就設(shè)置用dos命令:gulp watch設(shè)置監(jiān)聽;而且設(shè)置完之前兩個命令后(不執(zhí)行也行),執(zhí)行startserve時,每次都會先執(zhí)行scss文件的重新編譯,之后才啟動服務(wù);


4.自定義scss

(1)在scss文件夾下,創(chuàng)建自己的scss文件;

(2)導(dǎo)入自定義的scss文件在ionic.app.scss文件中,和導(dǎo)入Ionic Style文件一樣,但是自定義的文件導(dǎo)入必須在ionic-style文件之后,語法:@import "customizations"

(3)可以自定義scss文件在www文件夾下面,但是注意兩點:一、在主app文件中導(dǎo)入時文件路徑得修改成'www/...';二、默認情況,Gulp task 認為你會將所有的.scss文件都放在scss文件夾下面,因此在www下的scss文件不會被wather監(jiān)聽,導(dǎo)致不能監(jiān)聽到www下scss文件變更,但是可以通過修改gulpfile.js文件來實現(xiàn)對www下的scss文件也進行監(jiān)聽,

varpaths = {

sass: ['./scss/**/*.scss']

};

可以看到,監(jiān)聽路徑是個對應(yīng)的數(shù)組,我們只要將www下的scss路徑添加進去,即可實現(xiàn)修改的監(jiān)聽;

5.手勢事件

(1)兩種方式,一、ionic提供了一些事件,可以通過創(chuàng)建ionic指令,基于ionic提供的事件實現(xiàn);二、添加監(jiān)聽事件在你的控制器中(controller),使用ionic提供的$ionicGesture服務(wù);

(2)


6.$apply()和$digest()

(1)在監(jiān)聽事件中修改了model的值,

(2)$scope.left = event.gesture.deltaX;

(3)所以需要手動調(diào)用$digest循環(huán)運行,在循環(huán)過程中watcher會被調(diào)用,檢查model是否發(fā)生變化,如果發(fā)生變化對應(yīng)的監(jiān)聽函數(shù)會被執(zhí)行,進而實現(xiàn)Model和View數(shù)據(jù)雙向綁定同步至少循環(huán)兩次,直到model不再發(fā)生變化為止,這就是臟檢查;因此盡可能不要在監(jiān)聽函數(shù)中修改model的值,一般會自動執(zhí)行的,但是在外部修改或者監(jiān)聽事件中修改model的值時,就只能手動調(diào)用一般是由$apply()來實現(xiàn)的,因為調(diào)用$apply()后,會自動執(zhí)行$digest(),而且$apply()方法的兩種調(diào)用方式,無參數(shù),和有參數(shù),無參數(shù)直接$apply(),即可;有參數(shù)的$apply(function(){..//你的修改model的代碼塊//..}),有參數(shù)的,參數(shù)會被包含在try...catch中,出錯是由系統(tǒng)幫忙處理。有參數(shù)樣式:$scope.$apply(function() { ... }) ;

7.localStorage,WebSQL 和 IndexedDB

(1)localStorage.setItems(key,value);

(2)WebSql由于不同的瀏覽器廠商的不同導(dǎo)致在2010被放棄使用了,在這本書寫作時,只有android和ios兩個在使用,但是隨著時間的推移它將可能被放棄;而且cordova是很好的支持的,

(3)IndexedDB是一個對象儲存,支持不同的數(shù)據(jù)類型儲存,它有一個域這個域有不同的數(shù)據(jù)類型,通過這個域可以獲取相應(yīng)類型的數(shù)據(jù),但是在寫這本書時,android和ios還不支持;

(4)cordova數(shù)據(jù)庫支持文檔:http://cordova.apache.org/docs/en/edge/cordova_storage_storage.md.html#Storage? ; 通過這個文檔我們可以選擇我們平臺應(yīng)該適合哪個數(shù)據(jù)庫儲存;

(5)cordova storage plugins : http://plugins.cordova.io/? ;

(6)Android:

(7)IOS:

8.Ionic

(1)ionic.Platform服務(wù)提供了有光平臺的方法:isIOS(),isAndroid(),或者platform()返回平臺的名稱;

(2)$ionicConfigProvider初始化配置,

.config($ionicConfigProvider.tabs.style('striped').position('bottom'));

android實現(xiàn)將tabs顯示在底部

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

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

友情鏈接更多精彩內(nèi)容