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

      个人ionic实战系列是基于<<Ionic实战>>【美】Jeremy Wilken著-这本书的读书笔记，有诸多借鉴，不详细的地方请参考书籍自己的内容。

1.1技术栈模型  

 

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

    

                                                ionic技术栈模型

    

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

 

 

原生应用

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

移动端网站(web应用)

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

Hybrid应用

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

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应用和其余移动端应用的区别

 

1.3 ionic支持的移动平台

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

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建立的。

www目录包含webview中须要运行的全部web应用文件，

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

   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.apk3.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的模拟器快。