1. Ionic & Cordova & Jersey简介

   -- Ionic & Cordova & Jersey 是什么

Ionic是什么?

        ionic 是一个专注于用WEB开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。这个框架的目的是从web的角度开发手机应用,可以实现编译成各个平台的应用程序。
特点:
        1.ionic 基于Angular语法,简单易学。
        2.ionic 是一个轻量级框架。
        3.ionic 完美的融合下一代移动框架,支持 Angularjs 的特性, 代码易维护。
        4.ionic 提供了漂亮的设计,它提供了很多 UI 组件来帮助开发者开发强大的应用。
        5.ionic 专注原生,让你看不出混合应用和原生的区别
        6.ionic 提供了强大的命令行工具。

        7.ionic 性能优越,运行速度快。

Cordova APP是什么?

        Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。Cordova支持如下移动操作系统:iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

Jersey是什么?

        Jersey RESTful 框架是开源的RESTful框架, 实现了JAX-RS (JSR 311 & JSR 339) 规范。它扩展了JAX-RS 参考实现, 提供了更多的特性和工具, 可以进一步地简化 RESTful service 和 client 开发。尽管相对年轻,它已经是一个产品级的 RESTful service 和 client 框架。与Struts类似,它同样可以和hibernate,spring框架整合。
开发APP的话,主要是用到Jersey对Json的支持。开发中,json已经常用到无处不在了,jersey对json的支持很好。
接收json,需要使用@Consumes,注解指定解压方式:
@Consumes(MediaType.APPLICATION_JSON) 
返回json,需要使用@Produces注解,指定压缩方式:

@Produces(MediaType.APPLICATION_JSON)

2. 开发环境介绍

   -- 所需软件及其安装

开发环境说明

        本次开发移动端 APP主要用到的技術有 Ionic2 & 点击打开链接 Angular Js2 (前端) / Jersey(Java 後台的框架),中間的傳遞是用JSON格式;

Ionic的開發工具是 VS Studio, Java的開發工具是 Eclipse
Java 用 jdk1.8.0,還外掛apache-maven-3.3.9
使用Maven需要配置环境变量等,具体Maven项目配置操作见:
百度
安装Ionic首先要安装node.js,会用到其工具NPM,如果不能用node.js,还可能要安装cntlm,这两个软件一定要安装在默认路径下,否则可能会有错,一般是C:\Program Files\nodejs和C:\Program Files (x86)\Cntlm,具体安装操作见:
百度

安装Ionic & Cordova

        在npm(开始->node.js->node.js command prompt)下输入:npm install -g cordova ionic,但是由于网络限制可能会报错,解决办法是先下载淘宝镜像(npm install -g cnpm --registry=https://registry.npm.taobao.org),再将npm换成cnpm进行下载,或者把一个下载过Ionic和cordova的npm文件夹复制到C:\Users\username\AppData\Roaming文件夹下,然后启动一个APP
生成空白APP,输入:ionic start myApp blank
生成有组件的APP,输入:ionic start myApp tabs
生成有菜单的APP,输入:ionic start myApp sidemenu

学习手册参考官网http://ionicframework.com

Ionic2 & cordova APP & JerseyIonic2 & cordova APP & JerseyIonic2 & cordova APP & Jersey

                空白APP                                                组件APP                                            菜单APP

其他需要的软件及插件

        1.Android SDK 2. Gradle                    3. VS code 4.Apache Ant
Gradle和Apache Ant需要配置环境变量,参照JDK配置方式。

打开Android SDK Manager,依照如下status中Installed与Update available去下载。

Ionic2 & cordova APP & JerseyIonic2 & cordova APP & Jersey

Ionic2 & cordova APP & Jersey

检验安装环境

        去npm下输入以下命令,如出现如下图的版本号,则安装完成。

Ionic2 & cordova APP & Jersey

3. 开发APP

   --代码解读

启动项目

Ionic2 & cordova APP & Jersey

用VS code打开项目

打开vs code -> File -> Open Folder ,选择创建好的项目

 

Ionic2 & cordova APP & Jersey

node_modules:nodeJS的各类依赖包
resources: 发布成app需要用到的图标资源目录
src: Ionic的主文件区域,我们的工作主要就在这个文件夹下进行
www: src源码编译后会自动生成到此目录下
src/index.html:程序入口
src/app/:系统及启动相关类
src/app/main.ts: ts文件启动入口
src/app/app.module.ts:页面组件注册文件
src/app/app.component.ts:系统首页控制器
src/app/app.html:系统首页模板
src/pages:开发功能页面及代码

hooks:cordova 的readMe

Ionic2 & cordova APP & Jersey

src/index.html:程序入口
src/app/:系统及启动相关类
src/app/main.ts: ts文件启动入口
src/app/app.module.ts:页面组件注册文件
src/app/app.component.ts:系统首页控制器
src/app/app.html:系统首页模板

src/pages:开发功能页面及代码

代码解读-app.module.ts

Ionic2 & cordova APP & Jersey

NgModule:管理模块内部的Components、Directives、Pipes,引入Service
Declarations:声明,声明本模块包含的内容,要展示的模块都要在此处声明
Imports:导入其他模块,就是要使用其他模块的功能,必须要导入
Bootstrap:启动模块。只在根模块使用。除了根模块以外的其他模块不能使用
Providers:服务提供者,主要用来定义服务

Exports:外部可见的内容。相当于Java中声明为public的那些类

代码解读-tabs.ts

Ionic2 & cordova APP & Jersey

5.如何使用chrome debug

Ionic2 & cordova APP & Jersey

Ionic2 & cordova APP & Jersey

Ionic2 & cordova APP & Jersey

Ionic2 & cordova APP & Jersey

Ionic2 & cordova APP & Jersey

6. 如何将项目发布到Android

1.为项目添加android平台
    进入项目根目录并执行: ionic cordova platform add android

(执行这个命令后有可能会报错,这时再次执行一次add android的命令,若出现Platform android already exists,则表示添加成功)

Ionic2 & cordova APP & Jersey

2.产生.APK文档
    进入项目根目录并执行: ionic cordova build android
(执行这个命令后有可能会报错,这时请使用cordova build android 命令,出现BUILD SUCCESSFUL,则表示成功),此时在platforms/android/build/outputs/apk目录下,会产生一个apk文件,将其放到andorid手机上安装即可

Ionic2 & cordova APP & Jersey

7. 示例

   --开发实例及其UI效果

Ionic2 & cordova APP & Jersey

Ionic2 & cordova APP & Jersey

Ionic2 & cordova APP & Jersey

Ionic2 & cordova APP & Jersey

UI效果图

Ionic2 & cordova APP & Jersey

 

 

 

 

 

相关文章: