![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
ionic2
张大伟的博客
就这样拉,码农而已
展开
-
Ionic2安装
开发者只需通过Ionic 命令行组件(CLI)就可以轻松创建一个初级Ionic应用。之后再通过使用Cordova去模拟出一个原生应用。所以你得先安装一些组建以便后面的开发。 Ionic CLI 和 Cordova啥也别说,创建应用前先把最新版的CLI和Cordova装好了再说。当然前提是你的电脑中已经安装了最新版的Node.js,起码得是6以上版本。$ npm install -g ionic翻译 2017-03-29 12:09:01 · 404 阅读 · 0 评论 -
NavController模块之Nav Guards
NavController有ionViewCanEnter和ionViewCanLeave两个方法,类似于Angular2中的route guards机制。比如你想阻止用户离开一个视图。export class MyClass{ constructor( public navCtrl: NavController ){} pushPage(){ this.navCtrl.pus翻译 2017-03-31 15:51:16 · 966 阅读 · 0 评论 -
Ionic2 NavController模块的生命周期事件
只要出现页面导航,生命周期事件(Lifecycle events)就会被触发。这些事件可以被定义在任何component的 class中。 下面就是一个实例:import { Component } from '@angular/core';@Component({ template: 'Hello World'})class HelloWorld { ionViewDidLoad()翻译 2017-03-31 15:21:41 · 5221 阅读 · 0 评论 -
Ionic2视图的创建与删除
视图创建当开发者往navigation stack里添加一个元素的时候,一个视图就会被创建出来。这个方法就是push(),NavController这个模块会通过@Component创建一个class,并作为模块的第一个参数。NavCotroller模块会在之后编译这个component.并把这个component添加到app,并塞入视图中。新增一个新页面,我们使用NavCotroller的push翻译 2017-03-31 15:08:23 · 1377 阅读 · 0 评论 -
Ionic2中的内置导航组件
NavPush定义:添加一个新页面到当前nav stack中。 上图就是一个手机的页面的删减页面,我们在按钮标签中绑定 NavPush属性进行翻页操作。<button ion-button [navPush]="pushPage"></button>//单纯地跳转页面<button ion-button [navPush]="pushPage" [navParams]="params">Go</翻译 2017-03-31 14:29:02 · 4436 阅读 · 0 评论 -
Ionic2的NavController
NavController是导航控制器组件(如Nav/Tab)的基础类class,在你的app中你使用导航控制器跳转到某个页面。在基础层面上看,一个导航控制器就是一个页面数组,其代表着一个特殊历史记录,这个数组通过在历史记录中进行增删实现页面跳转。你可以认为当前页面是数组中最后一个元素,或者说是栈的的顶部。在导航栈的顶部塞入一个新页面就会触发一个新页面的动画加载。当然如果删除当前页面就在这个栈中暴露原创 2017-03-30 19:50:59 · 4877 阅读 · 1 评论 -
Ionic2 src文件夹分析
在Ionic2中src文件夹是我们主要的工作区域,我们看下这个文件夹的结构:appassetspagestheme一共四个文件夹。其中主要的两个文件夹就是app和pagesapp是ionic 应用的根目录,pages则是子组建。 我们先看app下面的五个文件。 app.scss用于设置全局css样式,一般我们都不用,所以没啥好说的。 app.module.ts 我们称为根模块,除非你原创 2017-03-30 16:39:29 · 3879 阅读 · 1 评论 -
Ionic2 文件包说明
当我们创建一个Ionic2项目的时候就会有这样一个文件包,那么这些文件夹和文件的意思分别是什么?hooks cordova 的readMenode_modules nodeJS的各类依赖包resouces android 和IOS的配置文件src Ionic的主文件区域,我们的工作主要就在这个文件夹下进行www 这个项目的根目录包含index.html,main.js main.css这些原创 2017-03-30 14:41:22 · 653 阅读 · 0 评论 -
Ionic Native 浏览器的使用
在浏览器中使用原生插件Ionic Native拥有超过130个移动端原生SDK插件。这就可以让你在ios和android上创建一个拥有和原生app一样的应用能力。从历史角度来说,在浏览器中测试原生功能是非常困难的,这往往需要ionic开发者在真实设备或者模拟器上进行测试,而这又卡的要死。到了Ionic Native 3.0时代,就非常容易从传感器中测试数据,接入一个原生api(如:HealthKit翻译 2017-03-29 19:12:52 · 762 阅读 · 0 评论 -
Ionic Native 介绍
Ionic Native是一个为Cordova/PhoneGap打造的一款TypeScript打包器。它的作用在于可以在你ionic2移动端应用上添加任何你想要的原生app的功能。Ionic Native 包装的插件回调函数处于一个promise或者Observable里, 它会给所有的插件提供一个公共接口,并确保在Angular2中原生事件触发会被检测到。我们分析一下下面一段代码:import翻译 2017-03-29 18:47:06 · 1676 阅读 · 0 评论 -
Ionic2的CLI的命令行
在我们开发Ionic app的时候 CLI 是一个非常重要的工具。CLI包含了很多开发命令行,比如:start,build,server,run.当然也包含emulate,info。首先就是安装CLI, 注意CLI是一个基于nodeJS的工具,所以你得先有node和npm. 之后sudo npm install -g ionic创建一个项目:ionic start xxx --v2我们可以cd 到翻译 2017-03-29 17:48:24 · 5049 阅读 · 0 评论 -
Ionic2的数据存储
当在一个原生app词法环境下,一般优先使用SQLite,因为它是使用最广泛的稳定的文档型数据库之一,它也避免了一些诸如localstorage和IndexedDB的一些困境,比如系统在磁盘空间不够的时候会清除数据。如果你是在web中或者web app中运行的话,一般倾向于使用IndexedDB,WebSQL,以及localstorage.假如你使用的是SQLite,首先你得安装 cordova-sq翻译 2017-03-29 14:50:51 · 5240 阅读 · 0 评论 -
Ionic2 核心概念
如果你在Ionic或是其他hybrid移动设备开发方面还是一个小白。这篇文章将帮助你在核心哲学,概念和ionic工具方面提高认知。下面的信息会帮助你熟悉Ionic并熟悉它是如何工作的。这到底是啥玩意的框架?Ionic 框架是一个开源的SDK,开发者可以使用web技术开发移动端项目。Ionic的着力点主要体现在app的UI交互,外观和感觉。这就表示它没法代替PhoneGap的角色或者你所喜欢某个js框翻译 2017-03-29 13:55:33 · 283 阅读 · 0 评论 -
Ionic2 升级的概念
Ionic2是构建在Angular2之上。对于Angular2比较熟悉的朋友都知道,这完全是一个对原框架进行重写的一个全新框架。在Ionic2这里,Angular有的Ionic都有,但是开发者需要注意的是Ionic增添了一些新的语法,以及在架构上进行了一些变动。所以在学习Ionic之前,最好还是先去学习一下,Angular2方面的知识。我们先来对比一下,Ionic两个版本之间的区别:.config(翻译 2017-03-29 13:24:14 · 230 阅读 · 0 评论 -
Ionic2 在Android设备上的部署
部署在Android设备上比起IOS来说简单粗暴。你只要有Android的开发环境即可。 前期准备工作Android Studio更新完成Android SDK tools,平台和组建依赖。通过Android Studio的 SDK Manager确认都能用。 运行App首先确认你的Android 设备可以通过USB线进行调试,并进入开发者模式。然后在命令行中运行ionic run and翻译 2017-03-29 12:43:06 · 2030 阅读 · 0 评论 -
Ionic2 slides的使用
<ion-slides pager> <ion-slide style="background-color: green"> <h2>Slide 1</h2> </ion-slide> <ion-slide style="background-color: blue"> <h2>Slide 2</h2> </ion-slide> <ion-slide style="ba翻译 2017-03-31 17:10:07 · 6169 阅读 · 0 评论