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

能够直接点图标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

附效果图：