基本套路:
1、先安装node,配置好npm config set cache 和 npm config set prefix
2、安装android sdk 和 java 配置环境变量
3、执行npm 命令安装 npm install -g cordova 和 npm install -g ionic
4、运行 ionic start app(名字随意) 生成如下
运行 ionic build android 时 app目录下config.xml 文件里 android-minSdkVersion 的value 最小要对应 要和 安装的androidsdk 的 api 最小版本
5、ionic platform add android
6、套路最后一步 ionic run android
对于做web开发,重点的套路还是在www 文件里
接下来 套路里用到了几种撩的技术,我不是一个好的僚机,实现如下的tab切换,粗略撩吧,撩不好就撸。。。
当然小白撩的也有不对的地方,还是很明显的,希望互相帮助啦
僚机目录结构 主要用到了 angular,ionic是把angular封装了的,还有requirejs(模块载入框架)
main.js 需要的js文件
require.config({
// baseUrl:'../',
paths:{
cordova:'cordova',
fastclick:'../lib/fastclick',
async:'../lib/async', //帮助异步引入类似下面百度地图的js
domReady:'../lib/domReady',
BMap:'http://api.map.baidu.com/api?v=2.0&ak=A796271dae48229367c041db82735a4c&services=false',
angular:'../lib/ionic/js/angular/angular',
angularAnimate:'../lib/ionic/js/angular/angular-animate',
angularSanitize:'../lib/ionic/js/angular/angular-sanitize',
uiRouter:'../lib/ionic/js/angular-ui/angular-ui-router',
ngResource:'../lib/ionic/js/angular/angular-resource',
ionic:'../lib/ionic/js/ionic',
ionicAngular:'../lib/ionic/js/ionic-angular',
app:'app',
config:'config',
services:'services/services',
mainServices:'services/mainServices',
indexServices:'services/indexServices',
mapServices:'services/mapServices',
mainCtrl:'controllers/mainCtrl',
indexCtrl:'controllers/indexCtrl',
sortCtrl:'controllers/sortCtrl',
memberCtrl:'controllers/memberCtrl',
cartCtrl:'controllers/cartCtrl',
mapCtrl:'controllers/mapCtrl',
controllers:'controllers/controllers',
directives:'directives/directives',
mainDirective:'directives/mainDirective'
},
waitSeconds: 40,
shim:{
angular : {exports : 'angular'},
angularAnimate : {deps: ['angular']},
angularSanitize : {deps: ['angular']},
uiRouter : {deps: ['angular']},
ngResource: {deps: ['angular']},
ionic : {deps: ['angular'], exports : 'ionic'},
ionicAngular: {deps: ['angular', 'ionic', 'uiRouter', 'angularAnimate', 'angularSanitize','ngResource']}
},
priority:['angular','ionic'],
deps:['bootstrap']
});
config.js ionic配置文件 android 和ios ui界面的配置和动态效果
define(['app', 'ionic'], function (app) {
'use strict';
return angular.module('app.config', ['ionic']).config(function($ionicConfigProvider) {
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.views.transition('android');
$ionicConfigProvider.platform.ios.views.transition('ios');
});
});
bootstrap.js angular 初始化
define(['ionic', 'angular', 'app', 'routes', 'fastclick'], function (ionic, angular, app) {
'use strict';
var $html,
onDeviceReady = function () {
angular.bootstrap(document, app.name);
};
document.addEventListener("deviceready", onDeviceReady, false);
if (typeof cordova === 'undefined') {
$html = angular.element(document.getElementsByTagName('html')[0]);
angular.element().ready(function () {
try {
angular.bootstrap(document, [app.name]);
} catch (e) {
console.error(e.stack || e.message || e);
}
});
}
window.addEventListener('load', function() { //fastclick 初始化
new FastClick(document.body);
}, false);
});
app.js angular 创建app module
define(['angular',
'uiRouter',
'services',
'controllers',
'directives',
'ionicAngular'],
function (angular, uiRouter) {
'use strict';
var app = angular.module('app', [
'ionic',
'ngResource',
'app.controllers',
'app.directives',
'app.services',
'ui.router']);
return app;
});
routes.js 路由配置 主要是底部tab 切换
define(['app'], function(app) {
'use strict';
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('tab.index', {
url: '/index',
views: {
'tab-index': {
templateUrl: 'templates/site/index.html',
controller: 'indexCtrl'
}
}
})
.state('tab.sort', {
url: '/sort',
views: {
'tab-sort': {
templateUrl: 'templates/sort/index.html',