一边吃胸一边揉下面的视,久热爱精品视频线路一

準(zhǔn)備環(huán)境

Web 前端庫

React 和 AmazeUI React 直接從官網(wǎng)下載就好，只是 AmazeUI React 需要 jQuery 版 AmazeUI 的樣式表，所以得下個。再加上之前一直用 jQuery 比較順手，jQuery.Deferred 和 jQuery.ajax 都比較常用，所以順手把 jQuery 也下了。

Node.js 和 Cordova

然后就是準(zhǔn)備 Cordova，這個需要 NodeJs。之前在 NodeJs 發(fā)布 4.0 的就已經(jīng)裝近 NodeJs 了，倒是省了一步——不過在 Windows 下也就是下載個安裝文件來運(yùn)行而已，也不是啥麻煩事。

安裝 Cordova 用 npm 一句話就搞定

npm install -g cordova

很早以前曾經(jīng)簡單的試寫過 cordova 的 hello world，所以 cordova 是裝了的，只是版本比較老。用安裝命令直接升級，也還是方便。

Android SDK

Cordova 自己不帶 IOS 或者 Android 的 SDK，需要另裝。我在之前寫原生 Android 程序的時候就已經(jīng)安裝過了，只需要簡單的更新一下就好。

不過說起來在國內(nèi)安裝 Android SDK 的確不太容易，好在還有一些機(jī)構(gòu)提供了代理。下面就是中科院開源協(xié)會提供的代理，直接訪問可以下載 Android SDK 的安裝包。之后再通過 SDK Manager 更新就好，更新的時候可能需要設(shè)置代理，直接用下面的網(wǎng)址就可以作代理，端口80，可以不填。如果不懂怎么設(shè)置代碼，找度娘。

中科院開源協(xié)會
代理地址：mirrors.opencas.cn
備用地址1：mirrors.opencas.org
備用地址2：mirrors.opencas.ac.cn
端口：80

最后還得設(shè)置個環(huán)境變量，我也記不清到底是叫 ANDROID_SDK 還是叫 ANDROID_HOME 了所以干脆兩個都設(shè)置了

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

創(chuàng)建項(xiàng)目

既然是實(shí)驗(yàn)，所以習(xí)慣性的創(chuàng)建了個 hello 項(xiàng)目：

cordova create hello cn.jamesfancy.hello HelloWorld

用 cordova help create 很容易了解 create 命令的用法：第一個 hello 是項(xiàng)目目錄名稱；后面的 cn.jamesfancy.hello 是項(xiàng)目的 ID，用了 java 包的命名規(guī)則；第3個參數(shù)是一個給人工識別的名稱，它和ID的關(guān)系就像名字和身份證號的關(guān)系一樣。

然后，一個叫 hello 的目錄就存在于當(dāng)前目錄下了。進(jìn)去之后會看到一個 www 目錄，這就是“以前端方式寫App”的主要工作目錄。www 目錄里面已經(jīng)有了簡單的例子，Hello World 嘛，早就試過了，也沒啥新鮮的，

然后……總得做點(diǎn)有意義的事情吧，不能每次都試個 Hello World 就甩了，過兩個月再來打個招呼啊！

正好最近認(rèn)識了一群小伙伴，所以干脆做個通訊錄吧。正好在網(wǎng)上搜到一篇《Sample Mobile Application with React and Cordova》，也是做的通訊錄，邊學(xué)就邊做了。整個這篇文章都是在講 React 的，所以其實(shí)可以當(dāng)作 React 的入門教程。它所有的工作都在 www 目錄中完成了，只需要通過瀏覽器就可以運(yùn)行和簡單的調(diào)試了，不過需要個 Web 服務(wù)器。

用 IIS 太重，還是就用 nginx 吧。配置也是多簡單的，在 conf\nginx.conf 中改下 server 配置就好。不過在這之前我覺得還是給項(xiàng)目改個名字比較好——所以重新建了個項(xiàng)目

cordova create contacts cn.jamesfancy.contacts Contacts

然后改 nginx 的配置

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

寫 nginx 配置的時候有兩點(diǎn)需要注意：一個是路徑分隔符必須用 /，二個是注意每項(xiàng)配置后都得有個分號(;)——它不是 JSON 或者 javascript 對象格式。其它就沒啥特別的，把 nginx 運(yùn)行起來就能看到效果。

打開瀏覽器的控制臺，毫無懸念的會看到一個錯誤——因?yàn)闉g覽器會找不到 cordova.js。不過沒關(guān)系，現(xiàn)在用不到，部署在手機(jī)上的時候才有可能需要。但是也別從 index.html 里刪掉對它的引用，雖然瀏覽器調(diào)試不需要，部署在手機(jī)上還是需要的。

運(yùn)行 Hello World

雖然項(xiàng)目名稱改為 contacts 了，但是內(nèi)容還是沒變。在修改內(nèi)容之前，先試試環(huán)境。我不喜歡用模擬器，太慢，所以直接數(shù)據(jù)線接上手機(jī)，打開 USB 調(diào)試模式，連接成功之后

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

細(xì)心的程序員會注意執(zhí)行命令的當(dāng)前目錄的 ^_^，而且也一定會注意到在 run 之前先執(zhí)行了這句：

cordova platform add android

這句話在項(xiàng)目建好之后執(zhí)行一次就好，配置 android 是項(xiàng)目的目的平臺之一。