Ionic开发实战
转自:http://blog.csdn.net/i348018533/article/details/47258449/
折磨的两个月!Ionic从零单排,到项目发布!遇到了很多问题但都一一解决了,此篇文章留作记录。
当初想着因为项目不大人力足够的并且因为团队没有移动开发经验的情况下,是不是能够是用hybrid app来代替原生来完成这个项目,经过一些技术调研之后选择了Ionic。当时是对Ionic一无所知,凭借一些盲目的自信,想着方正有开发文档能有什么问题呢。现在想想都觉得当时有点冲动万一中间出现什么坑或者无法解决的问题都找不到可以咨询的人。不过好歹结果是好的,基本实现了当初需求设计,并且效果还不错。
因为Ionic是基于AngularJS框架开发的,所以在使用Ionic之前需要对angularjs有一定的了解。
可以看我另一篇文章:
http://blog.csdn.net/i348018533/article/details/50779248
步骤:
1.Ionic环境安装
Ionic开发是依赖于Nodejs环境的,所以在开发之前我们需要安装好Nodejs。下载安装:http://nodejs.org/
安装完成之后打开PowerShell输入命令node -v和npm -v验证是否安装成功,如果返回版本号则说明成功。
在PowerShell命令行中执行:
npm install -g cordova ionic
这是使用npm包管理器安装cordova和ionic,-g的意思是全局安装,全局安装后在PowerShell中任何目录下都可以使用cordova和ionic的命令。
PS. 安装过程需要打开VPN翻墙,貌似是资源被墙了,无语。
2.创建Ionic项目
Ionic官网提供了三个项目模板blank、tabs和sideMenu ,参阅:http://ionicframework.com/getting-started/
我们使用blank空模板创建一个我们的应用,并且完成一个简单的tabs导航的小应用,打开PowerShell cd到开发目录,执行:
ionic start myIonic blank
其中myIonic为我们的项目名称
执行过程它会从github下载项目源码,请等待。。。
执行完毕后你到开发目录下查看会发现多了一个名为myIonic的文件夹,这个文件夹就是Ionic项目的所在目录了。
目录下有以下文件:
hooks //google之后这个目录应该是在编译cordova时自定义的脚本命令,方便整合到我们的编译系统和版本控制系统中
plugins //cordova插件的目录,插件的安装下一节详述
scss //scss文件,发布时编译这个目录下的文件输出到www的css目录中
www //我们的开发目录,页面、样式、脚本和图片都放在这个目录下
--css
--img
--js
--lib
--index.html
bower.json //bower配置文件
config.xml //Ionic的配置文件 ⱃ可以配置app的id,名称、描述起始页和一起其他配置
gulpfile.js //gulp构建工具的执行文件,在这个文件中创建任务实现编译scss,css、js优化等
ionic.project //Ionic的项目文件可以配置Ionic命令中livereload的监控文件
package.json //npm配置文件
在开发初期的调试我们一般会使用浏览器作为我们的调试工具,Ionic提供了一个serve命令为我们的应用创建web站点可以非常方便的调试应用, cd到开发目录下,执行命令:
ionic serve
执行完毕后Ionic会自动帮我们打开我们的默认浏览器并跳转到我们的应用页面,浏览器打开页面时Ionic已经给我们开启了livereload模式,开启之后我们编辑www
下的文件后保存时Ionic会通过websocket通知浏览器刷新页面,我们就不用每次修改完毕手动刷新页面了,又极大的提高了我们的工作效率。
PS. 开启livereload后Ionic会默认监听www
下面的文件,如果需要自定义的话请编辑ionic.project
的watchPatterns
来设置需要监听的范围
{
"name": "myIonic",
"app_id": "",
"watchPatterns": [
"www/js/*",
"www/js/*/*",
"www/*.html",
"www/templates/*.html",
"www/css/*.css"
]
}
www/index.html
作为我们的程序入口文件,首先编辑这个文件,在body
标签中加入
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
这段标签对于对Ionic不熟悉的人来说可能有点陌生,Ionic针对移动端自定义了一套样式库,并且使用Angular的指令封装了各个模块,ion-nav-bar
是导航页面头部、ion-nav-view
是导航内容页面。inde.html
入口页面我们已经写完了,接下来我们新建两个我们自己的页面。我们在www
目录下新建一个templates
文件夹,存放我们的页面并新建页面:tabs.html
作为我们tab应用的主页面:
tabs.html
<ion-tabs class="tabs-icon-top tabs-positive">
<ion-tab title="Home" icon="ion-home" href="#/tab/home">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon="ion-ios-information" href="#/tab/about">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
ion-tab
为tab应用的底部菜单项 title
是菜单按钮显示的文字,icon
是菜单按钮图标,href
是点击菜单的跳转地址,子元素ion-nav-view
是点击菜单后子页面显示的位置,ion-nav-view
属性name
为该tab的名称,后面添加子页面会详细描述。
然后在app.js
中加入该页面的路由
$stateProvider
.state('tabs', {
url: "/tab",
templateUrl: "templates/tabs.html",
})
$urlRouterProvider.otherwise("/tab");
保存之后页面会自动刷新显示的应该是介个样子:
哈,我们tab应用的大概样子已经出来了,但是现在点击下面的菜单并没有什么反应,接下来我们就要开始添加我们的子页面了,在templates
文件夹中新建:home.html
、facts.html
、about.html
home.html 首页
<ion-view view-title="Home">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
</p>
</ion-content>
</ion-view>
facts.html
<ion-view view-title="Facts">
<ion-content class="padding">
<p>
<a class="button icon icon-right ion-chevron-right" href="#/tab/home">Home</a>
</p>
</ion-content>
</ion-view>
about.html
<ion-view view-title="About">
<ion-content class="padding">
<p>
About Us
</p>
</ion-content>
</ion-view>
ion-view
是我们子页面的内容,属性view-title
可以设置页面头部的标题名称,添加好文件后我们需要在app.js
中加入各个页面的路由,并且需要对之前的tabs路由做一个调整。
$stateProvider
.state('tabs', {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
})
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html"
}
}
})
.state('tabs.facts', {
url: "/facts",
views: {
'home-tab': {
templateUrl: "templates/facts.html"
}
}
})
.state('tabs.about', {
url: "/about",
views: {
'about-tab': {
templateUrl: "templates/about.html"
}
}
})
$urlRouterProvider.otherwise("/tab/home");
大家发现tabs
路由增加了一个abstract
字段,该字段在angular中的解释是抽象页面,不能独立作为页面展示只能作为其他页面父页面,当加载子页面之前加载父页面。
其他子页面的路由和tabs
路由的配置有所不同名称命名是父路由.子路由
的形式,并且增加了一个views
字典,字段的key值对应着我们前面所说的tabs.html
中ion-nav-view
的name
属性,表示该路由跳转的页面属于某个tab的子页面,同时修改我们的otherwise
默认页为/tab/home
。
保存之后浏览器自动刷新,我们来看一下效果。
好了,我们来点点看吧,页面切换Ionic已经帮我们实现了类似原生app的切换动画效果,是不是有一点原生app的感觉了?下面章节我们会实现在移动端的部署。
3.部署到手机和cordova插件的使用
一个简单的Web应用我们已经开发完成了,接下来我们就要做一些部署到移动端之前的准备了。
Ionic支持两个平台iOS、Android,默认的Ionic项目并没有添加这两个平台,我们需要手动添加,cd到开发目录下执行命令:
ionic platform add android
ionic platform add ios
一般项目都需要两个平台同时部署,所以我们就添加两个,执行完毕之后执行命令查看你已经添加的平台列表:
ionic platform list
结果:
Installed platforms: android 4.0.0, ios 3.8.0
Available platforms: amazon-fireos, blackberry10, browser, firefoxos, windows, windows8, wp8
接下来的部署我们分开讲述:
Android
Android部署分真机和虚拟机,其实方法类似,在部署之前需要安装JDK、Android SDK到开发环境中,配置好JDK的JAVA_HOME
和Android SDK的ANDROID_HOME
到环境变量中去,并把Android SDK安装目录添加到Path
中。
配置好之后打开PowerShell输入命令返回正确:
adb version
接下来就简单了,把手机连接到电脑,并开启usb调试模式,执行命令:
ionic run android
Ionic开始编译项目生成apk并远程安装到手机上后自动打开应用,是不是很简单?
IOS
ios部署需要一台mac电脑,在mac电脑上面根据本篇ionic的安装过程安装环境之后,添加ios平台到项目,因为apple开发的证书限制我们在没有申请购买apple账号的情况下,使用虚拟机来部署我们的应用,在部署之前需要使用npm安装一个ios-sim插件用来调用模拟器的,执行命令:
sudo npm install -g ios-sim
- 1
- 1
安装好之后,cd 到开发目录下执行:
sudo ionic build ios
- 1
- 1
开始编译项目,编译完成之后用Xcode打开开发目录下platform
->ios
->myIonic.xcodeproj
的项目文件,Xcode中选择要运行的虚拟机版本并执行快捷键cmd+R运行虚拟机,虚拟机打开后会自动运行你应用。
PS. 为什么不用run ios 命令直接启动虚拟机呢,因为我的环境下执行run会报错,虚拟机会打开但是无法运行程序,找了半天解决解决方案没有结果,索性直接用Xcode了,效果是一样样的
到了这一步我们的app已经部署完毕了,接下来我们要为我们的app添加一个拍照功能,需要引用到cordova插件,而Ionic把一些常用到的插件用angularjs服务做了一层封装:http://ngcordova.com/ 我们只需要在项目中安装ngCordova插件就可以想使用angularjs的服务一样在我们的项目中调用了,我们先安装ngCordova(安装需要bower包管理器,并打开VPN。。。):
bower install ngCordova
- 1
- 1
安装完毕之后再www/index.html中引用
<script type="text/javascript" src="lib/ngCordova/dist/ng-cordova.js"></script>
<script type="text/javascript" src="cordova.js"></script>
PS. ng-cordova.js需要在cordova.js引用之前
并在app.js中添加依赖注入关系,另外我发现一个问题如果安装的ngCordova的0.1.18-alpha版本,在引用时会报错,我撤回0.1.17-alpha版本就没有问题了,不知道是什么原因。
angular.module('starter', ['ionic', 'ngCordova'])
- 1
接下来cd到开发目录,我们使用ionic命令来安装插件:
cordova plugin add cordova-plugin-camera
安装完毕之后会在项目目录下的plugins
文件夹中多出一个cordova-plugin-camera
,这就是我们插件目录。
下面我要在home页面中增加一点按钮调用摄像头,我们先在www/js
中新增一个controller.js
文件编写以下代码,并在index.html
中引用:
(function () {
'use strict'
angular
.module('starter')
.controller("homeCtrl", homeCtrl, ['$cordovaCamera'])
function homeCtrl ($scope, $cordovaCamera) {
$scope.openCamera = function () {
var options = {
quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$cordovaCamera.getPicture(options).then(function(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}, function(err) {
// error
});
}
}
})();
- 1我们新建了一个
homeCtrl
并添加$cordovaCamera
的引用,在controller中定义一个openCamera
方法来调用摄像头,在home.html
中加入以下代码:
<a class="button icon icon-right ion-chevron-right" href="#/tab/facts">Scientific Facts</a>
<a class="button icon icon-right ion-chevron-right" ng-click="openCamera()">Camera</a>
- 1
增加了一个按钮去调用我们定义的方法openCamera
,最后一步在app.js
中绑定home路由和controller,在app.js
中修改代码:
.state('tabs.home', {
url: "/home",
views: {
'home-tab': {
templateUrl: "templates/home.html",
controller:"homeCtrl"
}
}
})
到此我们的app增加的打开摄像头功能已经开发完了,我们来测试下,运行ionic的run方法来看看效果吧。
4.调试
我们在前面已经说过,在开发前期我们一般会在web中调试,而Ionic为我们提供了非常方面的web调试环境,只需要执行ionic serve
就可以实现lievereload,而在部署到移动端后也可以开启livereload的,我们只需要修改下我们run命令参数:
ionic run android --livereload -c -s
- 1
- 1
这是android的调试模式,无论在虚拟机上还是在手机上都可以实现livereload,ios则只需要把android修改为ios即可,不用每次开发完成编译再部署!-c
是开启客户端日志输出,-s
是开启服务器端日志输出。–livereload参数的的意义在于修改生成包中的起始页面地址,修改为远程服务器地址这样就可以做到修改即通知客户端刷新页面了。
5.ios打包、android打包
能使用Ionic来开发app的很可能对Ios和android的app打包发布流程不是很熟悉,我这里简单说明下:
Android
Android的打包比较简单执行命令:
ionic build android -release
- 1
- 1
找到www/platform
目录下生成的apk包,此时的apk还不能被安装到手机上,还需要一步签名操作,大家可以参考:
http://www.cnblogs.com/qianxudetianxia/archive/2011/04/09/2010468.html
IOS
ipa文件的打包需要现在apple develop网站上注册一个账号,在网站申请生产环境的证书导入到你的开发机中和开发机绑定才可以使用xcode导出,详情参阅:
http://blog.csdn.net/songrotek/article/details/8448331
http://www.mexiqq.com/2014/07/25/xcode6+ios8%E6%9C%80%E6%96%B0%E7%9C%9F%E6%9C%BA%E8%B0%83%E8%AF%95%E6%95%99%E7%A8%8B/
android使用crosswalk
android内置浏览器大家都知道性能是硬伤,尤其是低端机,所有ionic支持使用crosswalk浏览器代替系统内置浏览器内核,使用crosswalk后性能提升效果比较明显,但是apk的包体积会增大大约20M,是不用取决于项目使用场景。
使用crosswalk非常简单:
ionic browser add crosswalk
- 1
- 1
执行完成后在插件列表里会增加一个cordova-plugin-crosswalk-webview
插件。
安装完成后在打包时会自动下载对应的crosswalk包,如果下载失败尝试使用vpn,下载完成集成过程中我遇到了一些报错,报错的原因大致就是我的android sdk没有安装完全,这个大家在使用时需要注意下。
结束语
Ionic作为一个hybrid应用的开发框架总体来说还是很不错的,因为它的开发效率很高,并且可以跨平台的发布这两点可以让很多人心动了。另外Ionic在实际应用中的表现情况是这样的,在IOS平台中运行效率和原生的效果非常好,但是在Android中的就不是太理想了尤其是Android的低端机,不过Ionic的团队对于这方面的性能优化还在不断的努力,希望Ionic未来更牛逼。
另外从这次的项目中体会到了尤其是一些新兴技术在国内的资料太少,遇到问题不得不翻墙去找国外资料,但是碍于英文水平往往过程是非常痛苦的,所以学好英语是非常重要的!!!
最后介绍下这个应用是一款中介行业的房源管理软件,集成了gps、推送(最好用极光推送他们有对phonegap插件的支持)、摄像头拍照、时间控件、文件上传等原生API
Ionic开发实战的更多相关文章
- [ionic开源项目教程] - 手把手教你使用移动跨平台开发框架Ionic开发一个新闻阅读APP
前言 这是一个系列文章,从环境搭建开始讲解,包括网络数据请求,将持续更新到项目完结.实战开发中遇到的各种问题的解决方案,也都将毫无保留的分享给大家. 关注订阅号:TongeBlog ,查看移动端跨平台 ...
- 移动跨平台开发框架Ionic开发一个新闻阅读APP
移动跨平台开发框架Ionic开发一个新闻阅读APP 前言 这是一个系列文章,从环境搭建开始讲解,包括网络数据请求,将持续更新到项目完结.实战开发中遇到的各种问题的解决方案,也都将毫无保留的分享给大家. ...
- 基于UniApp社区论坛多端开发实战
什么是移动端WebApp 移动端WebApp: 泛指手持设备移动端的web 特点: - 类App 应用,运行环境是浏览器 - 可以包一层壳,成为App - 常见的混合应用: ionic, Cordov ...
- chrome拓展开发实战:页面脚本的拦截注入
原文请访问个人博客:chrome拓展开发实战:页面脚本的拦截注入 目前公司产品的无线站点已经实现了业务平台组件化,所有业务组件的转场都是通过路由来完成,而各个模块是通过requirejs进行统一管理, ...
- 《Android NFC 开发实战详解 》简介+源码+样章+勘误ING
<Android NFC 开发实战详解>简介+源码+样章+勘误ING SkySeraph Mar. 14th 2014 Email:skyseraph00@163.com 更多精彩请直接 ...
- 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面
此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...
- CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(1)设定背景图
技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...
- Ionic 开发环境搭建
android sdk环境搭建并非易事,本人经过无数失败,才使用以下方式成功 配置Ionic 开发环境 1.下载JDK并配置Java运行环境 http://www.oracle.com/technet ...
- 《Node.js开发实战详解》学习笔记
<Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...
随机推荐
- TypeScript 中的 "=>" 真的很好用!!!
class funs { public $scope: IBarPadScope; constructor($scope: IBarPadScope) { this.$scope = $scope; ...
- Ubuntu gcc缺失问题
在安装redis过程中,需要使用make编译源码,但发现linux中缺失gcc,系统为Ubuntu12. 一般情况下,可使用sudo apt-get install gcc或者sudo apt-get ...
- 原始感知机入门——python3实现
运用最简单的原始(对应的有对偶)感知机算法实现线性分类. 参考书目:<统计学习方法>(李航) 算法原理: 踩到的坑:以为误分类的数据只使用一次,造成分类结果很差,在train函数内加个简单 ...
- django开发过程中静态文件路径配置
在demo项目的settings.py文件中找到 STATICFILES_DIRS STATICFILES_DIRS = ( 'static', #这个名字是项目根目录下的文件夹名称,注意后面有逗号 ...
- Ruby的基本语法-数组
Ruby中数组的实例 1.color=["Red", "Green" ,"Blue"] #数组赋值
- android view : 自定义
首先,为什么要使用xml来配置view的视图,这个是mvc的一个思想,你可以把前端和数据分离,可以想一下一个及其复杂的视图假如要修改面对复杂的代码是多么的发愁,xml更明了的表达了视图.然而我们知道a ...
- I.MX6 initramfs.cpio.gz.uboot unpack
/********************************************************************************* * I.MX6 initramfs ...
- PHP使用字符串名称调用类的方法
<?php class Game { function Play($id) { echo "Playing game $id\n"; } } $game = new Game ...
- Linux自己安装redis扩展
注意:目录的权限 chomd 777 -R 注意:下面涉及的目录只是我自己安装的目录,要找自己对应的目录文件 1.安装redis 下载:https://github.com/nicolasff/p ...
- devexpress xaf 开发中遇到的问题.
devexpress xaf 开发中遇到的问题很多久了就忘记了.每天都把开发内容记录下来,方便大家,方便自己