H5分享系列二----ionic2填坑

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-box{width: 100%;  
  height: 0; 
  padding-bottom: 80%;   
  overflow: hidden; 
  background-position: center center;   
  background-size: cover;}

json对象与typescript class对象

class-transformer

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事件问题

的样式会影响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);
}

继承 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硬件返回

// 我的页面结构是:

  
    
    
    
  


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