ionic2 經(jīng)驗一

父控件

  • 聲明使用flexbox布局
display: -webkit-flex;
display: flex;
  • 方向材义、換行
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: row wrap;
  • 水平方向?qū)R方式
justify-content: flex-start | flex-end | center | space-between | space-around;
  • 豎直方向?qū)R方式
align-items: flex-start | flex-end | center | baseline | stretch;
  • 豎直方向多余空間調(diào)整(換行情況下)
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

子控件

  • 豎直方向?qū)R方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;

ionic 最佳實踐

  • css 度量計算calc函數(shù)

可用不同度量單位計算
calc(100%-20px)

  • 開發(fā)

創(chuàng)建component/page/service
// 需要到app.module.ts中注冊
// 創(chuàng)建component
$ ionic g component QicklyComponent --componentsDir src/pages/home

// 創(chuàng)建page
$ ionic g page NewsDetailPage --pagesDir src/pages/news

// 創(chuàng)建service
$ ionic g provider HttpClient --providersDir src/providers

添加第三方j(luò)s library

配置
index.html
copy.config.js

使用

// 聲明百度地圖的變量
declare let BMap:any;
declare let BMAP_STATUS_SUCCESS:any;

// 使用百度地圖 Api
let convertor = new BMap.Convertor();

網(wǎng)絡(luò)請求http-client.ts

能夠跨域的接口

  • native
  • h5

不能跨域的接口

  • native
  • 瀏覽器開發(fā)調(diào)試

Promise 與 Observable

  • json <–> class
    ClassUtil.ts
ClassUtil.jsonToClass(jsonObj, UserInfoModel)
  • 遞歸解析
export class UserInfoModel
{
       ID: number = 0;
       isValid():boolean
        {
           return this.ID != 0;
        }
     update(newUserInfo:UserInfoModel)
     {
     }
}
export class LoginResponseGroupModel extends ISSHttpResponse
{
      results:UserInfoModel;
      status:string;
      nestedPropertyMap()
      {
        return
         {
            results:UserInfoModel
         }
      }
}

平臺判斷

// android 平臺 
if(this.platform.is("android")){}  
// ios 平臺 
if(this.platform.is("ios")){} 

 <button showWhen="android">我是Android平臺</button> 
<button showWhen="ios">我是iOS平臺</button>

Android、iOS統(tǒng)一顯示iOS的樣式

// app.modules.ts
 IonicModule.forRoot(MyApp, { 
                    tabsHideOnSubPages:"true", // nav在push的時候隱藏
                    tabs backButtonText: '',  // 不顯示back按鈕上的文字       
                    iconMode: 'ios', 
                    mode: 'ios' 
})

.gitignore

  • 不建議提交到服務(wù)器的文件

$ cat .gitignore
node_modules/
platforms/
plugins/

www/

性能調(diào)優(yōu)

  • js library 加載優(yōu)化
// 異步加載js 
 <script async defer type="text/javascript" src="build/bmap.js"></script> 
// 代碼異步追加 js library  (在app.component.ts中異步加載)
 appendDependencyJavascript()
  {
    let jsList = ["build/tripledes.js", "build/mode-ecb.js"];
    for(let i = 0; i< jsList.length; i++)
    {
      let js = jsList[i];
      let s = document.createElement("script");
      s.type = "text/javascript";
      s.src = js;
      window.setTimeout(()=>{
        document.body.appendChild(s);
      }, 1000 * (i + 1));
    }
  }

編譯/壓縮

$ ionic build ios --prod --release
$ ionic build android --prod --release

H5 call Native

  • plugin管理

// 添加plugin
$ ionic plugin add http://iss110301000305/r/cordova-plugin-travel.git#0.0.1
$ ionic plugin add cordova-plugin-http
$ ionic plugin add https://github.com/charleyw/cordova-plugin-alipay.git --variable PARTNER_ID=22222222 --variable SELLER_ACCOUNT=123@qq.com --variable PRIVATE_KEY=MIICdwIBADANBgkqhkiG9w0

// 刪除plugin
$ ionic plugin remove cordova-plugin-travel

