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

leejan97 发布于2019-08-05 12:26 / 2966人阅读

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

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的语法特性，比如这类单标签最后不再使用自封闭的斜杠了、还有require, pattern, placeholder这些很有用的表单属性。这些对你的开发都会有所帮助。

2. ES6(ECMA2015)

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

let和const命令: 未来你要习惯用它们代替var来声明变量

class: 不再用函数来声明类了，如果你写过java或C#之类的语言，这会让你非常爽。

箭头函数: 官方文档里的示例基本都是用箭头函数，除了学习使用方法还要注意一下this的指向和传统函数是不同的。

Promise: 回调函数+事件驱动的升级版，可以说这是ES6里最重要的特性之一了，多玩两下你一定会爱上它。了解它的特性，把它变成你的武器。后面将会出现一个叫可观察对象的怪兽，打它你就容易多了。

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

结语

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

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

混合云专线服务吹完牛来扯点不迟表中的字段也不相同

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56855.html

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

摘要：创建一个页面组件在中，页面是以组件的形式存在的，每个页面都是一个独立的组件。我们现在需要建一个名为的页面，我们现在文件夹下新建一个文件夹，并创建一以结尾的同名文件。类的命名在中，页面类采用页面名的命名方式，首字母大写，如等。 showImg(https://segmentfault.com/img/remote/1460000012135849?w=650&h=350); 目录创建一...

superw 2019-08-05 12:26 评论0 收藏0
来扯点ionic3[6] 继续上手表单：魔法般的双向数据绑定

摘要：其中就是将表单和页面组件绑定在一起的桥梁，当一个表单被绑定到某个属性成员上时，它的就自然等于这个属性的值。 showImg(https://segmentfault.com/img/remote/1460000012146194?w=650&h=350); 相关章节：[来扯点ionic3[5] 轻松上手表单：这些组件可以玩一年](http://www.jianshu.com/p/b2a...

ermaoL 2019-08-05 12:27 评论0 收藏0
来扯点ionic3[5] 轻松上手表单：这些组件可以玩一年

摘要：基本使用请选择选项选项在标签上使用指令，表示其内部的为同一组。标题按钮按钮和上述控件不同，它不使用来构件，而是使用普通的标签配合指令来实现效果并且按钮可以不放置在容器中。 showImg(https://segmentfault.com/img/remote/1460000012146194?w=650&h=350); 表单几乎是每一个应用程序中必不可少的一部分，在各类 HTML 教材...

endless_road 2019-08-05 12:27 评论0 收藏0
来扯点ionic3[7] LocalStorage的使用—以登录和注销为例

摘要：我们可以尝试模拟登录的流程来体验这一的使用。制作模板并完成数据绑定在编写表单模板，并使用将每个项目绑定在数据模型上。清除中的用户信息在首页添加注销按钮，清除中的，并跳转回登录页面。 showImg(https://segmentfault.com/img/remote/1460000012146194?w=650&h=350); 一般意义上，一个互联网 APP 中的数据主自与服务器的交...

lushan 2019-08-05 12:27 评论0 收藏0
来扯点ionic3[4] 结构型指令和列表渲染

摘要：雷神上映已经一周，但因为各种原因还没来得去送票房，有多年不见的班纳和洛基娘娘，期待他们在诸神黄昏和明年无限战争中的表现。至此，准备就绪，开始了解第一个指令。参考文档结构型指令 showImg(https://segmentfault.com/img/remote/1460000012145196?w=650&h=350); 《雷神3》上映已经一周，但因为各种原因还没来得去送票房，有多年...

sean 2019-08-05 12:28 评论0 收藏0