2

[学习笔记] 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 前端库

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

clipboard.png



边城
59.3k 声望29.3k 粉丝

一路从后端走来,终于走在了前端!