在meteor中如何使用ionic组件tabs，及如何添加使用cordova plugin inappbrower

时间：2015-07-31 18:11:58 阅读：341 评论：0 收藏：0 [点我收藏+]

标签：

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

<body ng-app="starter">
  <div ng-include="‘index.ng.html‘"></div>
</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

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

技术分享