来扯点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的语法特性,比如<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] 创建一个新页面

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,784评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,745评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,702评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,229评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,245评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,376评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,798评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,471评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,655评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,485评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,535评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,235评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,793评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,863评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,096评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,654评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,233评论 2 341

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,330评论 25 707
  • It is not easy to meet each other in such a big world. ...
    七烬Seven阅读 179评论 0 0
  • 我的心再无牵念, 看到你平静的脸, 细细的眼, 紧闭的唇, 我读懂了他们的信号。 我的心再无牵念, 你挑弄的眼神里...
    钼钰阅读 217评论 0 0
  • 画画使我快乐,一有,空闲就会画画,父亲见我如此痴谜于画画,就带我去叫了老画家,一直记得老画家所说的那一句话"快乐使...
    倩宝工作室阅读 211评论 2 0