Ionic+Visual Studio App开发

因为需要参加一个设计类的比赛，需要演示一下设计的APP效果，本来是打算用一些原型设计软件来做，结果发现设计师们人手一个Mac果然是有理由的，好多面向设计师的原型设计软件都是要在OS X上。所以最后还是选了ionic这个框架。ionic的好处是基于HTML和AngularJS，可以适用于Android和iOS，且代码相对Java来说入门更简单。

平台搭建

一个基本的ionic环境必备的是node.js+cordova+ionic命令行工具。ionic的官网给出了很详细的入门介绍，地址如下：ionic入门。同样，ionic一样有中文社区ionic中文社区。
因为ionic官网推荐windows下的用户使用visual studio，所以最后大部分的工作都是在visual studio环境下完成，虽然逼格不够，但是胜在集成度高啊。需要注意的是，visual studio自带安卓模拟器可以直接模拟出效果，但是如果需要生成apk，在手机端调试，还是需要命令行来操作。当然可能visual studio也能做到，但是因为没有找到具体的方法所以最后还是用了node.js的命令行来完成。此外，在node.js上编译apk需要android开发环境，所以需要在电脑上安装android-sdk及相关工具。最后所有用到的工具如下：
- Visual Studio Community 2015VS下载
- node.jsnode.js下载
- android-sdk，建议可以直接用android studioAndroid Studio下载

安装好android环境之后需要配置好环境变量，Win10下配置环境变量的方法如下：
-按Window+X键
-选择控制面板-系统和安全-系统-高级系统设置-环境变量
-配置ANDROID_HOME环境变量，值设为sdk所在目录，比如C:\Program Files (x86)\Android\android-sdk。同时在path变量下添加相应的platform-tools和build-tools文件夹地址
至此，所有需要的环境基本上都配置好了。

开始第一个ionic项目

在Visual Studio中创建ionic项目，基本的操作可以参见VS官方给出的指导visual studio下ionic。总的来说就是在VS下安装ionic模板之后就可以利用模板开始创建和了解ionic项目了。

AngularJS

前面说过ionic是基于HTML+AngularJS，无奈博主对AngularJS了解为0，所以开发的过程中只能先学，到现在其实也只是懂一点皮毛，这里只分享一些学习过程中找到的不错的学习资料，希望能有所帮助。
-一个系统介绍AngularJS的博文，强烈推荐，虽然是英文版，但是作者讲的很清晰AngularJS系统介绍
个人在学习的过程中用到的比较多的AngularJS的功能也就只有用路由跳转来控制.state和用控制器controller来控制html页面的事件和变量。
在VS中创建好一个ionic模板之后，会看到项目里有一个www的文件夹，我们基本上所有的文件都放在这里面，其中templates文件夹里面放置的就是我们自己写的html页面。而在app.js中会有一个.config，我们可以在其中设置不同的.state，.state即AngularJS中的路由状态，每一个路由状态都对应templates文件夹中的一个html页面，一般的语法如下：

.state('test', {
      params: { testParams: null },
      url: '/test',
      controller: 'TestCtrl',
      templateUrl: 'templates/test.html'
  })

其中params是本路由状态可以接受的参数，不是必须。controller是对应于本状态的控制器，templateUrl是本状态下需要加载的html页面。一般所有状态的controller都放在一个controller.js文件中，controller的基本语法如下：

.controller('TestCtrl', function ($scope, $state) {
    $scope.back = function () {
        $state.go('anotherstate');
    }
    $scope.flag = true;
})

可以看到，controller里面定义的是一些函数和变量，这里说一下$scope，每一个controller都有一个对应的$scope，来区分这个controller作用范围下的函数和变量，这样不同的controller中使用同样的函数和变量也不会有名字冲突。上面例子中还用到了$state，这是因为如果需要状态跳转用到$state.go()函数，那么在.controller中一定要有$state，同理，如果要使用$state中的参数，那么.controller中一定要有$stateParams。
对于AngularJS，这个网站有一些好用的ng modulesng modules

HTML页面

ionic的一个好处就是，ionic本身自带了很多适用于App开发的html标签，有助于快速搭建一个App，比如这篇文字中介绍的利用ionic的基本布局。基本布局
另外ionic自带了很多button图标，分为ios和android，可以在官方网站上找到对应的button名称。ionic自带icon
而如果不想用ionic的自带图标，自己做图标然后放在自己的ionic项目里也是可以的，具体参见这篇博文。自定义icon

Icon & Splash

写完整个app，一个精美的app图标和进入软件时的加载页面(splash)可以让app的逼格直接提高一个档次，ionic刚好可以帮助我们自动生成icon和splash。参见官方给出的指导。自动生成icon&splash
其中给出的步骤总结如下：
-在项目的根目录下建一个resources文件夹，在其中放入.ai/.psd/.png格式的文件，即你的icon和splash图像
-命名为icon和splash，一定要这样命名，否则ionic命令无法识别
-使用node.js，用命令行进入项目的根目录，一般也是ionic.project所在的目录
-使用命令 ionic resources 即可自动生成对应的icon和splash，如果只需要生成其中一个的话，在命令行后加上–icon或者–splash

