阅读 1649

ionic V3.10 开发踩坑集锦(一)

最近在用ionic 开发程序,把踩过的坑记下来和大家分享下,希望对其他人有帮助。 版本号如下:

  • ionic: 3.10.3
  • cordova: 7.0.1

之前写过一篇V3.3的踩坑集锦,地址如下:ionic V3.3开发踩坑集锦,假如两者有冲突的地方,以这篇为准。

  1. 在子界面的html中设置ion-nav标签,会自动添加上返回箭头,而在rootPage中自动去掉它。在浏览器中调试时,保存添加ion-nav的修改,浏览器自动刷新,但是并未显示修改,将浏览器的地址修改成localhost:8100,重新运行即可。原因是保存自动刷新会将此子页面放置在root中,所以返回键不会出现。

  2. 使用ionic generate page demo创建新的界面,然后从其他界面跳转过去,可能会报错cannot find module '../demo',此时尝试中断运行,重新键入ionic serve运行。

  3. ionic 时间选择器的用法:

    html:

     <ion-datetime displayFormat="YYYY年MM月" cancelText="取消" doneText="确定" [(ngModel)]="myDate" (ngModelChange)="changeDate($event)"></ion-datetime>
    复制代码

    ts:

     private myDate='2017-10';// 注意:一定要写成‘YYYY-MM-DD’这样的形式,不要写成‘YYYY/MM/DD’等其他的样式,不用与ion-datetime标签设置的样式一样
    复制代码
  4. 可以在app.module.ts中设置子界面隐藏Tab,代码如下:

  import { ErrorHandler, NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
  import { MyApp } from './app.component';
  @NgModule({
    declarations: [
     MyApp,
   ],
   imports: [
     BrowserModule,
    IonicModule.forRoot(MyApp, {
    tabsHideOnSubPages: true // 主要是这句,参见:http://ionicframework.com/docs/api/config/Config/
      })
   ],
   bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
  ],
  providers: []

  })
  export class AppModule { }
复制代码
  1. 使用Echarts,直接通过npm安装,然后在使用的文件中import echarts from 'echarts';,简单方便。这个本质是Angular如何安装第三方js库,具体可以参见:https://segmentfault.com/q/1010000010230463

推荐

最后推荐下我写的ionic的小项目,具体可以参见 适合ionic初学者的小项目

关注下面的标签,发现更多相似文章
评论