父控件

• 聲明使用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