大纲版本

青岩App体验

• H5
• App

H5 + flexbox 布局

为了便于调试、不重度依赖ionic，提倡尽量少的使用ionic提供的UI 组件，简单的页面推荐使用 flexbox来进行布局。

父控件

声明使用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 最佳实践

开发

创建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
    }
  }
}

浏览器调试

$ ionic serve

平台判断

// 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
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

// 保存状态
$ ionic state save
$ cordova plugin save

cordova-plugin-travel

Native打包

platform管理

// 添加android平台
$ ionic platform add android@6.1.0

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

// 删除平台
$ ionic platform remove android

plugin管理（如上）

Android、iOS项目配置

• 配置app名称、splash page、app version、权限、横竖屏等
• config.xml
• cordova-plugin-travel/plugin.xml

iOS打包脚本

fastlane简介

fastlane配置

• 脚本配置
• Appfile
• Fastlane
• Matchfile
• 证书

// 1, 根据bundle id去苹果网站生成`App ID`

// 2, 生成证书
$ match development
$ match adhoc
$ match appstore

脚本打包样例

// adhoc
$ fastlane ios adhoc comments:"修复bugs"

// appstore
$ fastlane ios appstore comments:"修复bugs"

Android打包脚本

• 配置文件
• release-signing.properties
• sign.keystore
• 打包

$ ./gradlew assembleRelease

自动打包平台

cordova-plugin-travel

使用方式

if(window['travel'])
{
    // 查看大图
    let index = "2"; // 默认显示第几张图片,index从0开始
    let imgList = [index, "http://1.png", "http://1.png", "http://1.png"];
    window['travel'].showImages(imgList);

    // Android退出App
    window['travel'].exitApp();

    // Android检查版本
    window['travel'].updateVersion();
}

注意事项

1）Android Plugin中，为做到plugin通用，不要在java代码中直接访问R.java中的资源，统一借助RUtil.java处理
2）Android Plugin中，为避免与项目中的资源文件重名，plugin中所有资源文件(id/color/style/drawable/layout)统一以plugin_作为前缀
3）新增加文件时，需要配置plugin.xml

其它

开发工具

• WebStorem
• Sublime

网络工具

• Postman / Charles
• Shadowsocks

版本工具

• Git