Ionic2 & cordova APP & Jersey

╰半夏微凉° 2022-05-31 13:37 222阅读 0赞

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项目配置操作见:  
[百度][Link 1]  
安装Ionic首先要安装node.js，会用到其工具NPM，如果不能用node.js，还可能要安装cntlm，这两个软件一定要安装在默认路径下，否则可能会有错，一般是C:\\Program Files\\nodejs和C:\\Program Files (x86)\\Cntlm，具体安装操作见:  
[百度][Link 2]

安装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

![70][]![70 1][]![70 2][]

空白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去下载。

![70 3][]![70 4][]

![70 5][]

检验安装环境

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

![70 6][]

3. 开发APP

--代码解读

启动项目

![70 7][]

用VS code打开项目

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

![70 8][]

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

![70 9][]

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

![70 10][]

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

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

代码解读-tabs.ts

![70 11][]

5.如何使用chrome debug

![70 12][]

![70 13][]

![70 14][]

![70 15][]

![70 16][]

6. 如何将项目发布到Android

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

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

![70 17][]

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

![70 18][]

7. 示例

--开发实例及其UI效果

![70 19][]

![70 20][]

![70 21][]

![70 22][]

UI效果图

![70 23][]

[Link 1]: https://www.baidu.com
[Link 2]: https://www.baidu.com/
[70]: https://img-blog.csdn.net/20180226160646269?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzkyNTI1MDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20180226160719232?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzkyNTI1MDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20220531/332c8bf038694e0da2bcf3e763a7f990.png
[70 3]: https://img-blog.csdn.net/20180226161031128?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzkyNTI1MDE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 4]: /images/20220531/89076227fbe04932b788ec4d61e1422b.png
[70 5]: /images/20220531/d2320821224641d8974d846c6ff9a301.png
[70 6]: /images/20220531/24c673b96e594710b609f6093c6931e4.png
[70 7]: /images/20220531/350ca80b3e0a40fca3d398dc1a6bf6cb.png
[70 8]: /images/20220531/6a500efe81584a6dbe9ad70a2f538506.png
[70 9]: /images/20220531/979a6a3d84ff4992b5eebee45722fdbc.png
[70 10]: /images/20220531/eb754c7b75a14279a91e6bb57564ae04.png
[70 11]: /images/20220531/9eb84baf4b0b48279c50efb536f8fe28.png
[70 12]: /images/20220531/9496d55172304cb78113a530289654cb.png
[70 13]: /images/20220531/415eff5dea614bfab68519474e57fd00.png
[70 14]: /images/20220531/ca4b2857f1904528929e6dfe96800478.png
[70 15]: /images/20220531/af5a1666e7fa4f3b9806380d1bd3bf93.png
[70 16]: /images/20220531/48c92604cfea4e99acc244b0c17b03d9.png
[70 17]: /images/20220531/71da6c1c7d024be094a02c4418a7302d.png
[70 18]: /images/20220531/4e9ceefa934b4f9088280e86a8c265bd.png
[70 19]: /images/20220531/031944c0b0214784822c229650c05b61.png
[70 20]: /images/20220531/70f45a52135c4b93adcbc423bd3654a8.png
[70 21]: /images/20220531/20b79a02c7474f4ca934c03f1e7a7d1b.png
[70 22]: /images/20220531/fb20daf4f52f4ca2be851e2d3e61599f.png
[70 23]: /images/20220531/3f59cedde8114645812941f83d8ad6c1.png