来扯点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在英语中是ion离子的形容词，框架的logo倒的确有那么点离子的味道。让咱们上音标：

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

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

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

1. HTML5+CSS3+Javascript

其实这仨没啥好说了，若是你不知道《沁园春·长沙》的做者是谁，还会有谁信你念太高中。不过这里是否是非得要学过HTML5，其实也不必定。由于开发中并无太多地涉及到HTML5特定的API，并且在ionic中你不须要写head部分，因此也没有doctype之类的问题。主要你须要了解一些HTML5的语法特性，好比<input>这类单标签最后再也不使用自封闭的斜杠了、还有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<string> =  ['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来关闭本地服务器。在开发初期，浏览器能帮咱们完成大部分的调试工做，也就是你无需准备实体移动设备或者虚拟机，很是地方便。

结语

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

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