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.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的模拟器快。
ionic实战系列(一):ionic的开发环境配置和编译、发布的更多相关文章
- [eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置
[eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置 https://github.com/dotnet-architecture/eShopOnContain ...
- 《python3网络爬虫开发实战》第一章、开发环境配置-问题汇总
开发环境: VMware虚拟机 Ubuntu18.04 python3.6 (由于对vi操作水平有限,所以大部分都用的gedit进行文件编辑) 换源: 刚装上系统后换了好几个源,就清华源感觉好使点,别 ...
- 开发环境配置--Ubuntu+Qt4+OpenCV(一)
同系列的文章 1. 开发环境配置--Ubuntu+Qt4+OpenCV(一) 2. 开发环境配置--Ubuntu+Qt4+OpenCV(二) 3. 开发环境配置--Ubuntu+Qt4+OpenCV( ...
- Ionic 入门与实战之第二章第一节:Ionic 环境搭建之开发环境配置
原文发表于我的技术博客 本文是「Ionic 入门与实战」系列连载的第二章第一节,主要对 Ionic 的开发环境配置做了简要的介绍,本文介绍的开发环境为 Mac 系统,Windows 系统基本类似,少许 ...
- 【Xamarin挖墙脚系列:Xamarin开发环境配置需求】
原文:[Xamarin挖墙脚系列:Xamarin开发环境配置需求] 前言 因为操作的全是大块头,加大你们的内存,CPU网上飙.... 卤煮的机器配置 最近的版本部署包,百度云离线下载:版本:Xama ...
- 《React Native 精解与实战》书籍连载「Node.js 简介与 React Native 开发环境配置」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
- java web开发环境配置系列(二)安装tomcat
在今天,读书有时是件“麻烦”事.它需要你付出时间,付出精力,还要付出一份心境.--仅以<java web开发环境配置系列>来祭奠那逝去的…… 1.下载tomcat压缩包,进入官网http: ...
- java web开发环境配置系列(一)安装JDK
在今天,读书有时是件“麻烦”事.它需要你付出时间,付出精力,还要付出一份心境.--仅以<java web开发环境配置系列>来祭奠那逝去的…… 1.下载JDK文件(http://www.or ...
- PHP开发环境配置系列(四)-XAMPP常用信息
PHP开发环境配置系列(四)-XAMPP常用信息 博客分类: PHP开发环境配置系列 xamppphp 完成了前面三篇后(<PHP开发环境配置系列(一)-Apache无法启动(SSL冲突)> ...
随机推荐
- 【jquery】ajax请求
1. defferred对象 实现链式回调函数编程. http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_d ...
- Promise和异步编程
前面的话 JS有很多强大的功能,其中一个是它可以轻松地搞定异步编程.作为一门为Web而生的语言,它从一开始就需要能够响应异步的用户交互,如点击和按键操作等.Node.js用回调函数代替了事件,使异步编 ...
- Python零基础学习系列之一--初识计算机!
1-1.计算机概念: Computer: 原指专门负责计算的人,后来演变成特指计算设备,译为"计算机" 计算机的概念: 计算机是能够根据一组指令操作数据的机器. A compute ...
- Java 期末考试
一: 题目:打印出100-999之间所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身. 例如:153是一个"水仙花 ...
- Redux源码分析之bindActionCreators
Redux源码分析之基本概念 Redux源码分析之createStore Redux源码分析之bindActionCreators Redux源码分析之combineReducers Redux源码分 ...
- 双向循环链表(C语言描述)(二)
链表的基本操作基于对链表的遍历:计算链表的长度就是对链表进行一次遍历: int linkedlist_length(const LinkedList list) { assert(list); ; L ...
- Kafka 存储机制和副本
1.概述 Kafka 快速稳定的发展,得到越来越多开发者和使用者的青睐.它的流行得益于它底层的设计和操作简单,存储系统高效,以及充分利用磁盘顺序读写等特性,和其实时在线的业务场景.对于Kafka来说, ...
- [STL] day 1~2 Problem Set
Q#1 #include <cmath> #include <cstdio> #include <vector> #include <iostream> ...
- macOS下加载动态库dylib报"code signature invalid"错误的解决办法
一.现象描述 在macOS上搞开发也有一段时间了,也积攒了一定的经验.然而,今天在替换工程中的一个动态库时还是碰到了一个问题.原来工程中用的是一个静态库,调试时发现有问题就把它替换成了动态库.这本来没 ...
- 什么是IAT重定向
例壳:telock 0.98 仅允许非商业转载,转载请注明出处