Ionic2探索始篇

本文主要是以Ionic2官网的文章基础，总结出自己的学习感悟

Ionic2框架及其各部分

Ionic2

Ionic 2 专注于以标准的 HTML 、 CSS 和 JavaScript 来构建移动站点，并可以通过 Cordova 打包成移动 App，只需编写一次代码，就可以分别部署到 iOS 、Android 等多种移动平台上。这项技术已经帮助很多开发者创建了很多漂亮的 App。现在 Ionic 2 已经发布了第二代版本，使移动开发更容易、更有效率。--Ionic2 gitbook

其实本质来说Ionic2其实就是伴随angular产出的前端UI框架,它集成了cordova使它的一些组件可以是用原生的能力(说白了就是在cordova的组件上又自己封装了一层,让自己的native组件能够使用更多平台的能力比如各个平台的蓝牙功能、wife、指纹、手机信息、相机等功能),总体来说还是一款非常优秀的框架、可以说特别开发混合APP最快的框架之一(为什么说是最快的呢，后面会给大家介绍它开发页面快在什么地方)。在后续的版本Ionic3已经推出,体积更小并且使用了AOT预编译+懒加载、同时也支持的服务端渲染。Ionic3和2版本的差别不是很大,基本是沿着2版本衍生的。所以我们学习了2版本的基本3版本也差不多没问题了。

angular

Ionic2框架所用的angular版本是4.x的版本,现在流行的web框架有三家的:vue、react、angular,vue相对这三大流行的框架中是最轻量级的web前端框架,目前由尤雨溪大神及其团队在维护。react相遇来说已经成熟了,但是react官方团队只维护react框架其他的并没有过多的维护,一些重要的库还是由第三方维护。angular的版本变化比较大,angular2之后配有Typescripts简直爽的不行了,开发速度提升非常大,减少了开发中一些不必要的错误,同时angular也引入了react思想-->虚拟DOM。

Ionic2-UI框架

加入了bootstrop的栅格系统和流式布局,写好了一套布局组件,基于这套组件可以快速简单的布局出一个高性能页面,剩下的和其他的UI框架差不多的一些UI组件：Alert、Buttons、loading等等。

Ionic2探索总结-1.png

上图是一个简单的Ionic2框架的轮廓图,下面就带着大家一点一点学习这几个模块。当然学习这门框架首先需要搭建环境、下面带领大家学习如何搭建环境

环境搭建

安装node.js

到node.js官网下载node.js安装包直接安装,请选择安装6.x版本的 如果安装低版本的nodejs编译的时候会报错。如果想要学习Ionic3的话安装6.9版本及其以上的。

安装 JDk &&android-SDK

这两个的安装我在这里就不多叙述了,网上关于安装这两个的东西太多了。有趣的是cordova的编译版本还在JDk1.6。

安装Ionic2&&cordova

npm install -g [email protected] [email protected]

说明一下为什么要控制一下版本,如果不控制版本的话会直接升级到ionic3上去,我们暂时看ionic2毕竟ionic官方版本出的太快文档跟不上版本

初始化项目

在命令行后面加-v2 或者-v1分别代表着Ionic2和Ionic1项目

初始化空白项目

  ionic start myApp blank

初始化带有tabs页面空白的项目

  ionic start myApp tabs

初始化带有侧边栏的项目

  ionic start myApp sidemenu 

我选择第二个命令创建项目

运行项目

   cd myApp
   ionic serve

开启Ionic服务,开启打包处理。处理完毕后Ionic自动开启浏览器访问localhost:8100,此时便可以看到Ionic2项目

真机测试

android

首先连接手机,安卓手机的话找到开发者选项 选择 开启开发者选项 再选择下面的 USB调试 当弹出是否容许USB调试选择确定即可

到项目根目录下

   ionic run android

ios

到项目根目录下

   ionic build ios

打开Xcode 选择连接的ios设备 run 即可打包到ios手机

分析一下目录

.
├── config.xml          @1
├── hooks
│   └── README.md       @2
├── ionic.config.json   @3
├── package.json        @4
├── platforms
│   ├── ios             @5
│   └── platforms.json  
├── plugins             @6
├── resources           @7
├── src
│   ├── app
│   │   ├── app.component.ts   
│   │   ├── app.html
│   │   ├── app.module.ts    @8
│   │   ├── app.scss
│   │   └── main.ts          @9
│   ├── assets
│   │   └── icon
│   │       └── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── pages
│   │   ├── about
│   │   │   ├── about.html
│   │   │   ├── about.scss
│   │   │   └── about.ts
│   │   ├── contact
│   │   │   ├── contact.html
│   │   │   ├── contact.scss
│   │   │   └── contact.ts
│   │   ├── home
│   │   │   ├── home.html
│   │   │   ├── home.scss
│   │   │   └── home.ts
│   │   └── tabs
│   │       ├── tabs.html
│   │       └── tabs.ts
│   ├── service-worker.js
│   └── theme
│       └── variables.scss
├── tsconfig.json            @11
├── tslint.json              @12
└── www

对比上面的tree后面的@表示解释编号

1. config.xml ionic项目的配置文件包括:项目的名字、介绍、作者、与远端通信权限、不同平台的图标适配、引入的插件等的配置。
2. 说明。
3. 这个文件表示ionic项目使用的版本是多少、是否启用typescripts。
4. ionic项目的包管理文件。
5. 新建项目默认加入ios平台，其他的平台需要用命令行加入。
6. 插件文件（这个后续再讲。
7. 图片文件夹。
8. angular的跟模块文件
9. 入口编译的ts文件
10. 主页
11. 编译ts文件的配置文件
12. ts文件静态语法检查的配置文件

总结

基本的介绍就到这里了,后面的文章我将会介绍ionic、angular、cordova、ionic官方native组件的使用、cordova原生组件的封装等。