有时候朋友问我是做什么的?我说以前是用PHP写后台,最近是用H5写前台APP(俗称的Hybrid App);
在公司做了几个H5的项目之后,有时候也想抽空研究下H5写一些APP;总觉得写APP的开发更加有底气。尽管我偶尔有空也会研究下android,swift(Objective-C实在是难懂,没兴趣深入研究),也希望H5能开发一些不错的APP;
国内有包括APPCan等公司慢慢在发力,是很不错的趋势;由于mac上面无法使用APPCAN,所以我就没继续研究了,就看国外是怎么的一个过程;偶尔的机会发现了有人用ionic+angularjs+phonegap,很不错的尝试;于是我也想摸索下;
结论:使用上述的方法开发app,是可行的,至少我再android+IOS上面打包是成功了,体验还可以,开发比较方便,基于一些现成的组件;能在1~2天开发一个简单的demo;效率比较高,不过你需要对angularjs有一定的熟悉和了解;H5也一样;所以我也是慢慢学习慢慢研究;
入门必须:
(1) 看一遍ionic的文档, http://ionicframework.com/ ;
Ionic 是一个用HTML, CSS 跟JS 开发的一个用于移动设备的web app 开发框架,采用 Sass与AngularJS 开发。
(2) 看一遍phonegap的文档;目前phonegap又取名为cordova;有些常用的命令总结如下:
项目例子:http://my.oschina.net/nosand/blog/294011
ionic:
Create hybrid mobile apps with the web technologies you love.
Free and open source, Ionic offers a library of mobile-optimized HTML,
CSS and JS components, gestures, and tools for building highly interactive apps.
Built with Sass and optimized for AngularJS.
Qunee有一个上海地铁图的例子,有客户希望转成mobile app,考察过android的webview,以及PhoneGap等多种Hybrid App方案后,最后选择使用ionic,准确的说是ionic + PhoneGap + Qunee ionic是一种基于HTML5创建Hybrid应用的前端框架,借助phoneGap + angularJS实现一套跨平台,轻量的移动UI方案,本文将介绍借助ionic实现移动版Qunee上海地图的示例
背景知识
安装ionic所需软件环境 – java, android sdk等
ionic实际上是集大成者,借助了多种技术,自身是一套UI框架,结合PhoneGap实现跨平台移动APP,需要先安装好依赖的程序,比如nodejs, java, ADT, ant, xcode等,并设置好java_home, 添加android sdk tool到环境变量
mac os x下安装ant
brew update
brew install ant
#mac osx 下,打开.bash_profile文件
cd ~
open .bash_profile
#设置相关的Path,mac os x下增加类似下面的内容
export JAVA_HOME= /usr/libexec/java_home -v 1.8
# android
export PATH=${PATH}:/Users/macbook/WorkSpace/android-sdk-macosx/platform-tools:/Users/macbook/WorkSpace/android-sdk-macosx/tools
安装ionic和cordova
需要首先安装好nodejs,然后通过npm来安装
npm install -g cordova ionic
更多请参考官方文档+google http://ionicframework.com/getting-started/
创建ionic项目q-metro
使用下面的命令创建一个新的项目
ionic start q-metro
初始目录结构如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="http://www.webdoes.com/archives/lib/ionic/css/ionic.css" rel="stylesheet">
<link href="http://www.webdoes.com/archives/css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="http://www.webdoes.com/archives/css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="http://www.webdoes.com/archives/lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="http://www.webdoes.com/archives/cordova.js"></script>
<!-- your app's js -->
<script src="http://www.webdoes.com/archives/js/app.js"></script>
</head>
<body ng-app="app" ng-controller="Metro" animation="slide-left-right-ios7">
<ion-header-bar class="bar-dark">
<h1 class="title">{{title}}</h1>
</ion-header-bar>
<ion-content scroll="false">
<div id="canvas" style="width: 100%; height: 100%;"></div>
</ion-content>
</body>
<script src="http://www.webdoes.com/archives/lib/qunee/qunee-min.js"></script>
</html>
index.html结构
首先看index.html,是主页面,里面引入了angularjs, cordova等js支持,此外还有app.js, controllers.js, services.js三个文件,这三个文件构建了app的应用逻辑,app是主程序,包含一些设置和启动脚本,services是数据支持部分,也就是model部分,用于提供数据的增删改查操作,controllers用于控制,包含业务逻辑控制代码
先在桌面环境下测试,Chrome运行正常,然后编译成各种移动平台版本,这里以android版本为例
ionic start q-metro
cd q-metro
ionic platform add android
ionic build android
ionic run android
如果要在虚拟机中测试,可以改用
ionic emulate android
ionic支持多种移动平台,如果希望创建ios可以将”android”改成”ios” 下面是android设备上真机运行界面如下:
给大家看看一个简单的demo的效果:
源码如下也很简单,供大家学习:
index.html如下:
<!DOCTYPE html>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic-AngularJS Kitchen Sink</title>
<!--<link href="http://code.ionicframework.com/1.0.0-beta.1/css/ionic.min.css" rel="stylesheet">-->
<!--<script src="http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min.js"></script>-->
<link href="http://www.webdoes.com/archives/lib/ionic/css/ionic.beta.min.css" rel="stylesheet">
<script src="http://www.webdoes.com/archives/lib/ionic/js/ionic.bundle.beta.min.js"></script>
<script src="http://www.webdoes.com/archives/js/app.js"></script>
<style>
.box {height:300px;padding: 10px}
</style>
</head>
<body ng-controller="AppCtrl">
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
<script id="menu.html" type="text/ng-template">
<ion-side-menus>
<ion-side-menu side="left">
<ion-header-bar class="bar-positive">
<h1 class="title">Side Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<a href="http://www.webdoes.com/archives/609.html#/menu/tab/buttons" class="item" menu-toggle="left">问答服务</a>
<!--<a href="http://www.webdoes.com/archives/609.html#/menu/keyboard" class="item" menu-toggle="left">Keyboard Input Types</a>-->
<!--<a href="http://www.webdoes.com/archives/609.html#/menu/slidebox" class="item" menu-toggle="left">Slide Box</a>-->
<a href="http://www.webdoes.com/archives/609.html#/menu/about" class="item" menu-toggle="left">About</a>
</ul>
</ion-content>
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</script>
<script id="tabs.html" type="text/ng-template">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-arrow-left-c">
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<button class="button button-icon button-clear ion-compose" ng-click="modal.show()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="问答" icon="ion-pricetag" href="http://www.webdoes.com/archives/609.html#/menu/tab/buttons">
<ion-nav-view name="buttons-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="日记" icon="ion-clipboard" href="http://www.webdoes.com/archives/609.html#/menu/tab/list">
<ion-nav-view name="list-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="健康汇" icon="ion-settings" href="http://www.webdoes.com/archives/609.html#/menu/tab/form">
<ion-nav-view name="form-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
</script>
<script id="buttons.html" type="text/ng-template">
<ion-view title="大咖问答">
<ion-content class="padding">
<div class="head" style="background-image: url(img/headImg.jpg);background-size: cover;position:relative;height: 120px;">
</div>
<div class="item item-divider">
问答集锦
</div>
<ion-list>
<ion-item ng-repeat="testItem in testItems" item="testItem" href="http://www.webdoes.com/archives/609.html#/menu/tab/testItem" data-id="{{testItem.id}}">
问题标题: {{ testItem.title }}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script id="item.html" type="text/ng-template">
<ion-view title="Item">
<ion-content class="padding">
<p>内容暂时没提供</p>
</ion-content>
</ion-view>
</script>
<script id="testItem.html" type="text/ng-template">
<ion-view title="testItem">
<ion-content class="padding">
<p>内容暂时没提供</p>
</ion-content>
</ion-view>
</script>
<script id="list.html" type="text/ng-template">
<ion-view title="日记列表">
<ion-content>
<ion-list show-delete="data.showDelete" on-delete="onItemDelete(item)" option-buttons="itemButtons">
<div class="list">
<!--<div class="item item-divider">-->
<ion-item ng-repeat="item in items" item="item" href="http://www.webdoes.com/archives/609.html#/menu/tab/item">
Item {{ item.id }}
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-view>
</script>
<script id="form.html" type="text/ng-template">
<ion-view title="健康专栏">
<ion-content class="padding">
开发中,尽请期待...
<br>
</ion-content>
</ion-view>
</script>
<script id="slidebox.html" type="text/ng-template">
<ion-view>
<ion-header-bar class="bar-positive">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
<h1 class="title">Slide Box</h1>
</ion-header-bar>
<ion-content>
<ion-slide-box>
<ion-slide>
<div class="box">
<h2>Box #1</h2>
<p>Content goes here</p>
</div>
</ion-slide>
<ion-slide>
<div class="box">
<h2>Box #2</h2>
<p>Content goes here</p>
</div>
</ion-slide>
<ion-slide>
<div class="box">
<h2>Box #3</h2>
<p>Content goes here</p>
</div>
</ion-slide>
</ion-slide-box>
</ion-content>
</ion-view>
</script>
<script id="keyboard.html" type="text/ng-template">
<ion-view>
<ion-header-bar class="bar-positive">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
<h1 class="title">Keyboard Input</h1>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-divider">
Input types for popup keyboard
</label>
<label class="item item-input">
<span class="input-label">Text</span>
<input type="text" ng-model="user.username">
</label>
<label class="item item-input">
<span class="input-label">Password</span>
<input type="password" ng-model="user.password">
</label>
<label class="item item-input">
<span class="input-label">Email</span>
<input type="email">
</label>
<label class="item item-input">
<span class="input-label">Tel</span>
<input type="tel">
</label>
<label class="item item-input">
<span class="input-label">Number</span>
<input type="number">
</label>
<label class="item item-input">
<span class="input-label">Date</span>
<input type="date">
</label>
<label class="item item-input">
<span class="input-label">Month</span>
<input type="month">
</label>
</div>
</ion-content>
</ion-view>
</script>
<script id="about.html" type="text/ng-template">
<ion-view>
<ion-header-bar class="bar-positive">
<button class="button button-icon button-clear ion-navicon" ng-click="toggleLeft()"></button>
<h1 class="title">About</h1>
</ion-header-bar>
<ion-content class="padding">
<div class="card">
<div class="item">
<h3>本测试demo由徐杰开发设计,仅供参考</h3>
<p><a href="http://www.webdoes.com" target="_blank">联系他</a></p>
</div>
</div>
</ion-content>
</ion-view>
</script>
<script id="modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar class="bar bar-header bar-positive">
<h1 class="title">咨询</h1>
<button class="button button-clear button-primary" ng-click="modal.hide()">取消</button>
</ion-header-bar>
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<span class="input-label">标题</span>
<input type="text">
</label>
<label class="item item-input">
<span class="input-label">内容</span>
<textarea rows="4"></textarea>
</label>
</div>
<button class="button icon icon-right ion-arrow-right-c button-balanced button-block">提交</button>
</ion-content>
</div>
</script>
</body>
</html>
核心代码app.js如下:
angular.module('ionicApp', ['ionic'])
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('menu', {
url: "/menu",
abstract: true,
templateUrl: "menu.html",
controller: 'MenuCtrl'
})
.state('menu.tabs', {
url: "/tab",
views: {
'menuContent' :{
templateUrl: "tabs.html"
}
}
})
.state('menu.tabs.buttons', {
url: "/buttons",
views: {
'buttons-tab': {
templateUrl: "buttons.html",
controller: 'ButtonsTabCtrl'
}
}
})
.state('menu.tabs.list', {
url: "/list",
views: {
'list-tab': {
templateUrl: "list.html",
controller: 'ListCtrl'
}
}
})
.state('menu.tabs.item', {
url: "/item",
views: {
'list-tab': {
templateUrl: "item.html"
}
}
})
.state('menu.tabs.testItem', {
url: "/testItem",
views: {
'buttons-tab': {
templateUrl: "testItem.html"
}
}
})
.state('menu.tabs.form', {
url: "/form",
views: {
'form-tab': {
templateUrl: "form.html"
}
}
})
.state('menu.keyboard', {
url: "/keyboard",
views: {
'menuContent': {
templateUrl: "keyboard.html"
}
}
})
.state('menu.slidebox', {
url: "/slidebox",
views: {
'menuContent': {
templateUrl: "slidebox.html",
controller: 'SlideboxCtrl'
}
}
})
.state('menu.about', {
url: "/about",
views: {
'menuContent': {
templateUrl: "about.html"
}
}
});
$urlRouterProvider.otherwise("menu/tab/buttons");
})
.controller('ListCtrl', function ($scope) {
$scope.data = {
showDelete: false
};
$scope.itemButtons = [
{
text: 'Delete',
type: 'button-assertive',
onTap: function (item) {
alert('Delete Item: ' + item.id + ' ?');
}
}
];
$scope.onItemDelete = function (item) {
$scope.items.splice($scope.items.indexOf(item), 1);
};
$scope.items = [
{
id: 1,
title:'慢性鼻炎怎么预防?'
},
{
id: 2,
title:'高血压如何预防?'
},
{
id: 3,
title:'冠心病如何有效治疗?'
},
{
id: 4,
title:'高血压如何预防?'
}
];
})
.controller('ButtonsTabCtrl', function ($scope, $ionicPopup, $ionicActionSheet, $ionicModal) {
$scope.showPopup = function () {
$ionicPopup.alert({
title: 'Popup',
content: 'This is ionic popup alert!'
});
};
$scope.showActionsheet = function () {
$ionicActionSheet.show({
titleText: 'Ionic ActionSheet',
buttons: [
{
text: 'Facebook'
},
{
text: 'Twitter'
},
],
destructiveText: 'Delete',
cancelText: 'Cancel',
cancel: function () {
console.log('CANCELLED');
},
buttonClicked: function (index) {
console.log('BUTTON CLICKED', index);
return true;
},
destructiveButtonClicked: function () {
console.log('DESTRUCT');
return true;
}
});
};
$scope.testItems = [
{
id: 1,
title:'慢性鼻炎怎么预防?'
},
{
id: 2,
title:'高血压如何预防?'
},
{
id: 3,
title:'冠心病如何有效治疗?'
},
{
id: 4,
title:'高血压如何预防?'
}
];
$ionicModal.fromTemplateUrl('modal.html', function (modal) {
$scope.modal = modal;
}, {
animation: 'slide-in-up'
});
})
.controller('SlideboxCtrl', function($scope, $ionicSlideBoxDelegate) {
$scope.nextSlide = function() {
$ionicSlideBoxDelegate.next();
}
})
.controller('MenuCtrl', function($scope, $ionicSideMenuDelegate, $ionicModal) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
$ionicModal.fromTemplateUrl('modal.html', function (modal) {
$scope.modal = modal;
}, {
animation: 'slide-in-up'
});
})
.controller('AppCtrl', function() {
ionic.Platform.ready(function() {
});
});
发布:
Now we can tell cordova to generate our release build:
$ cordova build --release android
在IOS中也是一样,不过IOS要打包成ipa,需要开发者账号,有兴趣朋友求提供下,谢谢!