在meteor中如何使用ionic元件tabs，及如何新增使用cordova plugin inappbrower

石橋碼農發表於2015-07-31
元件PluginAPP

更新框架：

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

附效果圖：

 

 

相關文章