loading...

4

ionic从小白开始

ionic读完大概需要18分钟

  • 发布时间:2018-11-20 23:53 星期二
  • 刘伟波
  • 344
  • 更新于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 installg cordova@6.5.0 or npm installg cordova@latest
ionic cordova platform add android

微信

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

底部tabs组件编写

http://images.liuweibo.cn/image/common/ionic-tabs_1546000201387_5873_1546000369361.png

// 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通过属性来控制显示的不同

http://images.liuweibo.cn/image/common/ios-android-diff_1546325482312_56518_1546325566339.jpg

弹出浮层和关闭浮层

弹出

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

更多生命周期

页面跳转

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

来源:刘伟波博客

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

你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 segmentfault平台, 也可以来我的直播间来提问。
    关于技术问题或者有啥不懂的都可以留言, 我会定期回复答疑, 也可以来 我的直播间 提问, 推荐最新仓库 前端知识体系, 感謝支持!