开发手机APP的神器 --- ionic

最新推荐文章于 2024-10-11 16:44:14 发布

weixin_30673611

最新推荐文章于 2024-10-11 16:44:14 发布

阅读量155

点赞数

文章标签： ui 移动开发测试

原文链接：http://www.cnblogs.com/2502778498spw/p/7748294.html

版权

前言

　　　在如今的生活中，手机已经与我们的生活紧紧的联系在了一起。而手机APP更是其中，重要的一环。今天，影子就为大家介绍一种开发手机APP的超级神器---ionic。

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。

ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。

1、 ionic 特点

1.ionic 基于Angular语法，简单易学。
2.ionic 是一个轻量级框架。
3.ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。
4.ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。
5.ionic 专注原生，让你看不出混合应用和原生的区别
6.ionic 提供了强大的命令行工具。
7.ionic 性能优越，运行速度快。

1、学习ionic之前需要准备的基础知识

html5
css
js
Angularjs

3、 ionic中的路由

当用户在你的app中浏览时，ionic能够检测到浏览历史。通过检测浏览历史，实现向左或向右滑动时可以正确转换视图。

采用AngularUI路由器模块等应用程序接口可以分为不同的$state(状态)。Angular的核心为路由服务，URLs可以用来控制视图。

AngularUI路由提供了一个更强大的状态管理，即状态可以被命名，嵌套，以及合并视图，允许一个以上模板呈现在同一个页面。

此外，每个状态无需绑定到一个URL，并且数据可以更灵活地推送到每个状态。

简单点来说，就是一个窗口就是一个$state(状态)；

3.1每个 $state之间的关系

3.2实例讲解

首先，页面的跳转可分为，同文件跳转和外部文件引入；

同文件跳转：

　　　　没一页的代码都写在一个<script></script?标签中

外部文件引入：

　　将不同页面的代码写在一个独立的html文件中；

创建 tab按钮，也就是主页

<script id="templates/tabs.html" type="text/ng-template"> <ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="Home" icon="ion-home" href="#/tab/home"> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> <ion-tab title="About" icon="ion-ios-information" href="#/tab/about"> <ion-nav-view name="about-tab"></ion-nav-view> </ion-tab> <ion-tab title="Contact" icon="ion-ios-world" href="#/tab/contact><!--"ui-sref="tabs.contact"--> <ion-nav-view name="contact-tab"></ion-nav-view> </ion-tab> </ion-tabs> </script>

注：

　1、　给<script></script>标签起一个id名，用于后面的路由配置；格式必须严格：

　　　　　-------　id="templates/tabs.html"；

2、将href属性值写为路由格式： "#/tab/标记"；

　 3、<ion-view > </ion-view>标签用于显示页面内容。相当于AngularJS中的<ng-view></ng-view>

tab按钮对应页面的构建

 <script id="templates/home.html" type="text/ng-template"> <ion-view view-title="Home"> </ion-view> </script>

注：

　　同样的，id用于路由配置，、<ion-view > </ion-view>标签用于显示页面内容。

路由配置

var app = angular.module('myApp', ['ionic']);
app.config(function($stateProvider) {
  $stateProvider
  .state('index', {
    url: '/',
    templateUrl: 'home.html'
  })
  .state('music', {
    url: '/music',
    templateUrl: 'music.html'
  });
});

注：

在module中，必须注入ionic文件，在ionic中，ionic文件时最基础的依赖文件，所有的代码实现，都是建立在此基础之上的；

.state参数：

　　1、参数1：路由的名字，表示tabs下的子视图。这个路由定义了，这个路由的视图是在‘home’或index“”这个tab的视图里面绘制的。

　　2、url：路由标记读取；如：href="#/tab/home" ---- 取 /home;

　　　　注意：“/”: 表示主页；

　　3、templateUrl：设置，当前页面的绘制代码位置；

注意：

　　上面的第一个.state是设置主页；其中templateUrl：设置的是页面刷新时，显示的页面。

　　上述三点中的名称必须相互对应，否则会出错；

完整代码

<!DOCTYPE html>
<html > <head> <meta charset="UTF-8"> <title>share</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <link rel="stylesheet" type="text/css" href="css/ionic.min.css"/> <!-- tabs ↙ ↘ tab tab ↓ ↓ view…… view…… 1、做底导航 2、添加跳转 ①、给导航外加script标签 ②、给相应页面写代码，script标签内 ③、给相对应页面添加state 3. 将href改写为路由格式。 -- "#/tab/标记" 4. 在config配置阶段，注入$routeProvider，进行路由配置： --> </head> <body ng-app="app" ng-controller="ctrl"> <!--自动将view-title的值，设为标题--> <ion-nav-bar class="bar-positive"> <!--返回按钮，默认在子页时显示--> <ion-nav-back-button></ion-nav-back-button> </ion-nav-bar> <!-- 不能省略，tabs显示区域 默认范围为满屏 --> <ion-nav-view ></ion-nav-view> <!--底部--> <!--没有写home页之前，不要写↓，在写了home也之后，再写↓。并且，写一个也，要相对应的写state--> <script id="templates/tabs.html" type="text/ng-template"> <ion-tabs class="tabs-icon-top tabs-positive"> <ion-tab title="Home" icon="ion-home" href="#/tab/home"> <!--将href改写为路由格式。 -- "#/tab/标记"--> <!--子视图显示区域--> <ion-nav-view name="home-tab"></ion-nav-view> </ion-tab> <ion-tab title="About" icon="ion-ios-information" href="#/tab/about"> <ion-nav-view name="about-tab"></ion-nav-view> </ion-tab> <ion-tab title="Contact" icon="ion-ios-world" href="#/tab/contact><!--"ui-sref="tabs.contact"--> <ion-nav-view name="contact-tab"></ion-nav-view> </ion-tab> </ion-tabs> </script> <!--home页--> <!-- 跳转方式： ①、同一文件跳转，将代码写在script标签中，并以 id="templates/home.html"形式起id名，用作跳转路径 ②、不同文件跳转，代码写在<ion-view title="Contact"></ion-view>标签中 --> <script id="templates/home.html" type="text/ng-template"> <ion-view view-

转载于:https://www.cnblogs.com/2502778498spw/p/7748294.html