×

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

96
忠叔
2017.08.06 13:14* 字数 3027

目录

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的logo

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

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

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

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

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

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来关闭本地服务器。在开发初期,浏览器能帮我们完成大部分的调试工作,也就是你无需准备实体移动设备或者虚拟机,非常地方便。

结语

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

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

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

来扯点ionic
Web note ad 1