ionic3-handbook
ionic3-handbook copied to clipboard
JerryMissTom
手摸手带你入门ionic3
7、生命周期
这一节我们来讲讲界面的生命周期，在此之前需要让大家熟悉下堆栈式导航的相关内容。需要提及的两个概念是，当一个页面对我们是可见的，那它就是active，假如不可见，那就是inactive。堆栈式导航的意思很简单，一幅图可以说明。假设一个场景，从A界面跳转到B界面，然后B界面返回至A界面（注意是返回，不是跳转）界面的堆栈图如下：  从A界面跳转到B界面，A界面并没有被销毁，而是被压入堆栈，变得inactive，B界面进入堆栈在最上面，变成active。假如返回至A界面，此时B界面被销毁，而不是inactive，A界面在堆栈最上面，重新变成active。 B界面从被创建，进入堆栈，变成active，然后返回至上一界面，被销毁，这个过程中ionic提供了函数对其进行了监控，也就是生命周期函数。还是先写代码，通过现象来解释： ``` home.ts ... constructor(public navCtrl : NavController) { console.log("HomePage constructor"); } ... ionViewDidLoad() { console.log('HomePage ionViewDidLoad'); } ionViewWillEnter() { console.log('HomePage ionViewWillEnter'); } ionViewDidEnter() { console.log('HomePage ionViewDidEnter');...
10、网络请求
大多数App不是简单的只使用本地数据，通常还会与服务器进行交互，这个时候就要用到网络请求的功能了。ionic的网络请求其实就是用的是Angular的。下面就结合豆瓣API的例子，对这个功能讲解下，然后根据实际项目的规范对其进行封装。 在根目录下，使用`ionic generate page net`创建一个新界面。然后在主页添加按钮，跳转到此界面。相关代码如下： ``` home.html ... 跳转到网络请求界面 ``` ``` horm.ts ... toNetPage(){ this.navCtrl.push('NetPage'); } ``` 网络请求的功能在单独的模块中，我们需要先在AppModule中导入，代码如下： ``` app.modules.ts import { HttpClientModule } from '@angular/common/http'; imports: [ HttpClientModule, ......
6、界面跳转
我们的APP肯定不是只有一个界面，这就需要了解ionic的内部导航的用法了。在ionic介绍这一章节提到，ionic实现了适合移动端开发的堆栈式导航系统，通过简单的`push`和`pop`实现界面的跳转和传值。ionic中界面分两种，懒加载界面和非懒加载的，所以这篇我们分两个部分来讲解，最后会介绍下懒加载界面和非懒加载界面的区别。 还是使用之前的项目，根目录下通过`ionic serve`运行我们的项目 ## 懒加载界面 根目录下，通过`ionic generate page lazy-load`(关于此命令的更多解释见文章最后)创建一个懒加载界面，会在`src/pages`目录下新建一个文件夹，里面包含四个文件。如下： ``` ── pages │ ... │ └── lazy-load │ ├── lazy-load.html │ ├── lazy-load.module.ts │ ├── lazy-load.scss │ └── lazy-load.ts ```...
移动开发已经成为一股潮流，web开发者假如也想在此浪潮中冲浪的话，我推荐 [ionic](https://ionicframework.com/) 这个跨平台的移动应用开发框架。它的口号是 `Build amazing apps in one codebase, for any platform, with the web`, 可以做到 `write once, run anywhere`。 `ionic1` 基于 `angularjs`，已经成为历史。前不久发布了` ionic4`，做了很大的改动，最重要的一点就是使用了[Stencil](https://stenciljs.com/)这个可以将自定义组件转为`web Components `的编译器，鉴于这个版本暂时还是`beta`版本，不建议使用。 本系列的文章全部基于`ionic3`，底层的Angular使用5.x版本，以后都简称`ionic`，`ionic3`之前基于`Angular 4.x`版本，现在已经全面切换到`Angular5.x`了，大家开发的过程中注意甄别，因为 5.x和4.x之间还是有很多改动的。 `ionic`...
这一节我们来探索如何设置APP的整体风格。我们都知道`Android`和`ios`默认的组件是截然不同的两种风格，比如说`TimePicker`，`Modal`等等，假如产品经理要求在两个平台上的风格保持一致，那该怎么办呢？`ionic`提供了这样的选项，秘密就在`app.module.ts`这个文件中。 举个例子： ``` app.module.ts ... IonicModule.forRoot(MyApp, { backButtonIcon:'ios-arrow-back', backButtonText: 'back', tabsHideOnSubPages: true, mode: 'ios' }) ... ``` 在上面的代码中，我们设置我们的App风格是`ios`风格，返回键的文字是`back`，返回的箭头风格是`ios`的。假如我们项目使用的是Tabs这个模板，一定要加上`tabsHideOnSubPages: true`这个设置，他的意思是从含有Tab的界面跳转到其他界面，tab会自动隐藏。 通过`ionic serve`命令运行程序，首页点击进入`NormalLoadPage`，效果如下： 我们现在换成Android风格，修改相应地方的代码如下： ``` app.module.ts ... IonicModule.forRoot(MyApp, { backButtonIcon:'md-arrow-back', backButtonText: '返回',...
其实这篇是写给没有 `Angular` 开发经验的人写，`Angular` 涉及的东西很多，不是一篇两篇就可以说清楚的，假如想深入 `ionic` 开发，一定要会 `Angular`，有国人翻译的[中文文档](https://www.angular.cn/guide/quickstart)。需要注意的是，`Angular` 已经更新到 `5.x` 版本，而 `ionic v3.x` 一开始还是基于 `Angular 4.x` 的，现在已经切换到5.0了，看关于`ionic` 相关文档或者博客的时候需要注意一下。 废话不多说，先来看看需要我们写代码的地方。`page/home`下就是我们的主页相关的代码，也是我们整个APP的入口页。以后创建新的页面，都要写在page这个目录下，这个是项目目录划分的规范。 ## 数据绑定 现在先将 `home.html` 和 `home.ts` 中的代码替换成下面的，接着我会解释。 ``` home.html 首页 {{2+3}} {{title}}...
当项目大了之后，我们肯定会遇到这样的需求，在某一界面发生了特定的事件，比如说修改了某个数据，执行了某个操作，希望其他界面可以接收到我们这个事件，说白了就是我们常见的发布者和订阅者模式。ionic也对其进行了封装，提供了Events这个好用的模块。 我们来模拟发布和订阅的场景，在懒加载界面中添加一个按钮，当点击此按钮，会发送一个名为`changeTitle`的事件，同时传递一个`ionic`字符串出去，在主页中，我们订阅此事件，当接收到此事件信息时，改变此界面中`title`变量，观察界面的变化。 下面我们用代码来实现此需求，首先，在lazyload.html界面中添加点击按钮，如下： ``` lazyload.html ... 发送事件 ``` 然后在lazyload.ts中添加对应的方法，如下： ``` lazyload.ts import { IonicPage, NavController, NavParams, Events } from 'ionic-angular'; ... export class LazyLoadPage { ... constructor(public navCtrl: NavController, public...
上一篇讲了数据绑定和事件绑定，这一篇该讲如何美化下我们的界面了，打算分为`class绑定`，`style绑定`和`全局样式`三个部分来讲。此篇所有的代码在上一篇的代码基础上添加。开始之前用编辑器打开`awsomeProject`，通过`ionic serve`命令运行项目 ## class绑定 ionic 样式使用的是scss，它是成熟稳定的CSS拓展语言，具体的用法大家可以自己去学习下。这里就不讨论了。home.html对应的样式文件当然是在home.scss中啦。修改home.scss代码如下： ``` home.scss page-home { .alert{ color:red } } ``` 需要注意的是包裹在`page.home`中的样式只可以在`home.html`中起作用，`ionic`自动将二者绑定，`page-home`对应的就是`home.ts`中的`selector`。 然后在home.html中修改代码如下（未提及代码不变，以...表示）: ``` home.html ... {{2+3}} ... 看得到我 ... ``` 第一个是常见的用法，第二个就是Angular的语法了，通过 `[class.class类名字]="模板表达式"` 这样的用法，动态的添加和删除一个class类名，当模板表达式计算结果为true时，会添加。 **拓展**：假如我在同一标签上有多个类名需要动态的计算后添加或者删除，类似`{{2+3}}`，太多的话，写起来很不好看。这个时候 [ngClass](https://v2.angular.cn/docs/ts/latest/guide/template-syntax.html#!#ngClass)...
**Note:** 编辑器使用`VS Code`，可以通过`查看->集成终端`打开编辑器内的终端环境，执行 `ionic` 命令。 ### 新建项目 打开mac OS的终端，输入： ``` ionic start awesomeProject ``` `awesomeProject` 表示项目的名称，可自定义，接着会出现以下模板选项，可以通过上下箭头选择新建的项目。 ``` ? What starter would you like to use: (Use arrow keys) ❯ tabs...
### 前言 学习一门新的计算机技能最基本的就是开发环境配置，顺利的情况下很简单，不顺利的时候能折腾人半天，令人头疼。从入门到放弃说的可能就是配置开发环境出错这个阶段吧。 `ionic` 开发必不可少 `Node`、`Cordova` 和 `ionic` 这三者。`Android` 和 `Xcode` 两者的环境配置在一开始是**可选的**，配置过程中假如出现错误解决不了，可以暂时放弃，等到熟悉了ionic开发流程，最后要打包成 `Apk` 或者 `ipa` 文件的时候再来解决也不迟。 **Note:** 本安装教程基于 `Mac` 开发环境，`Windows` 环境请自行查找。某些工具的安装方式有很多，只介绍个人认为最简单的，初学者可以很容易上手的。假如安装出错，`Google`错误信息，答案就在第一页。废话较多，比较啰嗦，见谅。 ### Node安装 现代前端开发少不了 `Node` 及 `Npm`，假如你对其不了解，请自行搜索相关资料。`ionic` 入门基本上只要会使用`npm install`这个命令就可以了。 进入[Nodejs官网](https://nodejs.org/zh-cn/)，会自动识别你的开发环境，点击下载LTS版的安装包并安装，`node`安装时会自动安装包管理器`npm`。...