来扯点ionic3[0] 吹完牛再入门也不迟

目录

1.序
2.ionic的念法
3.知识与环境储备
4.安装过程
5.项目目录结构分析
6.在浏览器运行
7.结语

序~

哇，不得不的说，这几年前端发展地太快了。这些曾经就是用来写写网页的技术，如今已经把触角伸到了各个开发领域中。回望昨天似乎还是靠刷新浏览器、用alert来调试代码的时代，如今已经有了强大的调试工具、丰富的模块管理机制、自动化的构建模式、可以与操作系统交互的API…总让人觉得快要跟不上时代，不过没关系，正因为前端迸发出的强大生命力，让javascript这个曾经的小玩具翻身成了世界上最流行的编程语言之一，也让我们比过去更有信心地在前端领域自由探索。

如今已经有了使用前端技术构建移动APP的技术。这些技术，不仅能让我们方便地做出与移动应用一样的视图，更可以实现与原生应用体验非常接近的体验。而且随着技术的进步，这样的体验会越来越接近。

ionic就是这样的一个框架，它能够让你使用前端技术来制作、调试、打包可在手机上运行的移动APP。令人欣喜的是，你可以用一套代码编译出iOS、Andorid和Windows Phone的版本，也可以直接以Web APP的形式发布。所以如果你已经有一定的前端技术储备，不妨来玩玩ionic，体验一下跨界开发的奇妙感觉。

单词教学时间

不管怎么说，使用ionic框架，总得知道ionic这个词是怎么念的，不然以后出去吹牛，念不出来或者念错了，是不是会有那么些尴尬。

ionic的logo

ionic在英语中是ion离子的形容词，框架的logo倒的确有那么点离子的味道。让我们上音标：

/aɪˈɑ:nɪk/
[aɪˈɒnɪk]

第一行是美式音标，大致念法是「爱啊~尼克」（嗯这个啊要稍稍拖一下），第二行是英式的念法，大致读「爱哦尼克」。具体采用哪个，那是我们开发者的自由，说白了就是用两种语气词来感叹我们对尼克的爱慕（尼克是谁？我不知道啊）。

知识与环境储备（懂的部分请直接略过）

ionic所需要的技能点，图片来自官网

1. HTML5+CSS3+Javascript

其实这仨没啥好说了，如果你不知道《沁园春·长沙》的作者是谁，还会有谁信你念过高中。不过这里是不是非得要学过HTML5，其实也不一定。因为开发中并没有太多地涉及到HTML5特定的API，而且在ionic中你不需要写head部分，所以也没有doctype之类的问题。主要你需要了解一些HTML5的语法特性，比如这类单标签最后不再使用自封闭的斜杠了、还有require, pattern, placeholder这些很有用的表单属性。这些对你的开发都会有所帮助。

2. ES6(ECMA2015)

Javascript的新一代标准，加入了非常多的新特性，其实多数人应该都接触了，不过可能现在很多本科还不会讲这个。所以如果你还不知道，那就去翻翻文档。学习ES6可能需要花一些时间，你可以先了解这些：

1. let和const命令: 未来你要习惯用它们代替var来声明变量
2. class: 不再用函数来声明类了，如果你写过java或C#之类的语言，这会让你非常爽。
3. 箭头函数: 官方文档里的示例基本都是用箭头函数，除了学习使用方法还要注意一下this的指向和传统函数是不同的。
4. Promise: 回调函数+事件驱动的升级版，可以说这是ES6里最重要的特性之一了，多玩两下你一定会爱上它。了解它的特性，把它变成你的武器。后面将会出现一个叫可观察对象的怪兽，打它你就容易多了。
5. for...of 循环: 跟以前的for...in循环是类似的，相信你很快就能知道他们的区别。

这里传送阮一峰老师的教程，聪明的你肯定很快就学会

ECMAScript 6 入门

3. Node.js与NPM

已经火到不想再讲了，不过不知道node是啥没关系，至少你装上就行了，蛤，没装？

Node.js中文网

npm是node里的包管理工具，在这里你需要用它来安装所需要的模块，传送上的介绍，主要了解 install命令，了解全局安装和本地安装的区别。

NPM 学习笔记整理（作者:ihoey）

4. Typescript

简称ts，巨硬出的语言，号称javascript的超集，在ionic中你需要用ts来编写脚本，其实就是在ES6的基础上加入了更多的语法。你可以不用非常的了解，但你得看一下它的基础类型和类型的声明方式，因为在开发阶段它是属于强类型的，所以如果没有正确地定义和使用类型，编译的时候就没法通过类型检查。

let num: number = 0; //定义数字型变量
let str: string = 'Hello World!'; //定义字符串
let bool: boolean = true; //定义布尔变量
let strarr1: string[] = ['a', 'b', 'c']; //定义字符串数组
let strarr2: Array =  ['a', 'b', 'c']; //定义字符串数组的另一组方式
let dog: Animal = new Animal(); //定义一个类的实例

