`

创建ionic项目q-metro

    博客分类：
  • app
 
阅读更多

使用下面的命令创建一个新的项目
ionic start q-metro

此时默认创建一个ionic start q-metro tabs

也可以通过下面命令创建

$ ionic start myApp blank

$ ionic start myApp sidemenu


ionic项目结构
自动生成了一堆目录和文件，其中www/目录中是我关心的

 
index.html结构

首先看index.html，是主页面，里面引入了angularjs， cordova等js支持，此外还有app.js, controllers.js, services.js三个文件，这三个文件构建了app的应用逻辑，app是主程序，包含一些设置和启动脚本，services是数据支持部分，也就是model部分，用于提供数据的增删改查操作，controllers用于控制，包含业务逻辑控制代码，因为本文目的是使用qunee创建移动版的地铁图，更多业务操作留给读者自己研究，所以js结构上并不涉及到设计模式的所有层面，我们将创建一个简单的引导直接在app.js中实现数据呈现

 

<!-- 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>

 

 

  引入qunee开发包
<script src="lib/qunee/qunee-min.js"></script>

 

修改index.html

 

<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>

 

 

编译测试

先在桌面环境下测试，Chrome运行正常，然后编译成各种移动平台版本，这里以android版本为例

cd q-metro
ionic platform add android
ionic build android
ionic run android

 如果要在虚拟机中测试，可以改用

ionic emulate android

 ios

$ ionic start myApp tabs
$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

 

 

  • 大小: 11.1 KB
分享到：
| nodejs+phonegap+ionic环境搭建并创建项目
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics