分类目录归档:ionic

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

在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

我在之前的文章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

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

网上有很多关于这方面的资料和说明,但是我并没有找到一个真正能够搭建成功的案例。因此为了让大家别再走弯路,在此我研究了一个上午搭建成功,以此来提高大家的工作效率。
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项目了。 继续阅读ionic中使用热更新插件cordova-hot-code-push

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

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

利用ionic2制作手电筒App

ionic是一个开源而且比较不错的混合app开发框架,集html5+css+angularJS+cordova而开发的一个纯手机端app框架。使用ionic可以轻而易举的制作出非常漂亮的app。下面我就利用ionic2制作一个手电筒软件,控制手机的闪光灯。
1、使用ionic官方的native文档中提到的flashlight插件(手电筒)
其实ionic的插件也就可以说是cordova的插件,因为cordova插件是JS写的,而ionic中则是使用微软的typescript,因此ionic官方已经将相应的cordova插件转换为typescript的了。
根据官方文档的介绍,很简单我们就可以实现手电筒的功能了,首先我们得安装cordova的flashlight插件,其次还要安装ionic的flashlight插件,使用如下命令: 继续阅读利用ionic2制作手电筒App

ionic2签名打包

利用ionic2制作好的app,我们得通过打包后才能发布出去,不然的话app是无法通过验证的。在打包过程中,我们就得需要java的keytool进行生成证书,然后通过生成的证书,我们再将其导入到我们得app里面来实现一个签名。
1、进入ionic项目根目录(比如我的是h:/Ionic/flashlight)
cd h:/Ionic/flashlight
使用keytool生成证书
keytool -genkey -v -keystore key.keystore -alias you_name -keyalg RSA -keysize 2048 -validity 10000
首先会让你输入密码,如果你使用过linux或者mac的话,你就会知道,这里输入密码是不可见的(菜鸟们不要以为这是bug)。
其中key.keystore是证书的名称和后缀名,key则可以修改成你需要的名称,而后缀名不能随意更改,否则会出错。
you_name则为证书拥有者的名称,你可以自己起一个。 继续阅读ionic2签名打包

ionic2 中图片缓存实列

混合应用程序现在面临的挑战之一是处理离线模式。是的,这意味着更多的工作,但这将给用户更好的体验,应用程序将工作更快。
建立我们的应用程序
首先安装和设置我们运行这些命令的环境:
安装ionic cli:
npm install ionic -g
创建一个新项目
ionic start OfflineApp
我们将使用ImgCache.js来缓存图像。这插件会做所有的辛勤工作。ImgCache.js是为Cordova开发的图像JS库,利用了HTML5的API。
要在我们的项目中安装,只需运行:
npm install imgcache.js –save
如你所知,Ionic使用Angular 2和typescript,所以我们应该为imgCache.js安装一个类型定义,但不幸的是目前并没有这方面相关的ts类(有一天我可能会写它或者可能是你会写,为了避免与typcript编译器的兼容,你需要在declarations.d.ts中添加下面代码。
declare module ‘imgcache.js’;
我们还需要安装这些插件:
– cordova-plugin-file
– cordova-plugin-file-transfer
继续阅读ionic2 中图片缓存实列

Ionic 2 中使用 Font Awesome 字体

在我以前的Ionic(1.3)应用程序中,我使用了“Font Awesome”作为一个图标集,但在Ionic 2中有很多变化。我使用的gulp脚本已经消失,构建过程在npm包中定义。
您可以在https://github.com/driftyco/ionic-appscripts上阅读更多信息

以下是在Ionic 2中如何做:

我们开始创建一个新的应用程序或cd到你现有的应用程序文件夹。

$ ionic start ionic2FontAwesome blank --v2
$ cd ionic2FontAwesome

我们来添加Font Awesome并保存到你的package.json。

$ npm install font-awesome --save

在项目根目录下创建配置文件夹。

$ mkdir config

找到此文件夹中的copy.config.js文件:/node_modules/@ionic/app-scripts/config/copy.config.js
,并将其复制到刚刚创建的文件夹。 继续阅读Ionic 2 中使用 Font Awesome 字体

[转]理解ionic2 + angular2开发方案

1. 安装使用

ionic2的安装运行基本和前版本的ionic基本一致,非常简单。

npm install -g ionic    # 安装ionic工具集
ionic start projectName --v2    # --v2表示使用ionic2 + angular2的组合方式创建项目,否则使用ionic + angular创建项目,此时ionic会下载所需要的相关包
cd projectName  # 进入创建的项目名称目录
ionic serve # 启用浏览器调试应用页面,这时通过浏览器打开默认端口页面http://localhost:8100/#/tab/dash就可以打开应用页面了

当然这里需要保证你的开发环境SDK已经安装成功了,例如Android打包平台的运行环境,可以参考Ionic Hybrid跨终端应用程序开发方案研究

  如果需要在移动设备上打包运行,则需要添加相对应的插件模块。

npm install -g cordova  # 如果没有真实设备,可以通过这个命令来安装模拟环境
ionic platform add ios # 添加ios运行支持
ionic emulate ios   # 模拟运行ios环境
ionic platform add android  # 添加Android运行环境支持
ionic run android   # 使用Android运行应用

  正常情况下,这里ionic会将打包的文件安装到设备或调试模拟器上运行打开应用。
继续阅读[转]理解ionic2 + angular2开发方案

ionic2中页面加载loading效果的实现

ionic是一个基于Angular、Cordova的一个开源框架,它提供了相关的UI库,ionic2中对ionic1进行了更多的优化,让ionic的运行速度,执行效率提高了不少。选择ionic开发web app是个不错的想法。下面就来说下ionic2中的loading效果的实现吧!本文使用TypeScript进行对ionic2的开发,如果不了解微软的TypeScript的,请自己google一下哦!

一、引入LoadingController

我们要使用LoadingController,就必须先引入它,直接使用下面的代码即可实现
import { LoadingController } from ‘ionic-angular’;
引入后,我们就需要在constructor中声明了,如下:
constructor(public loadingCtrl: LoadingController){
//……..在这里执行loading效果或者设置loading的图标、css等
}
看上去是很简单哦,要使用这个loading,那么我们得先创建它。
1、创建create()
直接可以使用create方法,create方法中又包括了以下几个属性:
spinner(设置loading的SVG图片)
content(设置loading的提示文字或内容)
loadingSpinner(这个我暂时没有理解到底是做什么的) 继续阅读ionic2中页面加载loading效果的实现