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

[学习笔记] Cordova+AmazeUI+React 作个通信录 系列文章javascript

目录

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

传送门:所有章节 示例代码html


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

由于是学习和实验的目的,所在并无准备要发布在 IOS 上,毕竟注册 IOS 的开发者仍是须要些成本的,况且个人 iPhone4 早就退休了,如今是 MI3 当值。java

选择

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

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

既然 Cordova 是用 HTML,CSS 和 JavaScript 来构建移动应用,那前端技术是确定少不了的。据说 React 挺火,因此决定一并学了。一开始没想用 UI 组件,可是既然是学习,也懒得本身去写样式了,干脆找个新鲜(对我来讲没用过的,因此新鲜)的 UI 组件了解下,因而选了有 React 组件的 AmazeUI。android

准备环境

Web 前端库

ReactAmazeUI React 直接从官网下载就好,只是 AmazeUI React 须要 jQuery 版 AmazeUI 的样式表,因此得下个。再加上以前一直用 jQuery 比较顺手,jQuery.Deferred 和 jQuery.ajax 都比较经常使用,因此顺手把 jQuery 也下了。nginx

Node.js 和 Cordova

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

安装 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

相关文章
相关标签/搜索