Ionic小白入门（windows版）

• 前言

　　ionic是一个用来开发混合手机应用的，开源的，免费的代码库。可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。ionic会是一个可以信赖的框架。

　　如果你想跨平台开发app，那么ionic可能最适合那些需要快速出产品，并有一定的web前端经验的猴子。

　　关于开发环境的搭建，相信如果你看到我这篇文章的时候，已经看多很多大牛们写的专业多指导意见了，所以，我下面要说的会是以我搭建过程中遇到的问题，或者说是已一个纯正的小白的角度去解答问题。　　　

• 工具准备

1. node.js（npm)
2. git (这个以后会用到,先装上吧，因为很多插件需要用它来下载）
3. Cordova(PhoneGap核心代码，具体去百度)
4. ionic 这个不多说，我们的主人翁哦。
5. android 平台
   1. JDK
   2. SDK
6. Ios平台
   1. 苹果本（如果有能力，真的买一个吧，等你攒够钱再去买的时候，可能你已经不像当初那喜欢它了）。
   2. 开发者账号（发布的时候会用到的，$99)
      
      

　　其他：英文字典（英文不好真的会走很多弯路）　　

• 环境搭建

 　　jdk,sdk这些配置自己去弄吧，比较成熟了。

 

　　1.安装npm

　　　下载nodejs，默认安装，nodejs会自带npm命令，如果没有特殊情况，重启命令行应该就可以直接用这个命令了

　　　　

　　2.安装cordova和ionic

　　 安装 cordova 和 ionic ，在命令行输入以下命令，-g是全局安装的意思，所以可以不用考虑安装到哪，也不用考虑在哪个目录下运行这个命令。

npm install -g cordova ionic

　　这个根据网速自己慢慢等吧，建议FQ下载。

　　ionic 升级以后，好像国内已经安装不了了，如果不能FQ的话，推荐使用淘宝的npm镜像地址

　　https://npm.taobao.org

　　npm这个说nodejs的命令，如果希望它可以直接使用，最好说把它配置到环境变量中。

　　安装成功以后，到你的开发目录中去，因为当你执行如下代码的时候，会再你当前文件夹中创建项目文件目录呢。

 

　　3.配置ionic，cordova环境变量

　　如何配置环境变量，我这里就不赘述了，如果你安装完ionic发现在命令行里面键入没有找到，首先是重启命令行工具，然后再看是否需要配置环境变量。

 

• 开始Hello World

　　1.创建项目　　

　　打开cmd命令行，到工作目录下，键入以下命令

ionic start myApp tabs

　　ionic 命令找不到？ 同样的，去配置环境变量吧，这个没有解释的了。

　　start 是初始化一个项目

　　myApp 就说项目的名称了，这个名称会创建文件夹，app标题等一系列的东东，到时候慢慢修改吧。

　　tabs 这个说官方提供的一个 类似微信选项卡一样的demo，相对来说还是比较简单的，建议下载下来研究研究吧。

 　　

　　2.添加编译平台

　　下面要进入到 myApp这个目录下面，先不用研究目录结构，先把android的编译环境添加到我们项目中。命令如下

ionic platform add android

　　希望不要出错吧，如果出错，那么应该就是你的android环境变量没有配置正确　　

　　

　　3.编译

ionic build android

　　编译的时候，可以指定编译版本哦，也可以不写，系统默认按照对应版本编译。

 

　　4.真机调试

　　编译好了以后，执行下面命令，就可以直接在设备上调试了（前提说你已经按照上述章节配好了调试环境）。

ionic run android

　　实际上run这个命令直接带编译的、不过我还是习惯一步一步的走。

 

　　5.模拟器调试

　　如果你希望在模拟器里面调试，那么请先手动创建一个模拟器（如何创建模拟器，这里不赘述了）。

　　创建好模拟器以后，执行如下命令就可以直接打开模拟器调试了

ionic emulate android

　　如果幸运，你已经可以看到官方提供的demo应用了。

　　这个时候，打开你项目文件夹，搜索一下＊.apk，看看结果吧，你应该就明白了。

 

　　6.开发调试

　　如果你想在浏览器里面先看看效果，可以使用下面的命令搭建一个临时服务器。

ionic serve

　　系统会自动打开默认浏览器，

　　注意，是serve，不是server哦。