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

    附效果图:

     

  • 相关阅读:
    C++前置声明的几种方式
    C++中看上去有些奇怪的惯用法:int和bool之间的转换
    在线文档生成工具 mkdocs 使用方法
    对Java前四章的感受
    类与对象的学习之路
    201671010133 201620172 《java程序设计》 初学java!
    神奇的位运算及其简单应用
    mysql 和 mongo db 语法对比
    phpMyAdmin 配置
    mongoDB 基础指令
  • 原文地址:https://www.cnblogs.com/sban/p/4682218.html
Copyright © 2011-2022 走看看