zoukankan      html  css  js  c++  java
  • 在meteor中如何使用ionic组件tabs,及如何添加使用cordova plugin inappbrower

    更新框架:

    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

    附效果图:

     

  • 相关阅读:
    self 和 super 关键字
    NSString类
    函数和对象方法的区别
    求两个数是否互质及最大公约数
    TJU Problem 1644 Reverse Text
    TJU Problem 2520 Quicksum
    TJU Problem 2101 Bullseye
    TJU Problem 2548 Celebrity jeopardy
    poj 2586 Y2K Accounting Bug
    poj 2109 Power of Cryptography
  • 原文地址:https://www.cnblogs.com/sban/p/4682218.html
Copyright © 2011-2022 走看看