Apache Cordova 教程

前言:

本篇blog是翻译自Apache Cordova Tutorial
由于本人英文以及编程能力有限，所以可能翻译的不对，希望有看到的大神或者其他同仁们能帮忙指出，不胜感激。

单元1. **

---
1. 安装cordova  
	安装前需要先安装[Node.js](http://nodejs.org/)
2. 打开终端，输入下面的命令行：  
	`npm install －g cordova`或者`sudo npm install -g cordova`  
 	如果你已经安装了Cordova在你的电脑上，请更新到最新的版本  
	`npm update -g cordova`或者`sudo npm update -g cordova`
3. 定位(cd)到你要放项目的目录下
4. 使用cordova CLI，在一个名为__workshop__的目录下创建一个名为__Workshop__的Cordova项目：  
	`cordova create workshop com.yourname.workshop Workshop`
5.	`cd workshop`
6.	添加支持iOS平台（可选）  
	6.1 确定iOS SDK在你的系统中是可用的。
	6.2 确定你是在__workshop__路径下的命令行，然后输入:  
	`cordova platforms add ios`
7. 添加支持android平台（可选）
8. 确保你在__workshop__目录下，然后添加基础的插件到你的项目中去:

		cordova plugin add org.apache.cordova.device
		cordova plugin add org.apache.cordova.console

9. 检查在workshop目录下的路径结构:
- __www__文件夹是你存放HTML/JavaScript.通过浏览器打开被Cordova  CLI创建的应用程序的index.html文件。
- __platforms__文件夹是Cordova为你在不同的平台（ios，android等）编译你的应用程序。这个文件夹下面的内容是通过Cordova CLI自动生成的，你永远不应该修改这个目录下的内容。
- 插件是被安装在__plugins__目录下的。
- 应用程序的参数（名字，作者等）是存储在__config.xml__下的。

**单元2.** **```编译一个Cordova项目:

---

1. 为ios平台编译
2. 确定当前是在workshop目录下，然后输入:
   cordova build ios
   双击workshop/platforms/ios目录下的Workshop.xcodeproj文件。
   或着通过命令行在iOS emulator目录下运行该应用程序。第一次安装ios-sim:
   npm install -g ios-sim或者sudo npm install -g ios-sim
   然后在ios模拟器中运行这个应用程序:
   cordova emulate ios

单元3. 设置Workshop的文件:

1. 删除项目中的workshop/www目录下的内容：
2. 下载本教程的支持文件传送门,或者从仓库中clone下来:
   git clone https://github.com/ccoenraets/cordova-tutorial
3. 下载后，解压到你的电脑上。
4. 拷贝starter-www内的东西到你项目的workshop/www文件夹下。
5. 编译测试你的应用程序：
   • 如果已经有Mobile SDK，则直接重复单元2的步骤。
   • 如果没有，就用浏览器打开www/index.html。

单元4. 选择数据存储策略:

1. 探索不懂的持久化机制
   打开下面的文件然后探索不同的持久化服务：

   1. www/js/services/memory/EmployeeService.js
   2. www/js/services/json/EmployeeService.js
   3. www/js/services/localstorate/EmployeeService.js
   4. www/js/services/websql/EmployeeService.js

2. 使用不同的持久化机制测试应用程序：
   应用程序初始化配置为内存数据存储的。改变应用程序的本地持久化机制。

   1. 在index.html:替换js/services/memory/EmployeeService.js字符串，比如替换为js/services/websql/EmployeeService.js
   2. 测试应用程序(在浏览器下测试)
      为了测试JSON服务，确保Node.js服务提供的某些功能有在运行：
      1. 打开命令行，来到cordova-tutorial目录下的server目录
      2. 安装服务依赖：
         npm install
      3. 启动服务
         node server

单元5. 使用原生通知:

默认的JavaScript弹窗总是面临着这样子的问题：不是原生的（或者不是本地的）。这里当我们运行在移动设备时将显示原生的弹窗，然后使用浏览器的时候将自动用回JavaScript的弹窗。

1. 确保你在workshop目录下，然后添加原生对话框插件到你的项目中:
   cordova plugin add org.apache.cordova.dialogs

2. 在index.html中，加上下面的脚本标签(作为body底部的第一个script标签):
   `

   这个委托Cordova CLI在编译时，注入一个特殊的cordova.js版本到平台。
   换句话说，cordova.js 不需要（也不应该）出现在你 project/www 文件夹下。
   

3. 当运行在移动设备上时，navigator.notification对象是available（对话框插件已经安装了的）时，会覆盖window.alert()方法并且替换它的默认实现通过调用navigator.notification.alert()
   打开js/app.js,然后加入下面的代码到”Event Registration”块中：

   document.addEventListener('deviceready', function () {
     if (navigator.notification) { // Override default HTML alert with native dialog
         window.alert = function (message) {
         navigator.notification.alert(
         message,    // message
         null,       // callback
         "Workshop", // title
         'OK'        // buttonName
     );
   

   };
   }
   }, false);

4. 测试应用程序：点击help按钮。

单元6. 避免300ms的点击延迟:

1. 测试你的应用程序:点击Help按钮，注意对话框弹出的延迟时间。

   这个延迟的出现是因为操作系统在等待300ms来判断用户是否要再点击按钮一次（然后处理双击事件）
   

2. 再index.html中，加入下面的脚本标签:

   `script src="lib/fastclick.js"></script>`
   
   `FastClick 是Financial Times的一个开源库。更多资讯在`
   

   这里

3. 在app.js中，注册FastClick到deviceready event handler中。

   FastClick.attach(document.body);
   

测试应用程序：点击Help按钮，然后可以看到消息弹出是没有延迟的。