更新框架：

meteor update

meteor框架的优点不言而喻，它大大减轻了App前后端开发的负担，今年5月又获得B轮2000万融资，代表了市场对它一个免费、开源开发框架的肯定。cordova的优点就是插件多，ionic的优点是UI漂亮并且性能是目前hybird框架中最好的，本文涉及到的技术为作者所用，简述meteor+cordova+ionic的整合方法。

1，创建项目

meteor create projectName

cd [projectName]

meteor add urigo:angular

meteor add urigo:ionic

2，[projectName].html

<head>
    <title>ionic todo example</title>
</head>

<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>

3，tags.ng.html

<ion-tabs class="tabs-positive tabs-icon-only">

    <ion-tab title="Home" href="#/tab/home" icon-on="ion-ios-filing" icon-off="ion-ios-filing-outline">

        <ion-nav-view name="home-tab"></ion-nav-view>

        <!-- Tab 1 content -->

    </ion-tab>

    <ion-tab title="About"  href="#/tab/home2" icon-off="ion-ios-pulse" icon-on="ion-ios-pulse-strong" >

        <ion-nav-view name="home-tab2"></ion-nav-view>

        <!-- Tab 2 content -->

    </ion-tab>

</ion-tabs>

4，states config code

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

        $stateProvider

            .state('tabs', {

                url: "/tab",

                abstract: true,

                templateUrl: "tabs.ng.html"

            })

            .state('tabs.home', {

                url: "/home",

                views: {

                    'home-tab': {

                        templateUrl: "home.ng.html",

                        controller: 'HomeTabCtrl'

                    }

                }

            })

            .state('tabs.home2', {

                url: "/home2",

                views: {

                    'home-tab2': {

                        templateUrl: "home2.ng.html"

                    }

                }

            });

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

    })

5，app init的代码

if (Meteor.isClient) {

    var app = angular.module('starter', [

        'angular-meteor',

        'ui.router',

        'ionic'

    ]);

...

6，添加inappbrower plugin

meteor add cordova:org.apache.cordova.inappbrowser@https://github.com/meteor/cordova-plugin-inappbrowser/tarball/8012ae709bb749eaad434c05cd7e2aeda8f3a425

格式：meteor add cordova:pluginName@https://github.com/myName/prjName/tarball/SHA-ID

其中tarball/后面是SHA1，在github的每次提交中可以查看到：

可以直接点图标copy。

meteor add-platform ios

meteor run ios

6，移除cordova plugin的语法

meteor remove cordova:org.apache.cordova.inappbrowser

7，inappbrower的用法

详见https://github.com/meteor/cordova-plugin-inappbrowser

示例源码：http://vdisk.weibo.com/s/ao-ZYIoZdaz86

附效果图：

在meteor中如何使用ionic组件tabs，及如何添加使用cordova plugin inappbrower的更多相关文章

  1. Yii Framework 开发教程Zii组件-Tabs示例

    有关Yii Tab类: http://www.yiichina.com/api/CTabView http://www.yiichina.com/api/CJuiTabs http://blog.cs ...

  2. [.Net Core] 在 Mvc 中简单使用日志组件

    在 Mvc 中简单使用日志组件 基于 .Net Core 2.0,本文只是蜻蜓点水,并非深入浅出. 目录 使用内置的日志组件 简单过渡到第三方组件 - NLog 使用内置的日志 下面使用控制器 Hom ...

  3. ionic的tabs

    <ion-tabs class="tabs-icon-top/bottom(决定这个tabs是置于上面还是底部)  tabs-color-active-positive(图标与字体色) ...

  4. 一个Angular模块中可以声明哪些组件？

    一个Angular模块中可以声明哪些组件? (1) controller        控制器 (2) directive                指令 (3) function         ...

  5. C#操作word或excel及水晶报表，检索 COM 类工厂中 CLSID 为 {} 的组件时失败，原因是出现以下错误: 80070005

    解决办法一:<转自http://www.cnblogs.com/Sue_/articles/2123372.html> 具体解决方法如下: 1:在服务器上安装office的Excel软件. ...

  6. .net开发中常用的第三方组件

    .net开发中常用的第三方组件 2013-05-09 09:33:32|  分类: dotnet |举报 |字号 订阅     下载LOFTER 我的照片书  |   RSS.NET.dll RSS. ...

  7. HTML5 UI框架Kendo UI Web中如何创建自定义组件（二）

    在前面的文章<HTML5 UI框架Kendo UI Web自定义组件(一)>中,对在Kendo UI Web中如何创建自定义组件作出了一些基础讲解,下面将继续前面的内容. 使用一个数据源 ...

  8. Delphi 在线程中如何使用TClientSocket组件并自动检测该组件

    在线程中如何使用TClientSocket组件并自动检测该组件的事件?我想在一个线程中动态创建一个TClientSocket组件,并要求该组件能够自动检测Socket事件(例如OnRead.OnErr ...

  9. SSIS中执行SQL任务组件参数传递的问题

    原文:SSIS中执行SQL任务组件参数传递的问题 症状: 执行SQL任务,传递参数到子查询中,执行报错. 错误: 失败,错误如下:"无法从使用 sub-select 查询的 SQL 语句中派 ...

随机推荐

  1. Socket连接

    socket中TCP的三次握手建立连接详解 我们知道tcp建立连接要进行“三次握手”,即交换三个分组.大致流程如下: 客户端向服务器发送一个SYN J 服务器向客户端响应一个SYN K,并对SYN J ...

  2. 【Hibernate 5】继承映射配置及多态查询

    一.继承实现的三种策略 1.1,单表继承.每棵类继承树使用一个表(table per class hierarchy) -->本文主要介绍的继承策略 类继承树对应多个类,要把多个类的信息存放在一 ...

  3. SVN与TortoiseSVN实战：标签与分支

    最近在写<IOS性能调优系列>,今天偷个懒,写写SVN与TortoiseSVN实战的第二篇,标签与分支. 第一篇详见<SVN与TortoiseSVN实战:从入门到精通> SVN ...

  4. solr5.5教程－schema.xml部分配置

    本文章全部内容均翻译自solr自带的配置文件. 1.Field结点说明 name: 必须的,field的名字 type:        必须的,fieldType部分所定义的type的名字 index ...

  5. leetcode 8

    string类型转换为int类型,需要考虑不同的转换情况. “   04”  转换结果   4: “   4   43”  转换结果  4: “a@12 ”   转换结果    0: “12a”   ...

  6. CSS3 background-size图片自适应

    转自:http://www.html5cn.com.cn/css3/2013-04-21/267.html: background-size属性和background-origin属性.backgro ...

  7. hdu2099

    注意是两位数,必须输出01,02,03,这种 #include <stdio.h> int main(){ int begin,end; int i; ]; int cnt; int si ...

  8. 一款简单射击游戏IOS源码

    源码描述: 一款基于cocos2d的简单设计游戏,并且也是一款基于cocos2d的简单射击游戏(含苹果IAD广告), 游戏操作很简单,哪个数字大就点击射击哪个.里面有苹果iad广告,功能简单完整,适合 ...

  9. 在Eclipse中查看JDK类库的源代码

    http://blog.csdn.net/a81895898/article/details/8486802 在Eclipse中查看JDK类库的源代码!!! 设置: 1.点 “window”-> ...

  10. Linux搭建NFS提供磁盘给Windows使用

    在Windows2008系统下设置挂载Linux服务器磁盘 一.系统环境 系统平台:CentOS release 5.8 (Final) NFS Server IP:X....X...153.157 ...