[学习笔记] Cordova+AmazeUI+React 做个通讯录 - 准备

[学习笔记] Cordova+AmazeUI+React 做个通讯录 系列文章

目录

1. 准备
2. 联系人列表(1)
3. 联系人列表(2)
4. 联系人详情
5. 单页应用 (With Router)
6. 使用 SQLite

---

传送门：全部章节 示例代码

---

序

本来做通讯录不是目的，目的是为了学习。要说原生的 Android 程序也不是不会写，只是学习界面搭起来麻烦，现今有这么多基于前端的移动应用框架，干嘛不了解下呢？

因为是学习和实验的目的，所在并没有准备要发布在 IOS 上，毕竟注册 IOS 的开发者还是需要些成本的，何况我的 iPhone4 早就退休了，现在是 MI3 当值。

选择

很早以前就大概了解了一下 PhoneGap 以及由 PhoneGap 更名而来的 Cordova。而且最近发布的 Visual Studio 2015 也挂了 Cordova 的开发工具。所以理所当然的首先想试试 Cordova。然后不了解一下其它的工具，还是有点不死心啊，所以也大概了解了一下 NativeScript 和 React Native for Android。

React Native for Android 没看得太明白。NativeScript 倒看懂了些，也跟着 Tutorial 写了个 Task Manager 出来。不过相比之下，提到 Cordova 的声音要多一些，所以就选用 Cordova 了。

既然 Cordova 是用 HTML，CSS 和 JavaScript 来构建移动应用，那前端技术是肯定少不了的。听说 React 挺火，所以决定一并学了。一开始没想用 UI 组件，但是既然是学习，也懒得自己去写样式了，干脆找个新鲜（对我来说没用过的，所以新鲜）的 UI 组件了解下，于是选了有 React 组件的 AmazeUI。

准备环境

Web 前端库

React 和 AmazeUI React 直接从官网下载就好，只是 AmazeUI React 需要 jQuery 版 AmazeUI 的样式表，所以得下个。再加上之前一直用 jQuery 比较顺手，jQuery.Deferred 和 jQuery.ajax 都比较常用，所以顺手把 jQuery 也下了。

Node.js 和 Cordova

然后就是准备 Cordova，这个需要 NodeJs。之前在 NodeJs 发布 4.0 的就已经装近 NodeJs 了，倒是省了一步——不过在 Windows 下也就是下载个安装文件来运行而已，也不是啥麻烦事。

安装 Cordova 用 npm 一句话就搞定

npm install -g cordova

很早以前曾经简单的试写过 cordova 的 hello world，所以 cordova 是装了的，只是版本比较老。用安装命令直接升级，也还是方便。

Android SDK

Cordova 自己不带 IOS 或者 Android 的 SDK，需要另装。我在之前写原生 Android 程序的时候就已经安装过了，只需要简单的更新一下就好。

不过说起来在国内安装 Android SDK 的确不太容易，好在还有一些机构提供了代理。下面就是中科院开源协会提供的代理，直接访问可以下载 Android SDK 的安装包。之后再通过 SDK Manager 更新就好，更新的时候可能需要设置代理，直接用下面的网址就可以作代理，端口80，可以不填。如果不懂怎么设置代码，找度娘。

中科院开源协会
代理地址：mirrors.opencas.cn
备用地址1：mirrors.opencas.org
备用地址2：mirrors.opencas.ac.cn
端口：80

最后还得设置个环境变量，我也记不清到底是叫 ANDROID_SDK 还是叫 ANDROID_HOME 了所以干脆两个都设置了

ANDROID_HOME=C:\local\Android\sdk
ANDROID_SDK=C:\local\Android\sdk

创建项目

既然是实验，所以习惯性的创建了个 hello 项目：

cordova create hello cn.jamesfancy.hello HelloWorld

用 cordova help create 很容易了解 create 命令的用法：第一个 hello 是项目目录名称；后面的 cn.jamesfancy.hello 是项目的 ID，用了 java 包的命名规则；第3个参数是一个给人工识别的名称，它和ID的关系就像名字和身份证号的关系一样。

然后，一个叫 hello 的目录就存在于当前目录下了。进去之后会看到一个 www 目录，这就是“以前端方式写App”的主要工作目录。www 目录里面已经有了简单的例子，Hello World 嘛，早就试过了，也没啥新鲜的，

然后……总得做点有意义的事情吧，不能每次都试个 Hello World 就甩了，过两个月再来打个招呼啊！

正好最近认识了一群小伙伴，所以干脆做个通讯录吧。正好在网上搜到一篇《Sample Mobile Application with React and Cordova》，也是做的通讯录，边学就边做了。整个这篇文章都是在讲 React 的，所以其实可以当作 React 的入门教程。它所有的工作都在 www 目录中完成了，只需要通过浏览器就可以运行和简单的调试了，不过需要个 Web 服务器。

用 IIS 太重，还是就用 nginx 吧。配置也是多简单的，在 conf\nginx.conf 中改下 server 配置就好。不过在这之前我觉得还是给项目改个名字比较好——所以重新建了个项目

cordova create contacts cn.jamesfancy.contacts Contacts

然后改 nginx 的配置

    server {
        listen       80;
        server_name  localhost;
        location / {
            root    c:/_james/contacts/www;
            index   index.html;
        }
    }

写 nginx 配置的时候有两点需要注意：一个是路径分隔符必须用 /，二个是注意每项配置后都得有个分号(;)——它不是 JSON 或者 javascript 对象格式。其它就没啥特别的，把 nginx 运行起来就能看到效果。

打开浏览器的控制台，毫无悬念的会看到一个错误——因为浏览器会找不到 cordova.js。不过没关系，现在用不到，部署在手机上的时候才有可能需要。但是也别从 index.html 里删掉对它的引用，虽然浏览器调试不需要，部署在手机上还是需要的。

运行 Hello World

虽然项目名称改为 contacts 了，但是内容还是没变。在修改内容之前，先试试环境。我不喜欢用模拟器，太慢，所以直接数据线接上手机，打开 USB 调试模式，连接成功之后

c:\_james\contact> cordova platform add android
c:\_james\contact> cordova run android

细心的程序员会注意执行命令的当前目录的 ^_^，而且也一定会注意到在 run 之前先执行了这句：

cordova platform add android

这句话在项目建好之后执行一次就好，配置 android 是项目的目的平台之一。

---