因为需要参加一个设计类的比赛,需要演示一下设计的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,所以开发的过程中只能先学,到现在其实也只是懂一点皮毛,这里只分享一些学习过程中找到的不错的学习资料,希望能有所帮助。
-一个系