使用下面的命令创建一个新的项目
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
相关推荐
在使用"ionic-datepicker-oysq"时，首先你需要将这个插件添加到你的项目中。这通常涉及到下载压缩包，然后将其解压到你的项目目录下。根据提供的描述，解压后的文件中应该有一个名为`date.html`的文件，这很可能是...
Angular-ionic-native-http-connection-backend.zip,离子型和iosionic本机http连接后端cors问题的解决方案,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular...
【描述】描述中的 "ionic-app-base-master.zip" 提示我们这是一个已经初始化并设置好的 Ionic 应用的基础项目。通常，这样的项目会包含必要的文件和目录结构，用于快速启动一个新的 Ionic 应用开发。开发者解压后...
当我们结合两者，通过"ionic-sublime-plugin"插件，可以进一步提升对Ionic项目的开发体验。 该插件是专为Sublime Text 2和3设计的，意味着无论你使用的是哪个版本的Sublime，都可以无缝地集成此插件，享受其带来的...
ionic-gallery-modal, 离子库模式( 用于显示所有照片) ：这个项目不再被维护 ！如果你需要一个漂亮的专业图书馆，请使用 photoswipe.js 服务。 Ionic模式它由一个模式组成，它可以帮助你制作画廊预览模式。 上次使用...
【前端开源库-ionic-plugin-build】是一个专注于前端开发的开源项目，主要针对的是Ionic框架的扩展插件，用于优化和简化构建过程。Ionic是一个流行的HTML5移动应用框架，它允许开发者使用Web技术（如HTML、CSS和...
【标题】"前端项目-ionic-filter-bar.zip" 涉及的是一个基于Ionic框架的过滤器栏（filter bar）指令，用于在Ionic应用中创建一个动画化的头栏过滤UI。 【描述】中提到的"A filter directive UI for Ionic apps that...
总结起来，"ionic-cz-conventional-changelog" 是前端开发中一个实用的工具，它为 changelog 的规范化管理提供了便利，与 commitizen 的集成使得提交信息更有序，从而提升了项目的整体质量和专业性。在实践中，掌握...
ngx-ionic-image-viewer 一个Ionic 4 Angular模块，用于查看和缩放图像和照片，而无需任何其他依赖项。演示版|总览先决条件离子> = 4.0.0 角度> = 8.0.0安装npm install --save ngx-ionic-image-viewer用法进口导入...
自从Ionic Framework 4.0版发布以来，我们不再使用Ionic App脚本在Ionic Framework中进行构建。 我们不再积极维护Ionic Framework的第3版。 有关哪些版本处于活动状态的更多信息，请参阅我们的。 因此，我们不再...
【标题】"Ionic-Cordova演示项目" 这个压缩包文件名为"ionic-cordova-demo-master.zip"，暗示它包含了一个基于Ionic和Cordova框架的演示应用程序的源代码。 Ionic是一款流行的开源框架，用于构建高性能的混合移动...
@ ionic-super-tabs / core @ ionic-super-tabs /角度离子2 /离子3 对于Ionic 2 / Ionic 3应用程序，请参阅以获取先前版本的Super Tabs。 ionic2-super-tabs笔记此模块仅通过基于Angular和Stencil的应用程序进行了...
- **创建插件名称**：通过命令行使用Plugman创建新的插件项目。例如，创建一个名为kaErBluetooth的插件，包名为com.shandongkaer.bluetooth，版本为0.0.1，应执行以下命令： ``` plugman create --name ...
总的来说，`ionic-framework-master.zip`文件是一个完整的Ionic Framework项目源代码，包含了构建、开发和部署原生移动应用所需的所有组件。对于学习和理解Ionic的工作原理，以及如何利用它来创建功能丰富的移动应用...
ionic-native-http-connection-backend 该库添加@ionic-native/http （如果可用）作为与Angular的Http和HttpClient的连接后端 动机 现在，Apple促进/要求使用WKWebView而不是不推荐使用的UIWebView ，Ionic已通过其...
**标题解析：** "ionic-best-practices.pdf" 这个标题暗示了文件内容可能是关于Ionic框架的最佳实践指导，特别强调了“5”，这可能是指Ionic框架的第五个主要版本，即Ionic 5。最佳实践通常包括编码规范、设计模式、...
Angular-ionic-forms-and-validations.zip,使用这个Ionic示例应用程序学习如何处理Ionic 3和Angular 4中的表单和验证。在这个精彩的教程中，我们将介绍简单的和自定义的验证，并教您如何处理错误消息。,Angularjs于...
在Ionic项目中使用CoreData，我们需要一个能够桥接JavaScript和Objective-C/Swift的插件，例如`cordova-plugin-ionic-coredata`。安装插件的命令通常为： ``` cordova plugin add cordova-plugin-ionic-coredata ...
Angular-ionic3-start-theme.zip,Ionic3的开始主题有10个页面、模拟数据、提供者示例、存储、HTTP等…Ionic3的开始主题,Angularjs于2016年发布，是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖...
ionic-heroku-button, 用于Heroku的一个单击离子应用程序模板 ionic-heroku-button用于Heroku的一个单击离子应用程序模板在本地部署确保安装了 node.js 插件和 Heroku Toolbelt插件。git clone git@github....