[學習筆記] 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 是項目的目的平臺之一。