注意，如果要使用splash，需要再ionic项目中安装splash插件。具体步骤就是在VS项目中，打开config.xml文件 在 插件-核心 中找到Splashscreen插件并安装。一般来说安装这个插件之后就可以出现splash画面了，而且，在config.xml文件中还可以设置splash的时间。用第三方的编辑器打开config.xml文件，SplashScreenDelay即是splash页面存在的时间。

"SplashScreenDelay" value="5000" />

测试 & 调试

写完整个app，就需要测试了，之前说了VS自带模拟器可以看在手机上的效果，但是那个模拟器模拟出来的效果一般，也不知道是不是博主电脑显示器的原因。关于测试，官方也有指导文档真机测试，所以官网真的是个好东西。这里再顺便给出官方文档的地址好了，应该能解决很多问题。Ionic Docs
博主自己测试的时候是在node.js下用命令行ionic run android进行的，这也是之前一定要装android-sdk的原因。这个测试需要将手机连在电脑上，并启用开发者调试工具。如果不这么做，也可以先在node.js下使用命令行ionic build android生成apk文件再放在手机上自己安装，生成的apk文件在..\platforms\android\build\outputs\apk目录下。
顺便说一下开发过程中的调试，写html页面最头疼的事情就是调格式了，这里不得不说，Chrome浏览器的Chrome developer tools是个神器，可以直接改CSS和HTML，立刻看到效果。值得注意的是，由于ionic项目本身有一些格式，一般是在ionic.css文件中，这个文件可以在..\www\lib\ionic\css文件夹中看到。由于这个文件的存在，有时候会和我们自己的css设置产生一些冲突，这时候Chrome developer tools的优越性就来了，选中一个HTML元素后，所有加在上面的css格式都可以看到，轻易的找到冲突的css格式，而且能显示是在对应css文件的哪一行。

烦人的Bug

博主在开发过程中遇到两个最后发现很蠢但是解决过程很头疼的Bug。分享给大家，希望大家避免像博主那样浪费时间去搜索答案。

不要用中文！

写html网页不可避免的会用到很多图片，当博主从设计师小伙伴那里拿到图片的时候扫了一下他们的命名，没错，是汉字。虽然博主看着就觉得不习惯，但是因为博主太懒了，所以就直接丢在img文件夹下然后用了，结果懒出事！！build的时候每次都会报下面这个错误：

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':processDebugResources'.
> com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process 'command 'C:\Program Files (x86)\Android\android-sdk\build-tools\23.0.1\aapt.exe'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
Error: Error code 1 for command: cmd with args: /s,/c,"D:\xxxx\platforms\android\gradlew cdvBuildDebug -b D:\xxxx\platforms\android\build.gradle -Dorg.gradle.daemon=true -Pandroid.useDeprecatedNdk=true"

花了几个小时去搜这个bug的解决方案，最后才查到是命名问题，当时找到这个原因的时候既懵逼又觉得理所当然，当时博主拿到中文命名图片的时候就觉得可能不是很规范，结果因为懒得去改名字最后花了更多的时间去解决这个问题，蛋碎。当然，这个锅要甩给设计师^^

图片路径问题

在最后生成apk文件在真机上测试的时候，又发现app内所有的图片都无法显示。这个问题也是花了一些时间才查到，查到的时候发现很多人都出现了这个问题，也都是用ionic的时候出现的。一般在html页面中使用图片的时候，往往图片的源是这样写的

<img ng-src="../img/xxx.png" />

这样问题就来了。通常这个问题在用Visual Studio模拟调试的时候不会出现，甚至当你用用src去指定路径的时候VS还会很贴心的引导你，自动生成这样的路径。这样看起来并没有错，因为对于templates文件夹下的html页面来说，要索引到和templates文件夹平行的img文件夹中的图片就需要这样的路径，但是，如果你用Chrome调试的话，仔细一点就能发现其实我们最终加载页面的时候，我们加载的是index.html页面，而index.html文件是直接位于www文件夹下的！所以索引img文件夹中的图片时，并不需要../，加上../之后反而让app找不到图片。
所以最后的解决方案就是改为

<img ng-src="img/xxx.png" />

来索引图片。

小结

总体来说，ionic还是一个很强大的框架，如果开发一些轻量级的app，ionic是一个不错的选择。使用ionic的前置知识主要就是AngularJS，由于博主也是现学，并没有解除到AngularJS精髓的部分，这里只能分享一点开发过程中解决问题的经验，做一个总结性的回顾，也希望能节省一些初学者的入门时间^^。

---