更新框架:
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
附效果图: