父控件
- 声明使用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
