基于ionic1.x移动端环境搭建基础
环境安装
技术选型：ionic(v1.7.16)+angularjs(v1)+cordova
基于h5的app开发需要安装的环境有 node.js、cordova、git、bower、gulp、ionic、java jdk、android sdk
1. Node.js
下载地址<a href="https://nodejs.org"> https://nodejs.org</a>
2. Cordova
Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等.Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。
安装好nodejs 可以直接在 windows的命令行使用 npm 命令安装cordova
(注：cordova好像被墙了需翻墙后使用以下命令，或通过淘宝镜像安装)
普通安装
C:\> npm install -g cordova
通过淘宝镜像安装
C:\> npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\> cnpm install -g cordova
安装完cordova .js 按住window+R输入cmd打开终端输入cordova -v检查是否安装成功
3. git安装
Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目分布式相比于集中式的最大区别在于开发者可以提交到本地，每个开发者通过克隆（git clone），在本地机器上拷贝一个完整的Git仓库。
下载地址 <a href="https://git-for-windows.github.io/">git-for-windows</a>
4. bower
- 省时： 为什么要用bower第一个原因节省时间，每次我们需要安装jquery的时候 我们都需要去jquery网站下载包或使用cdn版本，但有了Bower 你只需要简单配置输入一条命令，jquery就会安装在本地计算机上.
- 脱机工作,Bower会在用户主目录下创建一个.bower文件夹
- 清晰的脚本依赖关系
- 让升级变得简单
安装bower的前置条件需要安装 nodejs、git
C:\> npm install -g bower
5.安装GUlP工具
gulp是基于Nodejs的自动任务运行器,安装GUlP插件该工具可以帮助开发者对前端代码的的编译（sass、less）、压缩、测试；图片的压缩。
6.安装ionic
因本项目使用ionic(v1.7.16),需指定安装版本备注
安装指定version
npm install -g ionic@1.7.16
或通过淘宝镜像安装
cnpm install -g ionic@1.7.16
普通安装
C:\> npm install -g ionic
通过淘宝镜像安装
C:\> npm install -g cnpm --registry=https://registry.npm.taobao.org
C:\> cnpm install -g ionic
安装完ionic 按住window+R输入cmd打开终端输入ionic -v检查是否安装成功
备注：
卸载ionic
npm uninstall -g ionic
7.安装java jdk
下载地址 <a href="http://java.oracle.com">http://java.oracle.com</a>
选择与本系统匹配的版本，如window x64
![Uploading 09_991306.png . . .]
安装后需输入java -version确认是否安装成功
09.png
JDK环境变量配置
reference:http://jingyan.baidu.com/article/6dad5075d1dc40a123e36ea3.html?qq-pf-to=pcqq.c2c
- 计算机→属性→高级系统设置→高级→环境变量
14.png
2)系统变量→新建 JAVA_HOME 变量 。
变量值填写jdk的安装目录（本人是 C:\Program Files\Java\jdk1.8.0_121)
3)系统变量→寻找 Path 变量→编辑
在变量值最后输入 %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
（注意原来Path的变量值末尾有没有;号，如果没有，先输入；号再输入上面的代码）
15.png
4)系统变量→新建 CLASSPATH 变量
变量值填写 .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar（注意最前面有一点）
系统变量配置完毕
16.png
5）或者在cmd上运行path,能找到上述路径即为成功
21.png
8.安装android sdk
下载地址 <a href="http://developer.android.com/sdk/index.html">http://developer.android.com/sdk/index.html</a>
10.png
安装android sdk的前置条件需要安装 java jdk
安装后需输入android -v确认是否安装成功
如果出现如下所示，则未成功。
](https://img.haomeiwen.com/i7086971/c9c2c7e14f4cce8b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
1)android sdk未安装成功
解决方法：配置android sdk环境变量
reference：http://jingyan.baidu.com/article/f71d603757965b1ab641d12a.html
1）在系统变量里找到Path选中（图中蓝色那条），点击下面的【编辑】。
2)在变量值里加入androidSDK中platform-tools和tools的目录路径
本机为：
C:\Users\Administrator\AppData\Local\Android\sdk\platform-tools
C:\Users\Administrator\AppData\Local\Android\sdk\tools
当然两个之间要加个分号“;”。
3)在cmd上运行adb,如下图即为成功
19.png
4）或者在cmd上运行path,能找到上述路径即为成功
初始化项目(创建新项目)
ionic方式生成项目的基础框架
# 创建tabs模板的应用
ionic start myApp tabs
# 添加android平台
ionic platform add android
# 编译 android应用
ionic build android
# 应用在android下调式
ionic run android
工程的目录结构如下
+ hooks
+ platforms
+ plugins //cordova插件的目录，插件的安装下一节详述
+ resources
+ scss //scss文件，发布时编译这个目录下的文件输出到www的css目录中
+ www
- .bowerrc
- .gitignore
- bower.json
- config.xml
- gulpfile.js
- ionic.project
- package.json
- README.md
cordova 与ionic 的区别，ionic是基于cordova扩展的，ionic拥有cordova的全部功能。ionic中多了一些前端脚本的构建工具如（bower、gulp）
hooks目录编译cordova时自定义的脚本命令，方便整合到我们的编译系统和版本控制系统中,platforms,plugins,resources,scss,config.xml
www目录为 html的前端资源目录, 我们所说的开发就是在个目录下进行以下对
+ css // 样式文件
- style.css
+ fonts // 字体文件
+ img // 存放图片文件
+ js // 存放工程脚本
+ cfg // angularjs 一些配置文件，路由表
+ ctrl // angularjs 控制器
+ dev // 开发版本文件
+ release // 生产版本文件
+ services // 接口与服务
app.js
+ lib // 第三方脚本
+ templates // 模板文件
- dev.html // pc浏览页面（用来测试业务）
-index.html // 生产环境（最终发布的app）
目录是按MVC方式划分 M(js/services)、V(templates)、C(js/ctrl)。在实际开发过程中都需要在浏览器测试开发，由于浏览并没有真实手机设备的环境（相机、文件等），对原生接口调用时分开发版本(dev)与生产版本（release）,开发版本只是模拟并延时返回结果。
使用 ionic tabs 模版创建一个 APP过程
1)ionic start testDemo tabs
22.png
23.png
2)ionic platform add android
06.jpg
3)ionic run android
此步真机调试，需要启动手机”开发者模式“--”USB调试“
33.png
24.png
25.png
可能遇到的错误
1)ionic run android
出现问题一
26.png
解决方法：
reference:<a href="http://stackoverflow.com/questions/31310182/error-could-not-find-gradle-wrapper-within-android-sdk-might-need-to-update-yo">http://stackoverflow.com/questions/31310182/error-could-not-find-gradle-wrapper-within-android-sdk-might-need-to-update-yo</a>
13.png
下载<a href="https://dl.google.com/android/repository/tools_r25.2.3-windows.zip">Android SDK tools package</a>替换"C:\Users\Administrator\AppData\Local\Android\sdk" tools文件
download url:https://dl.google.com/android/repository/tools_r25.2.3-windows.zip
出现问题二
卡死在这一步，或者出现如下报错：
01.png
解决方法：
手动下载gradle-version-all.zip对应的版本，替换已有的版本，放置到对应的目录，本地为：
C:\Users\Administrator.gradle\wrapper\dists\gradle-2.14.1-all\4cj8p00t3e5ni9e8iofg8ghvk7
下载<a href="http://services.gradle.org/distributions">Gradle Distributions</a>
download url:http://services.gradle.org/distributions
出现问题三
adb无法使用，提示error:unknown host service
reference:
http://blog.csdn.net/liguilicsdn/article/details/50902194
http://jingyan.baidu.com/article/00a07f3844e13782d128dc61.html
32.png
- 打开命令行，输入命令：netstat -ano |findstr "5037"
28.png
- 查看到对应的进程的PID是7952
Ctrl+alt+delete，打开任务管理器
查看是哪个进程占用了7952
![查找进程对应的PID]
31.png
这里是sjk_daemon.exe(百度到是金山手机助手)占用了此进程，需要将该进程
- 结束该进程
5）如果发现一个进程，多次关闭无法关闭，可以尝试
![Uploading 08_869068.png . . .]
卸载该应用
6）如果还是无法连接设备，提示devices notfound，可以尝试如下命令：
adb kill-server
adb start-server
adb remount
reference:
http://huangtengfei.com/2016/01/start-ionic/
