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

前言

　　　在如今的生活中，手机已经与我们的生活紧紧的联系在了一起。而手机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-title="Home">

        <ion-content class="padding">

            <ul>

                <li> <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">新闻1</a></li>

                <li><a class="button icon icon-right ion-chevron-right" href="#/tab/facts">新闻1</a></li>

                <li><a class="button icon icon-right ion-chevron-right" href="#/tab/facts">新闻1</a></li>

            </ul>

        </ion-content>

      </ion-view>

    </script>

<!--详情页-->

    <script id="templates/detail.html" type="text/ng-template">

      <ion-view view-title="详情页">

        <ion-content class="padding">

          <p>这是新闻一</p>

          <p>

            <a class="button icon ion-home" href="#/tab/home"> Home</a>

          </p>

        </ion-content>

      </ion-view>

    </script>

      <!--about页-->

    <script id="templates/about.html" type="text/ng-template">

      <ion-view view-title="About">

        <ion-content class="padding">

          <h3>about页</h3>

        </ion-content>

      </ion-view>

    </script>

      <!--contact-->

<script id="templates/contact.html" type="text/ng-template">

      <ion-view title="Contact">

       <ion-content class="padding">

          <h3>联系电话：110</h3>

        </ion-content>

      </ion-view>

    </script>

    </body>

    <script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        angular.module("app",["ionic"])

        .config(function($stateProvider, $urlRouterProvider) {

            /*

                 $stateProvider：进行路由配置：处理路由状态的服务，路由的状态反映了该项在应用程序中的位置

             * $urlRouterProvider ：当你访问链接的时候没有携带任何的路由信息，那系统会自动访问otherwise配置的路由

             *

             * */

       $stateProvider

        .state('tabs', {   //主页

        url: "/tab",

        abstract: true,

          templateUrl: "templates/tabs.html"  //定义主页路径

        })

       .state('tabs.home', {  //路由的名字，表示tabs下的子视图。这个路由定义了，这个路由的视图是在‘tabs.home’这个tab的视图里面绘制的。

          url: "/home",        //href标记读取

          views: {

            'home-tab': {  //子视图的名字，必须与(导航栏)<ion-nav-view name="about-tab"></ion-nav-view>  name 相同

              templateUrl: "templates/home.html",  // id名，也是要显示的页面路径

              //controller: 'ctrl'    //可有可无

            }

          }

        })

        .state('tabs.detail', {

          url: "/facts",

          views: {

            'home-tab': {

              templateUrl: "templates/detail.html"

            }

          }

        })

        .state('tabs.about', {

          url: "/about",

          views: {

            'about-tab': {

              templateUrl: "templates/about.html"

            }

          }

        })

        .state('tabs.contact', {

          url: "/contact",

          views: {

            'contact-tab': {

//            templateUrl: "contact.html" //跳转

              templateUrl: "templates/contact.html" //同文档跳转，同时存在会覆盖上面的

            }

          }

        });

       $urlRouterProvider.otherwise("/tab/home"); //例如：将about的路由.state屏蔽,在about也刷新，将显示home页

    })

        .controller("ctrl",function($scope){

            //alert("home");

        })

    </script>

</html>

效果图

4 ionic中的数据请求

ionic中的数据请求与AngularJS中的$http 相似；在这里，影子就以下拉刷新为例，给大家分享下，ionic的数据请求方式；

HTML代码

 <ion-content class="has-header">

                <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()">

                </ion-refresher>

                <ion-list>

                    <ion-item ng-repeat="item in items" ng-bind="item.name">

                    </ion-item>

                </ion-list>

            </ion-content>

注：

1、pulling-text属性：下拉时，在下拉区域显示的提示文字；

2、on-refresh事件:在页面下拉时自动触发的事件；在这个时候，我们可进行对数据的请求和操作；

JS代码

 $scope.items=[

                {

                    "name":"HTML5",

                },

                {

                    "name":"JavaScript",

                },

                {

                    "name":"Css3",

                }

            ];

            $scope.doRefresh = function() {

                $http.get('h51701.json')  //注意改为自己本站的地址，不然会有跨域问题

                    .success(function(data) {

                        $scope.items = data;//各种使用规则同 Angular JS

                    })

                    .finally(function() {

                        $scope.$broadcast('scroll.refreshComplete');//下拉后复位

                    });

            };

注：

　　这里，影子用自己编写的json文件代替服务器数据；

1、使用$http();请求h51701.json文件中的数据。并将数据进行打印。

2、$scope.items数组，表示的是页面刷新前的数据。

3、 $scope.items = data;

--- 刷新时，将请求得到的数据，赋给$scope.items数组，再利用ionic数据双向绑定的特性，将数据实时打印出来。

4、 $scope.$broadcast('scroll.refreshComplete');

　　　　　　---- 页面刷新完成以后，将页面复位。

完整代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>下拉刷新</title>

        <link rel="stylesheet" type="text/css" href="css/ionic.min.css"/>

    </head>

    <body ng-app="starter" ng-controller="actionsheetCtl" >

            <div class="bar bar-header bar-positive">

              <h1 class="title">下拉刷新</h1>

            </div>

            <ion-content class="has-header">

                <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()">

                </ion-refresher>

                <ion-list>

                    <ion-item ng-repeat="item in items" ng-bind="item.name+item.ageitem.hobby">

                    </ion-item>

                </ion-list>

            </ion-content>

    </body>

    <script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>

    <script type="text/javascript">

        angular.module('starter', ['ionic'])

        .controller( 'actionsheetCtl',function($scope,$timeout,$http){

            //默认显示内容

            $scope.items=[

                {

                    "name":"HTML5",

                },

                {

                    "name":"JavaScript",

                },

                {

                    "name":"Css3",

                }

            ];

            $scope.doRefresh = function() {

                $http.get('h51701.json')  //注意改为自己本站的地址，不然会有跨域问题

                    .success(function(data) {

                        $scope.items = data;//各种使用规则同 Angular JS

                    })

                    .finally(function() {

                        $scope.$broadcast('scroll.refreshComplete');//下拉后复位

                    });

            };

        })

    </script>

</html>

效果图

好了，今天影子要分享的内容就到这里结束了；希望大家能够喜欢，也希望大家多多支持影子!!!!!