" 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传递参数

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/ 阅读更多

解决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打安卓包报错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中也许不需要这样写命令哦!

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. 阅读更多

在electron中使用ionic2

2017/08/05ionic 标签:0

electron是atom官方的一个跨平台的桌面应用开发框架,具官方介绍说是“ Build cross platform desktop apps with JavaScript, HTML, and CSS”,也就是说可以直接使用,你最喜欢的html+css+js来开发跨平台的桌面应用程序。如果你之前使用过angular以及react之类的JS框架,那么你就可以使用这些框架来制作一个跨平台的桌面应用。下面我们主要是说一下在ionic2中,我们要如何使用electron与ionic2进行通信!
由于electron使用的是chrome的V8引擎,也就是可以理解为一个浏览器,因此我们只需要编写想要的前端代码就可以直接运行在electron中了。建议大家边看electron的doc边做开发。因为我也是刚刚开始接触electron,只不过我只是需要从ionic中传递数据到electron中,让其与其他设备进行交互而已,因此我做的只是一个简单的ionic传递数据到electron,其他的我并不深入。因此大家喜欢研究的朋友可以深入研究下electron。
1、安装electron
安装过程可能并不复杂,但是一定要记住要使用淘宝的npm镜像进行安装,因为我翻墙了也无法安装成功,因此建议大家使用cnpm,这个特别快!
在nodejs中键入如下命令即可进行安装
npm install electron -g 阅读更多

深入:ionic中使用热更新插件cordova-hot-code-push

2017/07/11ionic 标签:0

之前两篇文章中,《续:ionic中使用热更新插件cordova-hot-code-push》以及《ionic中使用热更新插件cordova-hot-code-push》我都分别叙述了app内容更新以及外壳更新的相关配置与实现,今天我们则深入使用内外更新的功能,并且完成一个启动app后,如果检测有更新,则执行loading,并显示“正在下载更新”、“正在更新中”等字样,如果没有检测到更新,则不显示loading。

1、准备工作

由于ionic中的LoadingController仅能显示一次数据,LoadingController中无法使用变量进行随时更新显示,因此我们得自己编写一个loading样式。我们需要的功能是当用户打开app后就提示有更新,如果是内容更新,那么则自动下载,并提示一个loading,loading中显示“正在下载更新文件”,“下载完成后,准备更新”等等,就有点像12306打开app时的升级提醒吧!

2、相关代码

为了你能快速的入手,请先查看之前的两篇文章后再来进行相应的操作。否则可能会尝试无效!废话不多说,下面直接看代码: 阅读更多

ionic2使用ThemeableBrowser插件实现app内打开外部链接

2017/07/08ionic 标签:0

ThemeableBrowser插件主要是用于app内打开新浏览器或者说嵌入一个浏览器到app内,这个插件很好用,不过有个缺点,就是在android下无法控制状态栏的颜色,ios下可以控制,其他的都非常不错,很适合用于在app内打开外部链接,这个插件延续了InAppBrowser插件
为什么要使用这个插件,主要原因是ionic2官方也很好的支持了这款插件。
1、在ionic中使用
先安装以下ionic插件

ionic cordova plugin add cordova-plugin-themeablebrowser
npm install --save @ionic-native/themeable-browser

2、首先在app.module.ts引入此插件 阅读更多

ionic2本地真机调试出现net::ERR_CACHE_MISS

2017/07/05ionic 标签:0

在ionic2的app开发中,在本地电脑上测试一点问题都没有,而且获取数据没有任何问题,但是使用在真机上却出现了net::ERR_CACHE_MISS,这个错误是我通过chrome://inspect/进行调试的时候看到的,如果你不知道什么是chrome://inspect/,可以阅读我的另一篇文章《app开发之在chrome中进行真机调试》。出现这个问题就是无法连接网络,但是我的服务器就是本地搭建的,而且手机与电脑在同一个局域网,不可能发生这样的事情啊,刚开始以为是防火墙出现了问题,关闭了防火墙后,问题依旧,网上百度了半天没有找到结果,这里请允许我鄙视下百度,我在google一搜就找到相关的问题解决办法了。
首先,出现这个错误主要的原因是因为我们的app没有网络权限,因此我们得给app增加网络权限。
其次,增加权限涉及到我们的platform,下面就跟我一起增加相关代码来实现局域网app访问本地服务器。
1、打开项目根目录platform目录下的AndroidManifest.xml
2、在文件之间增加以下代码来开启app网络权限

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

在增加前,请先看下是否已经包含了以上某段代码,如果已经存在的就无需在进行增加。
3、重新build你的app到你的手机,访问即可正常!

share

AD