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
<body ng-app="starter"> <div ng-include="‘index.ng.html‘"></div> </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:[email protected]://github.com/meteor/cordova-plugin-inappbrowser/tarball/8012ae709bb749eaad434c05cd7e2aeda8f3a425
其中tarball/后面是SHA1，在github的每次提交中可以查看到：
可以直接点图标copy。
6，移除cordova plugin的语法
meteor remove cordova:org.apache.cordova.inappbrowser
7，inappbrower的用法
详见https://github.com/meteor/cordova-plugin-inappbrowser
附效果图：
时间： 2024-10-06 06:35:35