"ionic"栏目下的所有文章

ionic navCtrl.pop如何传递参数给上一个页面

2018/11/16ionic 标签:0

返回页面的相关代码如下:

this.navCtrl.getPrevious().data.myNewKey = someData;
this.navCtrl.pop();

上一页的相关代码如下:

ionViewWillEnter() {
   this.myNewData = this.navParams.get('myNewKey')|| null;
}

以上即可实现navCtrl.pop传递参数

ionic3搭建开发/测试环境

2018/10/25ionic 标签:0

用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;
};

阅读更多

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

2018/10/24ionic 标签:0

在手机设备上,经常可以看到双击手机上的返回键两次,就会提示是否要退出应用,关于官方的相关文档在这里: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+使用Slides打造漂亮的导航条

2018/07/04ionic 标签:0

由于之前遇到一个项目使用的ionic中的tabs来做导航条,实际在使用中,总是觉得怪怪的,并且不只是影响到使用效果,更是发生了很多令我费解的问题,由于导航级别太多、分类太复杂,从而导致了tabs的展示令人头痛。不过由于项目已经固化了,没法再进行相应修改和调整,目前也没有重构的打算。也是由于这个一个tabs,当时让我想到了使用Slides组件来打造一个导航条。大家可以先看一下效果:

Slides打造手机导航条

Slides打造手机导航条


根据Slides的滑动特性,其实还是可以做出很漂亮的导航效果来,下面直接上代码,如果对slides不是很了解的,可以查看相关官方文档https://ionicframework.com/docs/api/components/slides/Slides/ 阅读更多

关于混合APP横屏、竖屏、翻转的解决方案

我们都知道,cordova或者phonegap都提供了一系列很牛的插件,为我们做开发省了不小力气,在app开发中,有一些app适合竖屏展示,某些app又适合横屏展示,因此我们得去设置它相关的config.xml

一、安卓上的横屏与竖屏

首先我们先来看一下android上的某些原生Activity属性
安卓 Activity 在设备上的显示方向。如果 Activity 是在多窗口模式下运行,系统会忽略该属性。Activity有以下几种属性值 阅读更多

解决ionic3错误:No provider for NavController

有时候感觉ionic会发疯,比如今天我就遇到一个很奇葩的error,我一直在其他页面使用NavController或者Nav都未遇到任何问题,偏偏就在我目前新建的这个页面上出现了这样的一个error,No provider for NavController。
在网上寻找了很久的解决方法,尝试过直接使用app.getActiveNav没有成功,尝试过网上说的@ViewChild('Nav') nav:NavController;也没有成功。后来在ionic论坛上找了相关解决方法,地址是:https://forum.ionicframework.com/t/why-cant-i-import-navcontroller-and-viewcontroller-into-service-or-app/40999/50
可以看到相关代码是这样的:

import { App, NavController } from 'ionic-angular';
constructor(
    public app: App,
    public navCtrl: NavController,
    ) {}
//此处才是最重要的代码
get navController(): NavController {
    return this.app.getRootNav();
}
testNav() {
    //这样使用get的navController
    this.navController.setRoot(Login);
 }

cordova-ios4.5.x与xcode打包中遇到Error code 65 for command的解决办法

2017/12/21ionic 标签:1

iphone X的到来又给各种打包添乱了!iOS11的到来,也导致了各种升级造成的各种问题。由于之前公司项目一直在使用cordova-4.4.0,最近为了程序能够在iphone X上能够全屏,因此使用了cordova-ios4.5.x版本。假如使用的是4.4.0版本,那么在iphone X中就会有各种适配问题。因此必须得升级为4.5.x的相关版本。但是升级后导致了打包过程中出现Error code 65 for command。这样的错误按理说是不应该出现的,但是确实就发生了,最终我再查看我的一些插件过程当中发现一个名为cordova-plugin-console的插件在cordova-ios4.5.x版本中已经包含了这个插件,由此就怀疑应该是由于插件重复而导致的问题。由此我就删除了cordova-plugin-console插件,这个过程偶尔成功过,如果我再次rm ios后再次add ios后,这个问题依然又出现了!
由此,根据各种平时处理iOS问题的经验,我得到了以下相关的解决办法!
1、删除cordova-plugin-console插件

cordova plugin rm cordova-plugin-console

2、更新pod到最新版本

cd platforms/ios
pod update

如此以来,就可以开开心心的打包iOS包了!

Cordova打安卓包报错ionic Error: spawn EACCES

最近升级了cordova到7.1.0后,发现执行打包命令ionic build android的时候就出现了spawn EACCES的错误,搞了半天,到google搜索了半天,找到的解决方法都是直接使用ionic platform rm android;ionic platform add android的方法去解决,但是我试过很多次后,竟然没有任何效果,我直接怀疑起了我自己的人生观。看来google好像也没有找到我需要的答案啊,看来老外的解决办法也是超级LOW啊!都是一个方法,总之我从各类国外的网站寻找答案,最终我被打败了,最终还是使用百度搜索到了答案,看来百度并不坏啊!还是咋们中文强悍。
其实出现这个问题主要是由于Android Stdudio中的gradle权限不够导致的android无法打包。下面我们就来设置一下相关权限吧!
此方法仅限于Mac以及linux平台,Windows平台的朋友请自寻解决方法。
在Android Stdudio安装之后,有这么一个目录/Applications/Android\ Studio.app/Contents/gradle/gradle-4.1/bin/gradle
正是由于我们没有权限操作这个目录,由此才需要将此目录设置一下权限,可以设置为777,也可以设置为755,随便你这么设置。使用下面的命令命令设置

sudo chmod 755 /Applications/Android\ Studio.app/Contents/gradle/gradle-4.1/bin/gradle

上面代码中Android\ Studio.app,一定要有“\”,否则会报错,这是Mac下对目录的处理,linux中也许不需要这样写命令哦!

解决iPhone X上无法全屏的问题

2017/11/14移动端 标签:5

iPhone X的齐刘海确实挺有型的,但是个人并不喜好。最近测试人员对app进行测试的时候发现了iPhone X上的显示效果超级恶心,无法全屏等各种问题,由此不得不解决这个问题。据了解这个问题是iPhone X自带的问题,不过在apple官方并没有找到相关解决办法,网上找了一番,找到相关的解决办法了。
本文主要参考以下两篇文章内容,两篇文章结合起来才能得到相关的解决办法
https://forum.ionicframework.com/t/iphone-x-and-ionic/105197/14
http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

1、在meta中增加viewport-fit=cover属性

阅读更多

ionic2中使用Firebase与Angularfire

2017/09/02ionic 标签:0

为了把一个老项目中的Firebase以及Angularfire进行升级,并且升级ionic项目,由此入了很多很多的坑,首先使用老项目不论怎么调试怎么重新运行npm install,ionic serve启动项目总是失败而告终,最终无法仍受了,重新直接使用新版的ionic2版本与新版的Firebase与Angularfire2重新重构一次项目。由此遇到了很多升级过程中的坑。
1、升级了Firebase后,出现了找不到AngularFire和FirebaseListObservable的解决办法
由于更新到了最新版的Firebase,而firebase库已经进行了一些调整,导致了找不到AngularFire和FirebaseListObservable,在新版的firebase库中,已经将这两个方法重新封装到了database里面了,并且摒弃了AngularFire,重新使用AngularFireDatabase,因此我们需要这样来调用:

import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
constructor(private af: AngularFireDatabase){this.af.list()}

2、打包之后遇到了这样的问题:Client doesn't have permission to access the desired data. 阅读更多

share

AD