" ionic"标签下的所有文章

解决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到你的手机,访问即可正常!

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

2017/07/03ionic 标签:0

我在之前的文章ionic中使用热更新插件cordova-hot-code-push说过了在app中实现内壳热更新的方案与方法。但是没有说过外壳的热更新,因为外壳更新我们无法通过向内壳一样的热更新去实现,我们仅能通过“min_native_interface”里的版本号去判断服务器上的版本号是否大于本地app的版本号,如果大于则引导用户跳转到app store进行下载新版app。
也就是说,我们无法再通过服务器直接更新app的外壳,外壳的更新必须要用户手动进行升级。cordova-hot-code-push的目的就是引导用户到app store下载最新版的app程序。
1、重新设置你的cordova-hcp.json模板(这里仅多增加了一个参数而已) 阅读更多

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

2017/06/30ionic 标签:2

网上有很多关于这方面的资料和说明,但是我并没有找到一个真正能够搭建成功的案例。因此为了让大家别再走弯路,在此我研究了一个上午搭建成功,以此来提高大家的工作效率。
cordova-hot-code-push是一款专门为混合cordova应用开发的一个热更新插件,那么什么是热更新?热更新顾名思义就是,在混合app代码(html、js、css)发生改变的时候,我们不需要重新对app打包再次进行发布,而仅需要通知cordova-hot-code-push插件,代码已经发生了改变,然后cordova-hot-code-push插件就会根据我们指定的代码服务器进行更新相关的代码。这样的好处在于,客户再也不用再到相关的app store去下载新版本的app了,只要客户联网打开了app,app就会自动更新相关代码。这仅仅是用于代码更新上。如果我们所改变的不是代码,而是改变了webview或者说升级了ionic2到了ionic3,那么cordova-hot-code-push还会自动更新吗?毫无疑问cordova-hot-code-push已经无法再次进行自动更新了,但是它可以向客户端推送新的app,并强迫用户下载升级!好了,下面我就用ionic2的项目来说说怎么搭建cordova-hot-code-push和使用。
本次搭建在OS系统中,服务端使用xampp本地搭建而成,当然windows用户也不用紧张,因为操作步骤都是一样的,在windows上你可以使用android模拟器进行测试。

1、首先建立一个ionic项目

当然你得确保你已经安装了nodejs
安装ionic和cordova

npm install -g cordova ionic

我根据官方教程,创建一个tabs项目,输入如下命令

ionic start tab tabs
cd tab
npm install
ionic serve

这样就建立好了ionic项目了。 阅读更多

ionic2中引入自定义js文件或者引入第三方js文件

2017/06/29ionic 标签:0

最近在ionic2开发中,遇到了一些问题,主要的问题是,由于angular的使用,使得ionic2中要增加组件则必须进行文件夹以及ts、html的增加,但是有些常量则是永远固定不变的,这些常量在很多页面能使用到,因此萌生了一种想法就是将所有常量制作成config文件或者一个json文件,然后在进行调用。不过制作成json的想法破灭了,因为在使用过程中,发现json必须通过http请求来获取相关数据,而异步请求获得的数据并非全局变量,在http外部也无法进行调用。
因此就想到使用ionic中提供的一个超级不错的定义全局变量的方法declare,在ionic中直接使用declare是可以定义全局变量的,下面我们就来尝试下declare的强大功能吧! 阅读更多

12

share

AD