一：创建一个Cordova 项目：
1、确保安装了最新的Node.js。2、cmd打开Windows系统的命令行窗口，输入npm install -g cordova3、然后cd到一个目录，该目录下会保存您的项目。4、创建一个名为“workshop的项目：cordova create workshop com.yourname.workshop Workshop5、转到项目目录：cd workshop6、添加Android平台支持：cordova platforms add android7、添加控件（确保现在仍然在workshop目录下）：cordova plugin add org.apache.cordova.devicecordova plugin add org.apache.cordova.console8、现在可以看看workshop目录下的项目结构。二：构造一个Cordova项目：确保电脑上安装了Android SDK。（为了workshop/platforms/android下的项目并在在真实设备上运行它（前提是你的Android机已经通过USB和电脑连起来了），输入：cordova run android为了在模拟器上整，可以输入：cordova emulate android三：准备Workshop文件：1、下载assets，解压。3、删除工程（通过上面的步骤创建出来的项目）workshop/www目录下除了config.xml以外的其他所有文件。4、将下载的www下的内容拷贝到workshop/www下。5、cordova run android 在手机上测试下。四：选择一个本地存储选项：第1步：看看几种不同的持久化机制：workshop/js/adapters下的文件提供了几个adapter：1.MemoryAdapter (memory-adapter.js中)2.JSONPAdapter (jsonp-adapter.js中)3.LocalStorageAdapter (localstorage-adapter.js中)4.WebSqlAdapter (websql-adapter.js中)第2步：用几中不同的持久化机制测试程序：默认情况下，程序支持提内存数据存储，为了变更程序本地的数据存储，需要以下几步：1、在index.html中：不要导入memory-adapter.js，而是将你需要的js导入，比如jsonp-adapter.js或localstorage-adapter.js或websql-adapter.js。2、在js/app.js中：实例化你选择的adapter（JSonAdapter或LocalStorageAdapter或WebSqlAdapter)，以代替MemoryAdapter的实例化。3、测试程序。五：使用本地Notification：一个默认的JavaScript Alert会让人觉得你的程序不是本地的。我们可以做一些工作，使得程序在手机上运行时显示本地弹窗，在浏览器中运行时显示JavaScript弹窗。1、为项目添加本地对话框插件：cordova plugin add org.apache.cordova.dialogs2、在index.html中添加下面的一行：<script src="cordova.js"></script>，让其作为body底部的第一个script标签（打开index.html可以看到底部已经导入几个js文件了）。这会告诉Cordova CLI在构建项目时注入一个特定版本的cordova.js。意思就是，cordova.js不需要预先保存在项目目录下。3、用下面的代码替换”Event Registration“代码块：document.addEventListener(‘deviceready’, function () { if (navigator.notification) { window.alert = function (message) { navigator.notification.alert(Message,Null,“Workshop”,‘OK’ ); }; } }, false);当在移动设备上运行时，navigator.notification是可用的，if成立（当然，前提是你已经安装了对话框插件，我们上面已经安装过了），就覆盖了默认的alter实现。4、测试程序：点击”help“按钮，当在浏览器上运行时显示的是浏览器中的alter窗口，当在手机上运行时显示的就是手机设备本地的Notification窗口。六：避免300毫秒的点击延时七：打造一个单页程序：这里指的是只有一个HTML页面的程序。1、index.html：将body中的HTML标签移除（script除外）2、在app.js的立即函数中定义一个renderHomeView函数，在findByName函数右边）。函数的功能是：给body标签动态地添加内容：function renderHomeView() { var html="<h1>Directory</h1>" + "<input class=’search-key’ type=’search’ placeholder=’Enter name’/>" + "<ul class=’employee-list’></ul>"; $(‘body’).html(html); $(‘.search-key’).on(‘keyup’, findByName); }3、更data adapter的初始化逻辑：adapter初始化后，调用renderHomeView函数：var adapter = new MemoryAdapter();adapter.initialize().done(function () { renderHomeView();});4、把Event-Registration代码块中的这一行$(‘.search-key’).on(‘keyup’, findByName);注释掉，毕竟我们已经在renderHomeView写过了。5、把Event-Registration代码块中的Help Button响应事件代码也移除，因为现在已经没这个按钮了。6、测试程序。八：使用处理条模板：通过Javascript编程的方式动态插入HTML碎片是非常不爽的，HTML模板解决这个问题的办法就是：将UI的定义(HTML)从代码中分离出来，有几个很不错的HTML模板，包括Mustache.js，Handlebars.js和Undercore.js等。在这一部分，我们创建两个模板，让程序更加合理。我们使用Handlebars.js，按如下的步骤更新index.html：1、包含Handlebars.js（注意，要加到body底部的最上面，至少不要加到app.js的下面，因为app.js里用到了Handlebars）：<script src="lib/handlebars.js"></script>2、创建一个HTML模板来渲染Home View，让下面的代码作为body的第一个子标签：<script id="home-tpl" type="text/x-handlebars-template"><div class="topcoat-navigation-bar"><div class="topcoat-navigation-bar__item center full"><h1 class="topcoat-navigation-bar__title">Employee Directory</h1></div></div><div class="search-bar"><input type="search" placeholder="search" class="topcoat-search-input search-key"></div><div class="topcoat-list__container"><ul class="topcoat-list list employee-list"></ul></div></script>3、创建一个HTML模板来呈现员工列表项，下面的代码紧跟在上面添加的代码后面： <script id="employee-li-tpl" type="text/x-handlebars-template">{ {#.}}<li class="topcoat-list__item"><a href="#employees/{ {id}}"><img src="assets/pics/{ {pic}}"><p>{ {FirstName}} { {LastName}}</p><p>{ {title}}</p><span class="chevron"></span><span class="count">{ {reports}}</span></a></li>{ {/.}}</script>4、把topcoat-mobile-light.css和styles.css引入到index.html：<link href="assets/topcoat/css/topcoat-mobile-light.css" rel="stylesheet"><link href="assets/css/styles.css" rel="stylesheet">更新app.js的立即函数：1、在adapter变量的声明后面紧跟下面两行：var homeTpl = Handlebars.compile($("#home-tpl").html());var employeeLiTpl = Handlebars.compile($("#employee-li-tpl").html());这两个变量保存着上面定义的两个模板的编译后的版本号2、更新renderHomeView函数，以使用homtTpl模板来代替内联HTML：function renderHomeView() { $('body').html(homeTpl());$('.search-key').on('keyup', findByName);}3、更新findByName函数，以使用employeeLITpl来代替内联HTML：function findByName() { adapter.findByName($('.search-key').val()).done(function (employees) { $('.employee-list').html(employeeLiTpl(employees)); });}4、测试。九：创建一个视图类：是时候把我们的程序结构化一下了。如果一直往app.js的立即函数里给程序添加功能，功能多了后就会难以维护。这部分，我们会创建一个HomeView对象，它封装了创建、渲染Home View的逻辑。第1步：创建HomeView类：a、在js目录下创建一个HomeView.js文件，里面的代码如下：var HomeView = function (adapter, template, listItemTemplate) { }该构造有三个参数：数据适配器，Home View Template，以及员工列表项Template。b、在HomeView构造里定义一个Initialize函数。为HomeView定义一个div，用来绑定一些视图相关的事件，在构造内调用Initialize函数。c、将renderHomeView函数从app.js里移到HomeView构造里。为了视图重用，我们将HTML绑定到div而不是body上。将renderHomeView重命名为render：this.render = function() { this.el.html(template());return this;};d、将findByName也移到HomeView中：this.findByName = function() { adapter.findByName($('.search-key').val()).done(function(employees) { $('.employee-list').html(listItemTemplate(employees)); });};第2步：使用HomeView：a、在index.html中包含HomeView.js（在app.js引入之前）。b、在app.js中移除renderHomeView。c、同理移除findByName。d、更新适配器初始化逻辑，从而当适配器成功初始化后显示Home View。将adapter,Home View Template,员工列表项template作为参数传给HomeView构造：adapter.initialize().done(function () { $('body').html(new HomeView(adapter, homeTpl, employeeLiTpl).render().el);});e、测试。KeyMob作为目前国内最专业的手机广告优化管理平台,整合了内外多家主流手机广告联盟平台,覆盖数千万用户.开发者不但可以通过KeyMob进行应用交叉推广,成功的将应用推广到移动网络每个应用市场,让更多的应用开发者在交叉推广过程中赚取大量的收入。