ionic从小白开始

原ionic读完大概需要17分钟

发布时间：2018-11-20 23:53 星期二
刘伟波
871
更新于： 2019-01-09 23:10 星期三

安装

npm install ionic@3.12.0  // 安装指定版本
ionic -version
ionic info  // 查看系统信息

快速开始

ionic start myApp tabs
cd myApp 
ionic serve 
// or  改变默认端口8100 为 8101
ionic serve -p 8101

更新报错

eg1:

Error ECONNRESET - Reload and websocket error breaks server

https://github.com/ionic-team/ionic-app-scripts/issues/1345

解决方案：

npm install @ionic/app-scripts@nightly --save-dev

安装平台 android 微信

android

ionic cordova platform ls  //查看
ionic cordova platform add android  //添加安装

报错

Failed to fetch platform cordova-android@~6.2.2 #2412

解决方案

https://github.com/ionic-team/ionic-cli/issues/2412

As @TomohikoTsuji stated, just use the below commands. That worked for me

npm uninstall -g cordova
npm install –g cordova@6.5.0 or npm install –g cordova@latest
ionic cordova platform add android

微信

ionic cordova platform add browser // 添加平台，生成静态文件，生成www静态目录可以部署在nigix平台

底部tabs组件编写

// tabs.html
<ion-tab [root]="tabHome" tabTitle="首页" tabIcon="list-box"></ion-tab>

// tabs.ts
import { HomePage } from '../home/home';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  tabHome = HomePage;
}

快速生成文件page

ionic generate (简写g)  // 选择式
ionic g page discovery // 直接生成discovery页面page

然后修改src下的app下的app.modules.ts

小技巧：苹果app对于接口请求要求是HTTPS

布局小技巧

找组件 components
找样式 theming下的css-utilities把常用的已经举例出来了, https://ionicframework.com/docs/theming/css-utilities/
组件会带有默认的全局padding属性
自定义scss文件,通过全局import引入
安卓和ios平台样式类不一样，通过类名改变不同样式
-
安卓和ios通过属性来控制显示的不同

弹出浮层和关闭浮层

弹出

// moer.html
      <button ion-button outline small (click)="showModal()">登录/注册</button>

// more.ts
import {LoginPage} from '../login/login';

  constructor(
    public modalCtrl: ModalController
  ) {
  }
showModal() {
    const modal = this.modalCtrl.create(LoginPage);
    modal.present();
  }

关闭

// login.html
 <button ion-button  (click)="dismiss()">
        <span ion-text color="primary" showWhen="ios">取消</span>
        <ion-icon name="md-close" showWhen="android"></ion-icon>
      </button>

// login.ts
import { ViewController } from 'ionic-angular';
constructor(
    public viewCtrl: ViewController
  ) {
  }

  dismiss() {
   this.viewCtrl.dismiss()
  }

请求封装 HTTP

ionic g provider

import {HttpClient} from '@angular/common/http';
import { Response } from '@angular/http';
import {Observable} from 'rxjs';

constructor(public http: HttpClient) {
  }

private getUrlReturn(url: string): Observable<string[]>{
    return this.http.get(url)
      // 成功
      .map(v => JSON.parse(v) || {})
      // 失败
      .catch(this.handerError)
  }

storage

add it to the imports list in your NgModule declaration (for example, in src/app/app.module.ts):


import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    // ...
  ],
  providers: [
    // ...
  ]
})
export class AppModule {}

Finally, inject it into any of your components or pages:

import { Storage } from '@ionic/storage';

export class MyApp {
  constructor(private storage: Storage) { }

  ...

  // set a key/value
  storage.set('name', 'Max');

  // Or to get a key/value pair
  storage.get('age').then((val) => {
    console.log('Your age is', val);
  });
}

点击查看官网实例Storage

生命周期

ionViewDidLoad
ionViewWillEnter
ionViewDidEnter

更多生命周期

页面跳转

modal 临时、过渡的一个弹窗
nav 用于层级关系的页面展示
导航返回键配置
https://ionicframework.com/docs/api/IonicModule/

https://ionicframework.com/docs/api/config/Config/

forRoot(appRoot, config, deepLinkConfig)

import { IonicApp, IonicModule } from 'ionic-angular';

@NgModule({
  declarations: [ MyApp ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
      backButtonText: 'Go Back',
      iconMode: 'ios',
      modalEnter: 'modal-slide-in',
      modalLeave: 'modal-slide-out',
      tabsPlacement: 'bottom',
      pageTransition: 'ios-transition'
    }, {}
  )],
  bootstrap: [IonicApp],
  entryComponents: [ MyApp ],
  providers: []
})

图片上传功能

照相机、文件、文件路径、传输模块的下载


npm i -S @ionic-native/camera @ionic-native/file @ionic-native/file-path @ionic-native/transfer

ionic cordova plugin add cordova-plugin-camera -S

ionic cordova plugin add cordova-plugin-file  -S

ionic cordova plugin add cordova-plugin-file-transfer  -S

ionic cordova plugin add cordova-plugin-filepath  -S

--
作者：刘伟波

链接：http://www.liuweibo.cn/p/240

来源：刘伟波博客

本文原创版权属于刘伟波，转载请注明出处，谢谢合作