使用类型声明，让代码的语义更清晰，也让每个变量作用更加的明确。一定程度上防止开发者乱来（哈哈），不过当你在遇到不能明确变量类型的时候，你可以使用一个万能的类型any，它会再编译时跳过类型检查；

let who_am_i:any; 

更多的内容请参考官方文档：

基础类型

5. Angular

ionic是基于Angular框架开发的，当前的ionic3便是基于Angular4.x，不过没接触过Angular2以上的版本，我觉得问题也不大。我刚接触ionic的时候还没有学过Angular，只是当时一些不理解的问题在后面学习Angular2的时候解开了。在我的文章里，也不会对Angular技能作要求，遇到相关的问题，我会尽力给解释相关的原理。如果到后面你熟练了ionic的开发，再去学Angular你也会觉得非常容易的。

Angular官网

开始安装：革命就分两步走

1.安装cordova和ionic

$ npm install -g ionic cordova

使用全局安装，这样后面你就可以在控制台使用ionic命令来执行相关的操作

2.新建项目

$ ionic start demo tabs

demo是项目的名称，tabs代表项目使用了tabs模板，ionic主要有三种模板，tabs, sidemenu和blank，tabs应该是使用最广泛的一种了。

三种模板的区别

初步了解项目结构

在项目安装完成后，我们打开demo项目目录，来看一下它大致的结构。

一个新项目的结构

所有的源代码都存放在了src目录，在src目录中，和我们打交道最多的，就是app和pages两个文件夹。

app文件夹

main.ts 入口文件

以前大家写网页的时候，都是用到一个js文件，就在网页中调用一个script标签。而现在的前端项目，都只调用一个入口文件，让入口文件帮我们去引入其它依赖的文件。这好比以前商店都开在街边，你要买什么东西直接走到店面去。而现在流行各种商业广场CBD，你先走进商场大门，再去找要去的店铺。一个好处就是，你预先不用知道这家店的具体位置，你只管走进大门吹空调就行了，这难道不爽吗。

app.module.ts 根模块文件

ionic是基于angular的，而angular是完全模块化的。根模块文件是一个无微不至的大管家，你把你要用什么（模块、组件、服务、管道、指令等）都告诉它，它会帮你去弄来，而你就只管做个安静的美男子就行了。

app.component.ts 根组件

angular里的组件，就是我们平时所说的视图，组件的产品就是我们所看见的界面了。根组件主要定义了app整体的视觉表现，比如根页面、状态栏、启动界面等等。

app.component.scss 全局样式文件

嗯，就是写全局css的地方，不过在ionic里你可以用sass来写，如果你不了解sass，我后续会在做一些介绍。

app.html 根组件的模板

没有存在感，略了。

pages文件夹

pages很简单啦，就是存放APP的所有页面，每个文件夹就是一个页面，里面定义了页面的业务逻辑、模板和样式，下一章我们就来讲讲页面的那些事儿。

开始第一次运行

记得先cd到项目目录

$ cd demo

在控制台执行serve命令

$ ionic serve

ionic就会在本地创建一个服务器，稍等片刻后，浏览器就会弹出应用的首页。

是不是感觉这个应用的体态有些……丰满，我们按F12进入开发者工具，然后点击移动设备工具，就可以模拟页面在移动设备上的效果。

上方还有几款预设的设备，你可以切换它们来观察不同分辨率，不同操作系统的效果。不过要记得每次切换后，把页面刷新一下。

此时，服务器会监事你项目中文件的变化，当你对其中的文件进行了修改时，页面会自动刷新呈现新的状态，当你完成调试工作时，在控制台使用ctrl+c来关闭本地服务器。在开发初期，浏览器能帮我们完成大部分的调试工作，也就是你无需准备实体移动设备或者虚拟机，非常地方便。

结语

前端框架已经成为了一种热潮，现在的培训机构也在积极地推出各种框架的课程。但是使用框架并不就代表了掌握前端技术，其实你也可以看出来，要用好一个框架，那些基础知识起着举足轻重的作用。如果你在之前已经积累了很多的基础知识，这篇文章你基本上两下就看完了；但是如果你接触的还不多，那你可能还得花点时间去补充那些必要的技能。

框架是一种工具，也许今天它是炙手可热的大众明星，但明天就有可能变成过气的淘汰品。但是那些最基础的知识和思维，是可以支撑你在开发道路上一直走下去的，并且可以让你很快地就能掌握新的工具和技术。特别对于学生来说，不论是学习前端或后端，一定戒骄戒躁，踏踏实实地去打好底层的基础。

下一章：来扯点ionic3[1] 创建一个新页面