最近公司准备开发门店收银系统，是基于IPAD的程序，决定采用基于 Ionic + Cordova + AngularJS技术混合开发模式。

准备

一台mac（安装了mac os的虚拟机也可以），nodejs，ionic，xcode

安装

1，安装nodejs

到官网下载nodejs安装包（pkg文件），需要0.10.＊及以下的版本，高版本会有很多插件不可用。我使用的版本是v0.10.38（下载地址：http://nodejs.org/dist/v0.10.38/ ） ，下载完成之后直接打开按提示安装即可。

安装成功后，在Launchpad中打开终端，输入命令npm：


koala:~dev$npmUsage:npm<command>where<command>isoneof:add-user,adduser,apihelp,author,bin,bugs,c,cache,completion,config,ddp,dedupe,deprecate,docs,edit,explore,faq,find,find-dupes,get,help,help-search,home,i,info,init,install,isntall,issues,la,link,list,ll,ln,login,ls,outdated,owner,pack,prefix,prune,publish,r,rb,rebuild,remove,repo,restart,rm,root,run-script,s,se,search,set,show,shrinkwrap,star,stars,start,stop,submodule,t,tag,test,tst,un,uninstall,unlink,unpublish,unstar,up,update,v,version,view,whoaminpm<cmd>-hquickhelpon<cmd>npm-ldisplayfullusageinfonpmfaqcommonlyaskedquestionsnpmhelp<term>searchforhelpon<term>npmhelpnpminvolvedoverviewSpecifyconfigsintheini-formattedfile:/Users/giti/.npmrcoronthecommandlinevia:npm<command>--keyvalueConfiginfocanbeviewedvia:npmhelpconfignpm@1.4.28/usr/local/lib/node_modules/npm


出现上述信息，表示nodejs安装成功。


2， 安装cordova


$sudonpminstall-gcordova


3，安装ionic

$sudonpminstall-gionic

4，安装ios-sim

$sudonpminstall-gios-sim



测试app


ionic官网为开发者提供了多个开发模板，如默认的Tab模板（页面基于类似微信的Tab组织，使用了ionTab指令），Sidemenu模板等


创建基于Tab模板的应用

$ionicstartmyApp1

控制台输出

$ionicstartmyApp1Runningstarttask...CreatingIonicappinfolder/Users/zhangxitao/myApp1basedontabsprojectDOWNLOADING:https://github.com/driftyco/ionic-app-base/archive/master.zipDOWNLOADING:https://github.com/driftyco/ionic-starter-tabs/archive/master.zipInitializingcordovaproject.Fetchingplugin"org.apache.cordova.device"viapluginregistryFetchingplugin"org.apache.cordova.console"viapluginregistryFetchingplugin"https://github.com/driftyco/ionic-plugins-keyboard"viagitclone

可以看到创建模板应用就是从git上下载ionic框架的代码，然后通过cordova命令初始化cordova工程，接着添加了Device，console log，keyboard等的插件，最后一个插件ionic-plugins-keyboard使用ionic开发的，提供了软键盘事件的js层通知，在android上很有用。

添加ios原生代码，其实就是调用了cordova platform add ios，当然这边要在mac上做了，并且需要安装了xcode

$ionicplatformaddiosRunningplatformtask...AddingplatformiosCreatingiosproject...Installing"com.ionic.keyboard"foriosInstalling"org.apache.cordova.console"foriosInstalling"org.apache.cordova.device"forios在模拟器上运行一下创建的应用吧


$ionicruniosRunningruntask...RunningapponplatformiosRunningcommand:/Users/zhangxitao/myApp1/platforms/ios/cordova/runNodeviceisconnected,tryingSimulator.Buildsettingsfromcommandline:ARCHS=i386CONFIGURATION_BUILD_DIR=/Users/zhangxitao/myApp1/platforms/ios/build/emulatorSDKROOT=iphonesimulator7.1VALID_ARCHS=i386===BUILDTARGETCordovaLibOFPROJECTCordovaLibWITHCONFIGURATIONDebug===


如果最后是成功状态，会在iphone模拟器上启动应用，界面是扁平风格的，很漂亮吧