ionic2 经验一

父控件

• 声明使用flexbox布局

display: -webkit-flex;
display: flex;

• 方向、换行

flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: row wrap;

• 水平方向对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;

• 竖直方向对齐方式

align-items: flex-start | flex-end | center | baseline | stretch;

• 竖直方向多余空间调整（换行情况下）

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

子控件

• 竖直方向对齐方式

align-self: auto | flex-start | flex-end | center | baseline | stretch;

ionic 最佳实践

• css 度量计算calc函数

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

• 开发

创建component/page/service
// 需要到app.module.ts中注册
// 创建component
$ ionic g component QicklyComponent --componentsDir src/pages/home

// 创建page
$ ionic g page NewsDetailPage --pagesDir src/pages/news

// 创建service
$ ionic g provider HttpClient --providersDir src/providers

添加第三方js library

配置
index.html
copy.config.js

使用

// 声明百度地图的变量
declare let BMap:any;
declare let BMAP_STATUS_SUCCESS:any;

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

网络请求http-client.ts

能够跨域的接口

• native
• h5

不能跨域的接口

• native

• 浏览器开发调试

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统一显示iOS的样式

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

.gitignore

• 不建议提交到服务器的文件

$ cat .gitignore
node_modules/
platforms/
plugins/

www/

性能调优

• js library 加载优化

// 异步加载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

// 保存状态
// 保存状态（将插件信息、node_modules写到package.json中）
$ ionic state save
// 保存状态（将插件信息写到config.xml中，删除platform后重新添加platform时会去下载相应的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、权限、横竖屏等
config.xml
cordova-plugin-travel/plugin.xml