用Ionic2.0写第一个WebApp

自从Ionic2出来之后就尝鲜的学习了一下，根据官方提供的学习文档，当然是全英文的。读起来真的有点费劲，不过很多还是比较容易上手的。相比于之前的ionic1，ionic2也是集成于Angular，不过这次是AngularJs2.0。

在这里给大家分享一下自己的学习经验，博主是自学的，有什么错误还望大家指出来~

先贴上官网。
Ionic2.0官方文档

1.开发环境

1、node.js ( node.js )

2、jdk 1.8(目前Android的打包需要1.8版本) JDK1.8

3、android sdk 也可直接用android studio，因为android studio安装时也会安装android SDK

node.js

傻瓜式安装，完成后。
在控制台cmd输入 node -v 输出版本号 则说明安装成功
这里我的版本号是6.9.4

安装之后会给自己的电脑安装一个npm的指令。
如果你装在C盘的话在：
C:Users（你的用户名）AppDataRoamingnpm （全局文件）
C:Users（你的用户名）AppDataRoamingnpm-cache （缓存文件）
这个两个目录下会保存你所下载的全局（-g）文件。

JDK1.8

找到一个适合你电脑版本的JDK1.8安装包。傻瓜式安装就好，这里就不贴图了。

android sdk

1.首先安装Android SDK android sdk 找一个合适自己电脑的（最好是64位的）
2.安装完成后运行 SDK Manager.exe；
会看到这个

勾选上 API21以上的SDK。
如果发现下载不了SDK的话。设置一下代理 在Tools=>Options..=>修改成这样

接着等它下载完就好。

JAVA和Android设置环境变量

这里需要注意一下 JAVA和Android SDK需要时同一个位的（都是32或者64）
这里博主的电脑是x64的

我的电脑=>属性=>高级系统设置=>高级=>环境变量
我的电脑是Win10系统就贴上Win10的截图Win7的操作是一样的

这里说明一下：上面的是用户的，下面的是全局的。如果设置到上面就只有这个用户可以使用。其他用户不可以，下面是所有用户登录都可以使用。（如果你的用户是administrator可以忽略~）

（如果没有可以新建一个。绝对不要删除！！！！！！！！！）

关于Java的配置是JAVA_HOME和CLASSPATH；
关于Android的配置是ANDROID_HOME；
接着注册变量到全局中。
打开Path：在后面加上
;%JAVA_HOME%bin
和
;%ANDROID_HOME%platform-tools
;%ANDROID_HOME%tools;
每一个之间都有个分号，要注意。 之前的别删了。不然你就准备重做系统吧。。。

设置好之后打开控制台cmd
运行javac -version会出现这个

就说明java环境配置好了。

接着输入
android -v 如果弹出SDK Manager则说明配置成功。

2Ionic2.0的安装

先贴上官网的文档 ionic installing

ionic2也是在cordova平台上开发的。

所以先安装cordova

npm install -g cordova

然后再安装Ionic

npm install -g ionic

这里的-g是指安装到全局中，方便后面指令的使用。

很多朋友会因为下载缓慢或者卡死，这是因为国内网络有限制。万能的 T宝提供了淘宝镜像（npm.taobao.org）。
在命令行输入

npm install -g cnpm --registry=https://registry.npm.taobao.org
 

然后使用cnpm代替npm进行安装。

cnpm install -g cordova
 cnpm install -g ionic

但是！

用这个确实可以下载下来，但是他会少下一些东西。最后打包的时候死活打包不了。头疼了半天，卸载了用npm安装了一遍然后打包就好了。

T！M！的！就！好！了！

本人亲身体会过的，希望各位朋友自己取舍…
尽量还是使用npm下载。

当你下载完了之后；再命令行会打印出结构树。
测试一下是否安装完成

cordova -v

会打印出版本号，就说明cordova的环境安装好了。

ionic

会打印出下图的东西就说明安装好了

注意看CLI 后面是版本号

3.运行和打包

首先是创建一个ionic app

在一个目录下，创建一个文件夹myapps

mkdir myapps

到该目录下

cd myapp

新建一个ionic app

ionic start io1 tabs --v2

codemeanioapp的名字（文件夹名字）tabs模板类型–v2声明下载ionic2的app(如果不加上的话下载的则是ionic1的结构)

---

关于模板类型
- tabs ：3个tab的模板布局
- sidemenu：侧滑菜单布局
- blank：空布局
- tutorial：引导布局

下载完成之后，进入到app目录下

cd io1

在web上运行输入

ionic serve

之后在浏览器访问 localhost:8100 就可以看到app了
这里借用一下官网的截图：

app的打包

Android:

在app的根目录下:
添加android

ionic platform add android

成功之后；开始打包

ionic build android --prod --release

–prod 和–release这两个指令不清楚什么意思，还望各位大神指点指点。

使用ionic build android生成的.apk启动时间比较长

使用ionic build android –prod生成的.apk启动时间在5秒内

使用ionic build android –prod –release生成的.apk启动时间稍快于上

成功之后在控制台会打印出打包好的apk所在的位置。
一般都是在 项目根路径下platformsandroidbuildoutputsapk下中
会生成一个android-debug.apk文件。就是打包好的文件。

IOS

IOS在这里就不说了，没有研究这块。
贴上官网的教程
ios build