Ionic Tips

环境配置

  1. 正常配置中文版官方地址,不多说了
  2. 异常情况:
    安装过程中出现,没有安装Python错误,所以需要安装Python.
    出现VC++环境错误,需要安装VS2015.

分析ionic导航过程

官方例子:地址

<html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>菜鸟教程(runoob.com)</title>
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
    <script type="text/javascript">
      angular.module('ionicApp', ['ionic'])

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

      $stateProvider
        .state('tabs', {
          url: "/tab",
          abstract: true,
          templateUrl: "templates/tabs.html"
        })
        .state('tabs.home', {
          url: "/home",
          views: {
            'home-tab': {
              templateUrl: "templates/home.html",
              controller: 'HomeTabCtrl'
            }
          }
        })
        .state('tabs.facts', {
          url: "/facts",
          views: {
            'home-tab': {
              templateUrl: "templates/facts.html"
            }
          }
        })
        .state('tabs.facts2', {
          url: "/facts2",
          views: {
            'home-tab': {
              templateUrl: "templates/facts2.html"
            }
          }
        })
        .state('tabs.about', {
          url: "/about",
          views: {
            'about-tab': {
              templateUrl: "templates/about.html"
            }
          }
        })
        .state('tabs.navstack', {
          url: "/navstack",
          views: {
            'about-tab': {
              templateUrl: "templates/nav-stack.html"
            }
          }
        })
        .state('tabs.contact', {
          url: "/contact",
          views: {
            'contact-tab': {
              templateUrl: "templates/contact.html"
            }
          }
        });


       $urlRouterProvider.otherwise("/tab/home");

    })

    .controller('HomeTabCtrl', function($scope) {
      console.log('HomeTabCtrl');
    });
    </script>
  </head>

  <body>
    
    <ion-nav-bar class="bar-positive">
      <ion-nav-back-button>
      </ion-nav-back-button>
    </ion-nav-bar>
             
    <ion-nav-view></ion-nav-view>


    <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" ui-sref="tabs.contact">
          <ion-nav-view name="contact-tab"></ion-nav-view>
        </ion-tab>

      </ion-tabs>
    </script>

    <script id="templates/home.html" type="text/ng-template">
      <ion-view view-title="Home">
        <ion-content class="padding">
          <p>
            <a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
          </p>
        </ion-content>
      </ion-view>
    </script>

    <script id="templates/facts.html" type="text/ng-template">
      <ion-view view-title="Facts">
        <ion-content class="padding">
          <p>Banging your head against a wall uses 150 calories an hour.</p>
          <p>Dogs have four toes on their hind feet, and five on their front feet.</p>
          <p>The ant can lift 50 times its own weight, can pull 30 times its own weight and always falls over on its right side when intoxicated.</p>
          <p>A cockroach will live nine days without it's head, before it starves to death.</p>
          <p>Polar bears are left handed.</p>
          <p>
            <a class="button icon ion-home" href="#/tab/home"> Home</a>
            <a class="button icon icon-right ion-chevron-right" href="#/tab/facts2">More Facts</a>
          </p>
        </ion-content>
      </ion-view>
    </script>

    <script id="templates/facts2.html" type="text/ng-template">
      <ion-view view-title="Also Factual">
        <ion-content class="padding">
          <p>111,111,111 x 111,111,111 = 12,345,678,987,654,321</p>
          <p>1 in every 4 Americans has appeared on T.V.</p>
          <p>11% of the world is left-handed.</p>
          <p>1 in 8 Americans has worked at a McDonalds restaurant.</p>
          <p>$283,200 is the absolute highest amount of money you can win on Jeopardy.</p>
          <p>101 Dalmatians, Peter Pan, Lady and the Tramp, and Mulan are the only Disney cartoons where both parents are present and don't die throughout the movie.</p>
          <p>
            <a class="button icon ion-home" href="#/tab/home"> Home</a>
            <a class="button icon ion-chevron-left" href="#/tab/facts"> Scientific Facts</a>
          </p>
        </ion-content>
      </ion-view>
    </script>

    <script id="templates/about.html" type="text/ng-template">
      <ion-view view-title="About">
        <ion-content class="padding">
          <h3>Create hybrid mobile apps with the web technologies you love.</h3>
          <p>Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components for building highly interactive apps.</p>
          <p>Built with Sass and optimized for AngularJS.</p>
          <p>
            <a class="button icon icon-right ion-chevron-right" href="#/tab/navstack">Tabs Nav Stack</a>
          </p>
        </ion-content>
      </ion-view>
    </script>

    <script id="templates/nav-stack.html" type="text/ng-template">
      <ion-view view-title="Tab Nav Stack">
        <ion-content class="padding">
          <p>![](http://upload-images.jianshu.io/upload_images/568603-9ee06a777072b35c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
        </ion-content>
      </ion-view>
    </script>

    <script id="templates/contact.html" type="text/ng-template">
      <ion-view title="Contact">
        <ion-content>
          <div class="list">
            <div class="item">
              @IonicFramework
            </div>
            <div class="item">
              @DriftyTeam
            </div>
          </div>
        </ion-content>
      </ion-view>
    </script>

  </body>
</html>
  1. 项目启动首次执行config配置信息,通过路由执行到$urlRouterProvider.otherwise("/tab/home"); 其中"/tab/home"就是url地址
  2. 加载url为tab的页面(这个不会单独显示,这里为了便于理解),执行里面的templateUrl地址tabs.html
  3. 加载完毕后,再找下面的home
.state('tabs.home', 
  { url: "/home", 
    views: { 'home-tab': 
                  { templateUrl: "templates/home.html", 
                    controller: 'HomeTabCtrl' 
                  } 
              } 
  })

首先看到state为tabs.home所以url完整地址为:state为tabs中url + 自己的url 即为/tab/home, 就是我们要找的地址,然后就会显示templateUrl地址home.html,显示到<body>标签中的<ion-nav-view>

  1. 当点击底部tab的时候,对应的href为 href="#/tab/home",就会跳转到这个地址,地址查找和前面一样,这里要注意的是<ion-nav-view name="home-tab"></ion-nav-view> 这个view的name和
.state('tabs.home', 
    { url: "/home", 
      views: { 'home-tab': 
                    { templateUrl: "templates/home.html", 
                      controller: 'HomeTabCtrl' 
                    } 
                } 
    })

中的views中的'home-tab'是对应的,不一样的话也是显示不出来的

  1. state中的controller也是要定义的,然后会报错找不到。

Ionic 路由页面间传递复杂参数 !!!

Router跳转:参考链接

  1. 但是这里要说的是传递对象,传递对象其实用JavaScript的序列化就可以了,和传递字符串一样的方式!(必须是抽象类的实现类才可以!!!)
  2. 如果两个View公用同一个service,就可以在service里面设置set ,get 函数来传递参数.

Ionic生命周期

Controller生命周期:参考blog

Ionic分页加载更多

List加载更多:参考链接

Ionic无限轮播

  1. 不显示问题
    如题所示:
  <ion-slide-box slide-interval='2000' auto-play='true' does-continue='true' style="height: 150px">  
    <ion-slide ng-repeat="item in infoList track by $index"> 
      <div class="box blue">
        <img ng-src={{item}} width="100%">
      </div>  
    </ion-slide>
  </ion-slide-box>

HTML中infoList是从后台得到的url数组,但是这样不显示,一定要添加$ionicSlideBoxDelegate,然后拿到数组以后,手工渲染一下$ionicSlideBoxDelegate.update(); 就可以了!!!

  1. 无限循环问题
    这样做了以后就会出现,轮播图从第一个滚动到最后一个然后不动了,就是不会循环播放,所以在最后还需要加上$ionicSlideBoxDelegate.loop(true); 来实现!!!
  2. 去其他页面在返回,轮播图不会动了
    1.初次进来的时候
  $ionicSlideBoxDelegate.$getByHandle('my-handle').update();
  $ionicSlideBoxDelegate.$getByHandle('my-handle').loop(true);
  $ionicSlideBoxDelegate.$getByHandle('my-handle').start();

2.再次返回的时候

$ionicSlideBoxDelegate.$getByHandle('my-handle').next();

Ionic打电话

  1. 首先在config.xml中配置<access origin="tel:*" launch-external="yes" />
    然后Android就可以打电话了,但是IOS不可以

  2. 还要在config.xml中配置<allow-navigation href="*" />
    这样ios也可以打电话了,完美解决!

Ionic 数据库PouchDB + SQLite

参考链接:
ionic 通过PouchDB + SQLite来实现app的本地存储(Local Storage)
完全按照官方文档步骤就行了,链接
Ionic SQLite原生说明链接
原生操作Demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,012评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,628评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,653评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,485评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,574评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,590评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,596评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,340评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,794评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,102评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,276评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,940评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,583评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,201评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,441评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,173评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,136评论 2 352

推荐阅读更多精彩内容