在meteor中如何使用ionic组件tabs,及如何添加使用cordova plugin inappbrower
2015-07-31 17:15
615 查看
更新框架:
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
3,tags.ng.html
4,states config code
5,app init的代码
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
附效果图:
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
附效果图:
相关文章推荐
- ios开发学习1:开发的方法(转)
- Android 环境的搭建(一)
- 【Android应用开发技术:应用组件】应用组件基本原理
- android带删除按钮的编辑框
- Android 选项卡功能的实现
- Object类
- UNITY3D学习笔记10
- 微信获取用户基本信息
- iOS 锁屏强制切换屏幕的方向
- 【Android应用开发技术:用户界面】用户界面基本原理
- Flash <object>标签含义解析
- 个别Android机浏览器可以播放视频webview无法播放视频
- iOS 多线程NSThread
- Android如何设置标题栏的高度
- iOS- 利用AFNetworking(AFN) - 实现图片上传 -
- Could not find resource FancyMapper.xml
- 高德地图开发文档 iOS
- CSDN下载手机客户端,存在 BUG,两个苹果下载图标
- 27个提升效率的iOS开源库推荐
- iOS学习----------正则表达式