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

時間 2019-11-20

標籤 meteor 如何使用 ionic 組件 tabs 添加 cordova plugin inappbrower 欄目 Cordova 简体版

原文原文鏈接

更新框架：html

meteor update ios

meteor框架的優勢不言而喻，它大大減輕了App先後端開發的負擔，今年5月又得到B輪2000萬融資，表明了市場對它一個免費、開源開發框架的確定。cordova的優勢就是插件多，ionic的優勢是UI漂亮而且性能是目前hybird框架中最好的，本文涉及到的技術爲做者所用，簡述meteor+cordova+ionic的整合方法。git

1，建立項目github

meteor create projectNameapache

cd [projectName]後端

meteor add urigo:angularapp

meteor add urigo:ionic框架

2，[projectName].htmlionic

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

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

3，tags.ng.htmlide

<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的每次提交中能夠查看到：