ionic实际上是集大成者,借助了多种技术,自身是一套UI框架,结合PhoneGap实现跨平台移动APP,需要先安装好依赖的程序,比如nodejs, java, ADT, ant, xcode等,并设置好java_home, 添加android sdk tool到环境变量
brew updatebrew install antmac osx 下,打开.bash_profile文件
cd ~open .bash_profile设置相关的Path,mac os x下增加类似下面的内容
export JAVA_HOME=`/usr/libexec/java_home -v 1.8`# androidexport PATH=${PATH}:/Users/macbook/WorkSpace/android-sdk-macosx/platform-tools:/Users/macbook/WorkSpace/android-sdk-macosx/tools
需要首先安装好nodejs,然后通过npm来安装
npm install -g cordova ionic更多请参考官方文档+google http://ionicframework.com/getting-started/
ionic start q-metro
初始目录结构如下
实际上新项目是tabs示例,可以在浏览器中访问 如下效果
自动生成了一堆目录和文件,其中www/目录中是我关心的
<!-- ionic/angularjs js --><script src="lib/ionic/js/ionic.bundle.js"></script><!-- cordova script (this will be a 404 during development) --><script src="cordova.js"></script><!-- your app's js --><script src="js/app.js"></script><script src="js/controllers.js"></script><script src="js/services.js"></script>
<script src="lib/qunee/qunee-min.js"></script>
<body ng-app="app" ng-controller="Metro" animation="slide-left-right-ios7"><ion-header-bar class="bar-dark"><h1 class="title">{{title}}</h1></ion-header-bar><ion-content scroll="false"><div id="canvas" style="width: 100%; height: 100%;"></div></ion-content></body>
angular.module('app', ['ionic']).controller('Metro', function($scope) {$scope.title = "上海地铁图";loadGraph();});function loadGraph(){...//加载地铁图}
先在桌面环境下测试,Chrome运行正常,然后编译成各种移动平台版本,这里以android版本为例
cd q-metroionic platform add androidionic build androidionic run android如果要在虚拟机中测试,可以改用
ionic emulate android
ionic支持多种移动平台,如果希望创建ios可以将"android"改成"ios" 下面是android设备上真机运行界面如下:
联系客服