// 拷貝plugin的js資源文件到platforms下乎折、修改iOS/Android工程配置信息
$ cordova prepare

// 保存狀態(tài)
// 保存狀態(tài)(將插件信息悔橄、node_modules寫到package.json中)
$ ionic state save
// 保存狀態(tài)(將插件信息寫到config.xml中靶累,刪除platform后重新添加platform時會去下載相應(yīng)的plugins)
$ cordova plugin save
// 資源文件拷貝(www/*.js等)
$ cordova prepare

Native打包

platform管理
// 添加android平臺
$ ionic platform add android@6.1.0

// 添加iOS平臺
$ ionic platform add ios@4.3.0

// 刪除平臺
$ ionic platform remove android
plugin管理(如上)

缺少某個modules
$ npm install @modules名@latest --save-dev

Android、iOS項目配置

配置app名稱癣疟、splash page挣柬、app version、權(quán)限睛挚、橫豎屏等
config.xml
cordova-plugin-travel/plugin.xml

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末邪蛔,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子扎狱,更是在濱河造成了極大的恐慌侧到,老刑警劉巖勃教,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異床牧,居然都是意外死亡荣回,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進店門戈咳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人壕吹,你說我怎么就攤上這事著蛙。” “怎么了耳贬?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵踏堡,是天一觀的道長。 經(jīng)常有香客問我咒劲,道長顷蟆,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任腐魂,我火速辦了婚禮帐偎,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蛔屹。我一直安慰自己削樊,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布兔毒。 她就那樣靜靜地躺著漫贞,像睡著了一般。 火紅的嫁衣襯著肌膚如雪育叁。 梳的紋絲不亂的頭發(fā)上迅脐,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天,我揣著相機與錄音豪嗽,去河邊找鬼谴蔑。 笑死,一個胖子當(dāng)著我的面吹牛昵骤,可吹牛的內(nèi)容都是我干的树碱。 我是一名探鬼主播,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼变秦,長吁一口氣:“原來是場噩夢啊……” “哼成榜!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起蹦玫,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤赎婚,失蹤者是張志新(化名)和其女友劉穎刘绣,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體挣输,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡纬凤,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了撩嚼。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片停士。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖完丽,靈堂內(nèi)的尸體忽然破棺而出恋技,到底是詐尸還是另有隱情,我是刑警寧澤逻族,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布蜻底,位于F島的核電站,受9級特大地震影響聘鳞,放射性物質(zhì)發(fā)生泄漏薄辅。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一抠璃、第九天 我趴在偏房一處隱蔽的房頂上張望站楚。 院中可真熱鬧,春花似錦鸡典、人聲如沸源请。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽谁尸。三九已至,卻和暖如春纽甘,著一層夾襖步出監(jiān)牢的瞬間良蛮,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工悍赢, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留决瞳,地道東北人。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓左权,卻偏偏與公主長得像皮胡,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子赏迟,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,933評論 2 355

推薦閱讀更多精彩內(nèi)容

  • afinalAfinal是一個android的ioc屡贺,orm框架 https://github.com/yangf...
    passiontim閱讀 15,431評論 2 45
  • 前言:用cordova開發(fā)hybrid app的過程中,由于是html5開發(fā)的app,在手機上很多權(quán)限受限制...
    京東內(nèi)部優(yōu)惠券閱讀 5,377評論 5 65
  • 心情尚可甩栈,經(jīng)過熟悉的地方雖然依然會心痛泻仙,也不知道多久會好起來,但總體上我是平靜的量没。今天下決心記錄自己的心情玉转,晚上低...
    一只貓樣的獅子閱讀 143評論 0 0
  • 未來家里的客廳不再是電視,而是裝著滿滿的書的書柜殴蹄!這就是進步
    陳東Growth閱讀 182評論 0 0
  • 拿起毛筆練習(xí)寫字快三個月了究抓,一共學(xué)會了11個字。是的袭灯,沒錯就是11個字漩蟆。而且我還是沒什么膽量拍拍胸脯說每個字都寫得...
    Lufi閱讀 312評論 2 1