当前位置:首页 > javascriptweb > 正文

使用ionic+angular+phonegap开发APP入门

有时候朋友问我是做什么的?我说以前是用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
初始目录结构如下

q-metro源码结构

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的效果:

demo1

demo2

源码如下也很简单,供大家学习:

index.html如下:

核心代码app.js如下:

发布:

Now we can tell cordova to generate our release build:

$ cordova build --release android

在IOS中也是一样,不过IOS要打包成ipa,需要开发者账号,有兴趣朋友求提供下,谢谢!

2 条评论

  1. 板凳2015-03-30 下午8:48回复
    jackqqxu

    现在可以评论了吧

  2. 沙发2015-05-30 下午5:16回复
    jxva

    你这个工程能否打一个包发给我,多谢了!

发表评论