Ionic的一些用法

Posted on 2017-03-23 Edited on 2019-03-12 In 技术

#使用ionic框架开发hybrid应用

什么是ionic？

Start building high-quality mobile apps with the tech you know and love.

根据官方的介绍结合本人的理解，ionic是cordova(phoneGap)加上一套移动端适配的样式和开发套件。

每个手机就像电脑一样，都带着自己的操作系统。如果你愿意，你可以从头写一个浏览器，把浏览地址隐藏了，这就像你的一个app了，对吧。当然，我们自己写浏览器，这也太难了，所以我们肯定不是这么做的。其实，我们只是基于各种手机上Web浏览器内核去做手脚，而Js是Web开发的最佳语言，至于如何封装成一个Web app？说实话，我也没有真正去探究过是如何去做的，通过一些移动开发框架，你只需要专注于写你的前端代码，然后通过一个开发框架的黑盒的操作，编译后就成了一个可以安装的App了。

什么是cordova(PhoneGap)?

一些背景小故事：

08年一次ios开发者大会上来自Nitobi软件公司的几个家伙突发奇想，提出一个想法，想做一个工具来弥补web 和ios开发之间的不足，并提出 Bridging the gap between the web and the iPhone sdk
09年他们推出android adk和blackberry sdk，成了移动开发者的福音，就连ibm也加入进来。phonegap继续成长，在2011年10月，整个Nitobi团队被adobe收购，PhoneGap的项目主管Brian LeRoux指出开源PhoneGap的决定在Adobe收购Nitobi之前就做出了，由于Adobe现在拥有PhoneGap商标，他们不得不换个名字，第一个选中的名字是Callback，毫无创意，因此再改一次，产品现在叫Apache Cordova。随后adobe把 phonegap送给了apache软件基金会，接着apache把phonegap改名为cordova，cordova是Nitobi团队当时坐落的街道名称，用此名来纪念Nitobi团队的贡献。

Cordova 框架图(图床挂了)

为什么要使用ionic？

为了web程序员可以抢移动端程序猿的饭碗。。。开个玩笑
为了更敏捷！！！ _write once run everywhere_！
原来的移动客户端开发—周期长，适配麻烦。为了覆盖iOS和android两个平台，不得不招两波程序员整天在公司互相鄙视，UI和产品要根据两种平台不同的设计语言来设计两套交互和原型，浪费人力物力。(扁平化 or Material)

关于移动端开发环境的搭建

0

比较关键的几个组件：

JDK
Android SDK
Node.js
Ionic, Cordova

Android

首先看一下官方教程,主要是一些环境变量配置：

Cordova官方配置教程

然后是IDE，首选的IDE当然是Google的AS

Android Studio

配置完毕后可以使用adb命令检查android SDK路径是否配置正确

举个栗子(图床挂了)

因为身在墙内，各位同学在更新SDK时肯定会遇到各种问题，可参考以下解决方案：

安卓开发者

如何打包?

当然可以直接使用内置脚手架工具来打包啦：

# Android
ionic run android --prod --release
# or
ionic build android --prod --release

iOS

苹果配置相对Android比较简单，相对麻烦的是开发者者账号和签名，我们可以使用自己的私有账号给应用签名发布在自己的手机上进行调适。

Cordova官方配置教程

如何打包？

参考官方 iOS打包发布

各平台如何调试？

如何调适？

以下为个人推荐:

Android 使用Chrome的inspect工具
iPhone 建议使用Mac Xcode的iPhone模拟器来调适