ionic3搭建开发/测试环境

用IONIC3很久了,但是一直没有看到IONIC3官方的相关文档有写关于开发、测试环境的建立或者设置,由此网上找了一番,小牛试刀终于成功搭建了测试和开发环境了,下面来分享一下相关代码与配置。
首先在src目录下创建一个config目录,建立三个文件,分别是webpack.config.js、environment.prod.ts、environment.dev.ts

webpack.config.js中的代码如下:

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {
    useDefaultConfig[process.env.IONIC_ENV].resolve.alias = {
        '@environment': path.resolve(__dirname + '/environment.' + process.env.IONIC_ENV + '.ts'),
    };
    return useDefaultConfig;
};

继续阅读ionic3搭建开发/测试环境

ionic2、3双击硬件back按键退出应用

在手机设备上,经常可以看到双击手机上的返回键两次,就会提示是否要退出应用,关于官方的相关文档在这里:https://ionicframework.com/docs/api/platform/Platform/,大家可以看一下platform.registerBackButtonAction的使用方法,在ionic中的使用方式如下:
1、在src/app/app.component.ts中输入一下代码,或者自行改造一下

import { Component, ViewChild } from '@angular/core';
import { Platform, ToastController, Nav } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { TabsPage } from '../pages/tabs/tabs';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = TabsPage;
  backButtonPressed: boolean = false;  //用于判断返回键是否触发
  @ViewChild(Nav) nav: Nav;
  constructor(public platform: Platform, public toastCtrl: ToastController) {
    this.initializeApp();
  }
  initializeApp() {
    this.platform.ready().then(() => {
      StatusBar.styleDefault();
      Splashscreen.hide();
      //注册返回按键事件
      this.platform.registerBackButtonAction((): any => {
        let activeVC = this.nav.getActive();
        let page = activeVC.instance;
        //当前页面非tab栏
        if (!(page instanceof TabsPage)) {
          if (!this.nav.canGoBack()) {
            return this.showExit();
          }
          return this.nav.pop();
        }
        let tabs = page.tabs;
        let activeNav = tabs.getSelected();
        if (!activeNav.canGoBack()) {
          //当前页面为tab栏,退出APP
          return this.showExit();
        }
        //当前页面为tab栏的子页面,正常返回
        return activeNav.pop();
      }, 101);
    });
  }
  //双击退出提示框,这里使用Ionic2的ToastController
  showExit() {
    if (this.backButtonPressed) this.platform.exitApp();  //当触发标志为true时,即2秒内双击返回按键则退出APP
    else {
      let toast = this.toastCtrl.create({
        message: '再按一次退出应用',
        duration: 2000,
        position: 'bottom'
      });
      toast.present();
      this.backButtonPressed = true;
      //2秒内没有再次点击返回则将触发标志标记为false
      setTimeout(() => {
        this.backButtonPressed = false;
      }, 2000)
    }
  }
}

继续阅读ionic2、3双击硬件back按键退出应用