Cordova 好久不见

做过前端又做过 App 的, 大概都听过或者用过 Cordova(很早以前叫 PhoneGap), 知道通过 TA 可以让前端使用 Web 技术来开发 App, 而且是跨平台的, 只要开发一次, 就可以出来 iOS 版和 Android 版的 Hybrid App.

> Apache Cordova
>
> Mobile apps with HTML, CSS & JS
>
> Target multiple platforms with one code base
>
> * Reusable code across platforms
> * Support for offline scenarios
> * Access native device APIs

说起开发 App, 我经历过从`多页(Web) -> 单页(Web) -> 原生(Native)`的一个过程, Android App 开发还算是入了个门, 有点遗憾的是一直没入过 iOS 的坑(最近准备入坑弥补这个技术盲点).

想起几年前我还是用的 `cordova-2.6.0` 版本, 使用 TA 开发过 Android App "逛长沙通 - 长沙通手机App(非官方版)", 如今一看, 已经是 `6.x` 版本了, 真是岁月不饶人, 老了啊.

这样看来我和大家一样, 都算是新人了, 就让我们一起入门下 Cordova 开发 App 的 Hello World.

## 我准备好了

首先是安装环境了, 如果是从来没有开发过 App 的电脑, 一下子还是要安装蛮多东西的, 特别是各平台 App 的开发环境, 这里都是以 Android App 的 `Windows` 开发环境为例.

* Node.js
* Android 开发环境
* `npm install -g cordova`

开发环境都准备好后, 接下来就是使用 Cordova CLI 新建一个 cordova 项目, 运行项目看效果了.

```
$ cordova create hello-cordova
$ cd hello-cordova
$ cordova platform add browser android
```

到目前为止, 你最需要关心的就是 `www` 这个目录, 这里就是 App 主要的开发目录了, 里面放的是我们耳熟能详的 Web 资源, 什么 HTML/CSS/JS 等等, 通过这些来实现 App 的视图和逻辑, 总之跟你平时开发一般的 Web 没有太多区别.

接着我们运行项目

```
$ cordova run browser
```

不出什么问题的话, 执行完以上命令, 你就可以通过 `http://localhost:8001/index.html` 来查看 App 的效果了, 添加的 `browser` platform, 一般是用于开发阶段调试.

如果你修改了内容, 需要重新构建一下, 执行 `cordova build` 后, 刷新浏览器才能看见你修改的内容.

到目前为止, 我们还是感觉在做 Web 开发, 没有 App 的影子啊? 是时候将项目打包成 App 安装到手机上了. 但在此之前, 你需要通过 `USB` 将手机连接到电脑上, 并且**开启开发者选项, 开启 USB 调试模式**.

```
$ cordova run android
```

执行完以上命令后, 就会将 App 安装到你的手机上并且运行了.

## 碰到的问题

* 运行 `cordova run browser` 时, 出现如下错误后终止了

  > Windows 找不到文件 'chrome'。请确定文件名是否正确后，再试一次。

  这个是由于运行 `cordova run browser` 时, 会自动启动你的 Chrome 浏览器, 如果你的电脑没有安装, 就会导致执行失败. 因此只要你安装好 Chrome 浏览器就好了.

  如果你使用的是其他浏览器, 例如企鹅浏览器之类的, 不想再安装一个 Chrome, 那么可以通过小小修改下 `platforms/browser/cordova/run` 来解决这个问题
  
  ```javascript
  // 注释掉自动启动浏览器这一行, 直接 return 即可
  // return cordovaServe.launchBrowser({target: args.target, url: projectUrl});
  return;
  ```

## 意犹未尽

通过 Cordova 让我们可以使用 Web 技术来开发 App, 但仅仅是一个基础框架而已. 你开发出来的 App 可能更像是浏览器里面嵌了一个网站, 缺少原生 App 那丝滑般的用户体验. 说白了就是让人觉得这是网页而不是 App, 性能上有点卡卡的, 而且传统 PC 端 Web 的交互方式和 App 中的交互方式也有比较大的区别.

因此要开发一个体验良好, 功能完善的 App, 我们至少需要一个适合移动端的 UI 框架及一系列通用组件.

这时就轮到我们的 Ionic 闪亮登场了.

> Ionic Framework offers the best web and native app components for building highly interactive native and progressive web apps(with native-feeling) with Angular.
>
> Ionic is focused mainly on the look and feel, and UI interaction of your app.

下面就让我们以 `ionic 1.x` 为例来体验下 Ionic 的强大之处.
鉴于 Ionic 2 已经是 beta 2 版本了, 因此我们先简单了解下 ionic 1.x 与 2.x 版本的区别.
* Ionic 1.x 用的 Angluar 1.x, 例如: Ionic v1.3.2 | Angluar 1.5.3
* Ionic 2.x 用的 Angular 2.x

首先还是安装环境

```
$ npm install -g ionic
$ ionic start hello-ionic tabs
$ cd hello-ionic
$ ionic platform add android
```

Run your app in the browser (great for initial development)

```
$ ionic serve
```

Run on a device

```
$ ionic run android
```

辛苦了这么久, 最后让我们一起来欣赏下使用 Ionic 做出来的 App 最终的样子



顺便提一下 Ionic 提供了云端的服务, 比较好用的就是 Ionic Creator - Rapid Mobile App Builder, 可以很方便地将 APP 的架子迅速搭起来, 然后可以导出静态代码, 做为项目模版.