ionic实战系列(一)：ionic的开发环境配置和编译、发布

青旅半醒 2022-05-21 11:16 281阅读 0赞

# 1.1技术栈模型   #

Ionic的工作原理是通过cordova把一个Web应用嵌入原生应用。以下两张图介绍了Ionic的技术栈模型和Hybrid应用和其它类型的应用的区别，一目了然。

![1028445-20170201212227729-1293187373.png][]

ionic技术栈模型

比较原生应用、移动端网站和Hybrid应用的架构

**原生应用**

ios使用Objective-C，或者Swift。Android使用java。优缺点就不赘述了。

**移动端网站(web应用)**

移动端网站免安装、跨平台，并且没有任何审核流程，缺点是不具备原生访问能力，它依赖于浏览器的功能。(用户更习惯使用app，而不是输入网址、访问移动端网站)

**Hybrid应用**

它一次开发，多个平台部署，能够最小化开发成本，它使用web技术开发，又能访问原生API。当然从性能上由于依赖于webview所以性能比不上原生应用，原生功能的访问也取决于相应的插件有没有被开发出来或者其他方法。

![1028445-20170201212806151-1105898923.png][]

Cordova的任务是**实现浏览器窗口和原生API的通信**。(桥梁)

**背景**:PhoneGap是adobe公司收购的，adobe公司就把PhoneGap的核心抽出来贡献给apache。PhoneGap会继续存在，它和cordova的关系就像chrome浏览器的内核是Webkit一样。也可以说PhoneGap是商业的Cordova。(这是百度资料，可是我想看看最新资料是如何陈述的。)

Ionic应用打开照相机时整个技术栈的工作流程:

1.用户单击按钮

2.按钮调用Angular控制器，控制器会通过javascript API调用cordova。

3.cordova使用原生SDK和设备通信，请求使用照相机应用。

4.设备打开照相机应用(或者请求用户授权)，用户可以照相。

5.用户确定照片之后，照相机应用关闭，把图片数据返回给Cordova。

6.Cordova把图片数据传递到Angular的控制器。

7.图片会更新到Ionic组件中。

1.2.Hybrid应用和其他移动端应用的区别

![1028445-20170201212322151-1721067924.png][]

1.3 ionic支持的移动平台

