说说ionic3[0]吹牛了再入手也不迟

分类1.前言2.ionic的阅读方法3.知识和环境储备4.安装过程5.工程目录结构分析6.运行中thebrowser7.结语序~哇，不得不说前端这几年发展太快了。这些技术以前是用来写网页的，现在已经将触角伸向了各个开发领域。回顾昨天，我们似乎仍然依赖刷新浏览器和使用警报来调试代码。现在我们有了强大的调试工具，丰富的模块管理机制，自动化的构建模式，还有可以和操作系统交互的API……总让人觉得快落伍了，不过没关系。因为前端强大的生命力，javascript这个曾经的小玩具，摇身一变成为世界上最流行的编程语言之一，也让我们对前端领域比以前更有信心了。免费探索。今天有一些使用前端技术构建移动应用程序的技术。这些技术不仅可以让我们方便的做出和移动端应用一样的视图，还可以做到非常接近原生应用的体验。而且随着科技的进步，这样的体验会越来越近。Ionic就是这样一个框架，它允许你使用前端技术来创建、调试和打包可以在手机上运行的移动应用程序。令人欣慰的是，你可以用一套代码编译iOS、Andorid和WindowsPhone版本，还可以直接以WebAPP的形式发布。所以如果你已经有一定的前端技术储备，不妨玩玩ionic，体验一下跨界开发的美妙感觉。不管单词教学时间是什么，如果你用的是ionic框架，你一定要知道ionic这个单词的发音。不然以后出去吹牛，发不出来或者发错了，就太丢人了。Ionic在英文中是离子的形容词，镜框的logo确实有点离子的味道。我们来加上音标：/a??ɑ:n?k/[a???n?k]第一行是美式音标，一般读音是“Love~Nick”（嗯，这个需要延迟一点），第二行是英式发音，大致读作“LoveNick”。使用哪一个是我们开发者的自由。说白了，我们用两个语气词来表达我们对尼克的爱（尼克是谁？我不知道）。知识和环境储备（懂的部分略过）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#语言，这会让你很酷。箭头函数：官方文档中的例子基本都是使用箭头函数。除了学习如何使用它们之外，你还应该注意这个方向与传统功能不同。Promise：升级版回调函数+事件驱动。可以说，这是ES6中最重要的特性之一。多玩几次你一定会爱上它。了解它的特性并将其变成你的武器。后面还会有一个叫做observableobject的怪物，你打它会容易很多。for...of循环：和前面的for...in循环类似，相信很快你就会知道区别了。下面是阮一峰老师的教程。聪明的话肯定会学ECMAScript6GettingStarted3.Node.js和NPM火到不想再说了，不知道node是什么也没关系.至少你可以安装它，clam，没有假装？Node.js中文网npm是node中的一个包管理工具。这里需要用到它来安装需要的模块，发送简书里的介绍，主要是了解install命令，了解全局安装和本地安装的区别。npm学习笔记整理（作者：ihoey）4.Typescript简称ts。它是巨人创造的语言，被称为javascript的超集。在ionic中需要用ts来写脚本。事实上，它是基于ES6的。语法。不需要很了解，但是要看它的基本类型和声明方式，因为在开发阶段是强类型，所以如果没有正确定义和使用类型，它编译时不会通过类型检查。让num:number=0;//定义一个数值变量letstr:string='HelloWorld!';//定义一个字符串letbool:boolean=true;//定义一个布尔变量letstrarr1:string[]=['a','b','c'];//定义一个字符串数组letstrarr2:Array=['a','b','c'];//定义另一组字符串数组方法letdog:Animal=newAnimal();//使用类型声明来定义一个类的实例，使代码的语义更清晰，每个变量的作用也更清晰。一定程度上防止了开发者乱搞（哈哈），但是遇到无法指定的变量类型时，可以使用通用类型any，编译时会跳过类型检查；让我是谁：任何；more更多内容请参考官方文档：BasicType5.Angularionic是基于Angular框架开发的。目前的ionic3是基于Angular4的。刚开始接触ionic的时候，我还没有学过Angular，但是一些当时不懂的问题，后来学了Angular2就解决了。在我的文章中，不会对Angular技能有任何要求。遇到相关问题时，我会尽量解释相关原理。如果你以后熟练了ionic的开发，你会发现Angular学起来非常轻松。Angular官网开始安装：革命分为两步1.安装cordova和ionic$npminstall-gioniccordova使用全局安装，方便后面在控制台使用ionic命令进行相关操作2.新建一个project$ionicstartdemotabsdemo是项目名称，tabs表示项目使用tabs模板，ionic主要有三个模板，tabs，sidemenu和blank，tabs应该是使用最广泛的一种。初步了解项目结构项目安装完成后，我们打开demo项目目录看一下它的大致结构。所有源代码都存储在src目录中。在src目录下，我们接触最多的两个文件夹是app和pages。app文件夹下的main.ts入口文件以前大家写网页的时候都是用一个js文件在网页中调用一个script标签。但是现在的前端项目只调用一个入口文件，让入口文件帮我们引入其他的依赖文件。就像之前街上的店铺都开门了，想买东西直接到店里去。现在，各种商业广场在CBD很受欢迎。你先走进商场的大门，然后寻找你想去的商店。一个好处就是不用提前知道店的具体位置，进门打开空调，是不是很爽？app.module.ts根模块文件ionic基于完全模块化的angular。根模块文件是一个无微不至的管家。你告诉它你要用什么（模块、组件、服务、管道、指令等），它就会给你拿来，你只要做一个文静帅气的人就行了。就是这样。app.component.ts根组件angular中的组件就是我们平时所说的视图，组件的产物就是我们看到的界面。根组件主要定义了应用的整体视觉表现，如根页面、状态栏、启动界面等。app.component.scss全局样式文件嗯，就是写全局css的地方，但是在ionic里面可以用sass写，如果你不会sass，后面会做一些介绍。app.html根组件的模板没有存在感，省略。pages文件夹页面非常简单。它存储了APP的所有页面。每个文件夹都是一个页面，定义了页面的业务逻辑、模板和样式。下一章，我们会讲到关于页面的那些事。要开始第一次运行，请记住先cd到项目目录。$cddemo在控制台执行serve命令。$ionicserveionic将在本地创建一个服务器。稍等片刻，浏览器就会弹出应用程序的主页。有没有觉得这个应用的本体有点……丰满，我们按F12进入开发者工具，然后点击移动设备工具，模拟移动设备上的页面效果。上面有几个预设设备，你可以切换它们来观察不同分辨率和不同操作系统的效果。但是记得每次切换后刷新页面。此时，服务器会监听你项目中文件的变化。当你修改里面的文件时，页面会自动刷新呈现一个新的状态。调试完成后，在控制台使用ctrl+c关闭本地服务器。在开发初期，浏览器可以帮助我们完成大部分调试工作，即不需要准备物理移动设备或虚拟机，非常方便。结语前端框架已经成为一种热潮，现在培训机构都在积极推出各种框架的课程。但是会用框架并不代表会掌握前端技术。其实你也可以看出，那些基础知识对于用好一个框架有着决定性的作用。如果你之前已经积累了很多基础知识，那么基本上点两下就可以看完这篇文章；但是如果接触的不多，那么你可能要花一些时间来补充必要的技能。框架是一种工具。它今天可能是当红明星，明天可能就成为过时产品。但是最基础的知识和思维，可以支撑你走上发展的道路，让你快速掌握新的工具和技术。尤其是对于学生来说，不管是学前端还是学后端，都要戒骄戒躁，扎扎实实打好底层基础。