准备_w3cschool

准备环境

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 是项目的目的平台之一。