[http://ionicframework.com/docs/overview/][http_ionicframework.com_docs_overview]原文如下

## [Browser Support][] ##

### Ionic 1 ###

Ionic V1 is focused on building **native/hybrid** mobile apps rather than mobile websites.

As such, our browser support tends to be whatever Web View API is available to native apps on a given platform. For Ionic 1x, that means UIWebView for iOS 7+, and Android 4.1 and up. We recommend using [Crosswalk][] to improve performance on older devices.

### Ionic 2 ###

Ionic 2 is focused on building both native/hybrid apps through Cordova, as well as adding the ability for [Progressive Web Apps][] and [Electron][] .

The following OSs and browsers are supported:

*  iOS 8+
 *  Windows 10 Universal App
 *  Android 4.4+
    
     *  Support can be pushed back to 4.1 if Crosswalk is used with Cordova

翻译:

ionic1

Ionic1版本更多的是创建原生/混合式应用，而非移动端网站。因为这样的原因，我们的浏览器支持趋向于在给定的移动端平台对于原生APP的webview能够访问到的任何接口API。对于Ionic1来说，它意味着ios7+和android 4.1+的webview。我们推荐使用crosswalk来提高旧版本设备的性能。

ionic2

Ionic2版本通过cordova来创建原生/混合式应用，也增加了创建web app和electron(一种桌面应用构建方式)的能力。

它支持的系统和浏览器是:

*  iOS 8+
 *  Windows 10 Universal App
 *  Android 4.4+(Support can be pushed back to 4.1 if Crosswalk is used with Cordova)

#    2.1  设置开发环境:安装node.js、Ionic CLI和cordova #

chapter2 配置开发环境

安装node.js

由于Ionic和Cordova都是基于Node开发的，那么要安装它。https://nodejs.org/en/download/下载最新稳定版本msi或者exe。安装非常简单，傻瓜式操作，简单的选定目录就好了，安装的过程已经自动把path环境变量写好了。

测试node是否安装成功

node -v

npm -v

测试是否安装成功，只需要在命令提示符cmd中任何位置输入node -v，如果出现node的版本信息，那么安装成功。同时npm是node package manager，也就是node包管理器，那么输入npm -v检测npm的版本，npm也是后续安装最核心的命令。

node安装推荐升级到最新稳定版。

安装Ionic CLI

Ionic CLI 是指command-line interface，它有很多ionic命令。

npm install –g ionic           全局安装ionic

npm install –g ionic@1.3  安装1.3版本的ionic

npm update –g ionic         更新ionic

ionic –v                              打印当前安装好的ionic版本

安装Cordova

npm install –g cordova           全局安装ionic

npm install –g cordova@4.2  安装4.2版本的ionic

npm update –g cordova         更新ionic

cordova –v                              打印当前安装好的ionic版本

# 2.2 配置新项目 #

使用ionic的start命令生成一个示例项目脚手架

ionic start chapter2

创建一个名字为chapter2的新项目，采用默认的tabs模板。

**这是ionic项目通用的结构。**

**cordova相关的文件和目录是config.xml、hooks、platforms、plugins和www，剩下的都是ionic创建的。**

**![1028445-20170203113716589-1953696150.png][]**

www目录包含webview中需要运行的所有web应用文件，

它会假设目录中存在index.html文件，除掉这个限制，其他文件都可以随意的组织。

![1028445-20170203113758933-266412040.png][]

2.3 安装平台工具和模拟器

2.4 给项目添加平台，在模拟器中预览和在移动设备上预览

第三章   编译并发布应用，以android为例

3.1.环境要求:  
运行javac，android --help,ant -version检测  
3.2.调试:  
给项目添加平台  
ionic platform add android  
(cordova platform add android)  
部署到android设备  
ionic build android  
(platforms/android/\*\*\*/-debug.apk  
3.3.编译上线应用的准备:  
(1)移除cordova console插件:它允许我们对app进行调试，  
但在线上应用中就不需要这个操作了。使用cordova plugin rm org.apache.cordova.console  
命令从应用中移除它。  
(2)移除不需要的文件  
删掉不需要的文件，以减少文件体积。  
(3)移除库中不使用的文件。www/libs目录。  
(4)使用压缩代码  
(5)使用压缩图片  
3.4.编译并发布  
step1:创建启动页面图片  
ionic resources  
(resources/android/splash.png，默认resources/splash.png)  
step2:配置签名  
keytool -genkey -v -keystore my-release-key.keystore -alias finance -keyalg RSA -keysize 2048 -validity 10000  
(生成一个有效期是10000天的keystore)  
Step3：编译命令  
cordova build android --release  
step4:配置签名文件  
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore D:\\finance-app\\finance-app\\platforms\\android\\build\\outputs\\apk\\android-release-unsigned.apk finance  
step5:jarsigner命令测试  
jarsigner -verify -verbose -certs D:\\finance-app\\finance-app\\platforms\\android\\build\\outputs\\apk\\android-release-unsigned.apk  
step6:优化APK文件(zipalign工具专门做这个事情)  
zipalign.exe -v 4 D:\\finance-app\\finance-app\\platforms\\android\\build\\outputs\\apk\\android-release-unsigned.apk D:\\finance-app\\finance-app\\platforms\\android\\finance.apk  
(finance.apk就是最终版文件)  
3.5.夜神模拟器比Android studio的模拟器快。

[1028445-20170201212227729-1293187373.png]: /images/20220521/9c0977e6bc1f428cacfef2b8af94e7e9.png
[1028445-20170201212806151-1105898923.png]: /images/20220521/4e23bda65f8f4570a8f90f354fba5570.png
[1028445-20170201212322151-1721067924.png]: /images/20220521/351c2492e9ae40c6b8ac77d188c6e5bd.png
[http_ionicframework.com_docs_overview]: http://ionicframework.com/docs/overview/
[Browser Support]: http://ionicframework.com/docs/overview/#browser-support
[Crosswalk]: https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview
[Progressive Web Apps]: http://ionicframework.com/docs/v2/resources/progressive-web-apps/
[Electron]: http://electron.atom.io/
[1028445-20170203113716589-1953696150.png]: /images/20220521/e0629e3193a64416bf917c4919723123.png
[1028445-20170203113758933-266412040.png]: /images/20220521/13dd344315a34fb09e9fdec286756f8a.png