click事件延时
http://ionicframework.com/docs/v2/faq/#click-delays
手机上适合用 tap 事件，而非click事件，因click事件在手机上有时候需要点击多次才会有响应。
// 禁止事件冒泡
stopEventPropagation(event:Event)
{
let e = event["srcEvent"];
if(e && e != undefined && e != null)
{
let stopPropagation = e["stopPropagation"];
if(stopPropagation && stopPropagation != undefined && stopPropagation != null)
{
e.stopPropagation();
}
}
}
图片路径
模板中src路径要写成：
<img s rc="assets/images/home_ticket@2x.png">
显示网络图片（不变形）
.img-box{width: 100%;
height: 0;
padding-bottom: 80%;
overflow: hidden;
background-position: center center;
background-size: cover;}
<ion-thumbnail
class="img-box"
[ngStyle]="{ 'background-image': 'url(' + imgUrl + ')'}">
</ion-thumbnail>
json对象与typescript class对象
ionic-app-scripts0.0.48有个bug，它在打
ionic build ios --prod --release包的时候，会将metadata删除掉。
文件复制（以添加openlayers3为例）
$ cp node_modules\@ionic\app-scripts\config\copy.config.js config\copy.config.js
打开并编辑，在行尾的位置加入如下代码
{
src: '{{SRC}}/ol/ol.js',
dest: '{{BUILD}}/ol.js'
},
{
src: '{{SRC}}/ol/ol.css',
dest: '{{BUILD}}/ol.css'
}
$ vim package.json
# 加入：
"config": { "ionic_copy": "./config/copy.config.js"},
http://stackoverflow.com/questions/36152343/ionic-2-beta-and-open-layers-3-not-loading-map
https://github.com/driftyco/ionic-app-scripts
http://ionicframework.com/docs/v2/resources/app-scripts/
openlayers3 Map click事件问题
<ion-content/>的样式会影响Map上marker的点击事件:
.scroll-content {
position: absolute;
overflow-x: hidden;
overflow-y: scroll;
}
修改为：
map-page .scroll-content {
position: relative;
overflow-x: visible;
overflow-y: visible;
margin-top: 44px;
height: calc(100vh - 44px - 49px);
}
<ion-tab> 继承 <ion-nav> swipeBackEnabled
某些页面需要禁用滑动返回，在需要禁用的页面：
constructor(public tab: Tab)
{
}
ionViewDidEnter()
{
this.tab.swipeBackEnabled = false;
}
ionViewDidLeave()
{
this.tab.swipeBackEnabled = true;
}
集成百度地图报错
Cannot read property 'fc' of undefined
要将百度地图的初始化代码写在ngOnInit的勾子函数中
ngOnInit(){
var map = new BMap.Map("map_container");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 15);
window.setTimeout(function(){
map.panTo(new BMap.Point(116.409, 39.918));
}, 2000);
}
css transform 百分比
css transform 可以平移元素，可以设置百分比，是相对于元素本身的。
// 表示x轴向左移动宽度的一半+11px，y轴不平移
transform: translate(calc(-50% + 11px), 0)
sass中calc中使用变量
// 以下样式，在浏览器中会使用第一个样式，在ios/android中会使用第二个样式
.ol-zoom{
top: calc(100% - 6.2em);
}
// 减去status bar的高度
.platform-ios .ol-zoom, .platform-md .ol-zoom{
top: calc(100% - 6.2em - #{$cordova-ios-statusbar-padding});
}
所有平台都显示iOS效果
// app.module.ts
IonicModule.forRoot(MyApp,
{
tabsHideOnSubPages:"true", // nav在push的时候隐藏tabs
backButtonText: '',
iconMode: 'ios',
mode: 'ios'
})
保存ionic状态
将添加的plugins/platform/...等信息写入配置文件
$ ionic state save
打包prod（压缩main.js文件）
打包后app启动时间会大幅缩短
https://forum.ionicframework.com/t/ionic-2-speed-up-boot-time/46372/133
$ ionic build ios --prod --release
$ ionic build android --prod --release
Android硬件返回
// 我的页面结构是:
<ion-nav>
<ion-tabs>
<ion-tab></ion-tab>
<ion-tab></ion-tab>
<ion-tab></ion-tab>
</ion-tabs>
</ion-nav>
// app.component.ts
this.platform.registerBackButtonAction(()=>{
if(this.nav.getActive().instance.tabs.getSelected().canGoBack())
{
// nav可以返回
console.log("h5 page back " + this.nav.getActive().instance.tabs.getSelected().canGoBack());
this.nav.getActive().instance.tabs.getSelected().pop();
}
else
{
// nav不能返回时，判断是否是android+cordova环境，如果是则调用native插件exit app
console.log("ask exit app!" + this.nav.getActive().instance.tabs.getSelected().canGoBack());
if(this.platform.is("cordova") && cordova && cordova["exec"] && this.platform.is("android"))
{
// 调用native插件exit app，kill app进程，
// 如果不kill进程，重新打开app的时候会黑屏
}
}
}, 100);
iOS上禁止webview拖拽
self.webView.scrollView.bounces = NO;
