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

时间:2021-07-09 19:38:48

更新框架:

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的每次提交中可以查看到:

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

可以直接点图标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

附效果图:

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