作者：Grey

原文地址：http://www.cnblogs.com/greyzeng/p/5455728.html

本文的GIF动画均使用ScreenToGif进行录制。

Cordova是什么？

http://cordova.apache.org/docs/en/latest/guide/overview/index.html

实例说明

  • HelloWorld
  • 拍照

开发环境

HelloWorld

在Visual Studio Community 2015中，选择：文件–>新建–>项目–>模板–>JavaScript–>Apache Cordova Apps–>空白应用(Apache Cordova)–>名称命名为：HelloCordova–>确定

运行程序(Android)：

打开Visual Studio Emulator for Android

选择一个Android模拟器，如：VS Emulator 5" KitKat(4.4) XXHDPI Phone

启动这个模拟器, 然后点击运行：

运行结果

运行程序(Windows Phone)

Windows Phone：选择Windows Phone(Universal), 选择一个模拟器，如：Mobile Emulator 10.0.10586.0 WVGA 4 inch 1GB, 点击运行：

运行结果

拍照

拍照功能需要额外下载插件，Visual Studio Community 2015提供了非常方便的插件下载安装机制, 在HelloCordova这个项目中，点击config.xml这个文件，

选择：插件–>核心–>Camera–>并点击添加按钮，即可把插件加到当前项目中。

代码清单

/HelloCordova/www/index.html

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>

        <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

        <meta name="format-detection" content="telephone=no">

        <meta name="msapplication-tap-highlight" content="no">

        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

        <link rel="stylesheet" type="text/css" href="css/index.css">

        <title>HelloCordova</title>

    </head>

    <body>

        <div>

            <h1 style="color:white">Take Photo</h1>

        </div>

        <div>

            <input id="btnTakePhoto" type="button" value="Take Photo" />

        </div>

        <div id="divPic"></div>

        <script type="text/javascript" src="cordova.js"></script>

        <script type="text/javascript" src="scripts/platformOverrides.js"></script>

        <script type="text/javascript" src="scripts/index.js"></script>

    </body>

</html>

/HelloCordova/www/scripts/index.js

(function () {

    "use strict";

    document.addEventListener( 'deviceready', onDeviceReady.bind( this ), false );

    function onDeviceReady() {

        document.addEventListener( 'pause', onPause.bind( this ), false );

        document.addEventListener( 'resume', onResume.bind( this ), false );

        document.getElementById('btnTakePhoto').onclick = function () {

            navigator.camera.getPicture(function (imageURI) {

                var pic = document.getElementById('divPic');

                pic.innerHTML = "<img src= '" + imageURI + "'/>";

            }, null, null);

        };

    };

    function onPause() {

        // TODO:

    };

    function onResume() {

        // TODO:

    };

} )();

运行结果（Android）：

运行结果（Windows Phone）：

更多：http://cordova.apache.org/

Visual Studio开发Cordova应用示例的更多相关文章

  1. SharePoint 2013 工作流之Visual Studio开发示例篇

    SharePoint 2013引用了WF4.0 Foundation,支持使用Designer和Visio进行设计,但是功能受限,而Visual Studio可以开发功能更加丰富的工作流,下面我们简单 ...

  2. 微软为Visual Studio开发助手拓展C++支持

    近日,微软宣布了一项 Visual Studio“开发助手”(Developer Assistant)插件的重大更新,其现已支持“基于 C++ 的情境感知 web 解决方案”.开发助手能够嵌入 Vis ...

  3. visual studio 开发linux程序

    VisualGDB支持Linux的原理是,通过ssh连接到Linux系统上通过ssh给linux下达命令 . (类似visualgdb的有windgb  ,这2个都是商业软件.) Visual GDB ...

  4. 解决无法连接到visual studio开发服务器的问题

    今天vs抽风,调试网站出现下图那样: 然后我开始百度搜索 "无法连接到visual studio开发服务器" 出现很多文章: 打开一篇问题,看了里面的内容, 那个解决办法也不是最好 ...

  5. Visual Studio 开发（二）：VS 2017配置FFmpeg开发环境

    在上篇文章Visual Studio 开发(一):安装配置Visual Studio Code 中,我们讲了一下如何配置VS CODE,来编写和调试C的代码.如果你已经使用VS Code回顾和复习好C ...

  6. visual studio开发工具的C#主流控件属性一览表

    visual studio开发工具的C#主流控件属性一览表 详细的介绍了各控制属性的详细中文介绍 C#控件及常用设计整理 1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程 ...

  7. 使用Visual Studio开发跨平台的iOS应用程序

    [原文发表地址]Developing cross-platform iOS application using Visual Studio [原文发表时间]2015/6/4 C ++是一种流行的高级编 ...

  8. 使用Visual Studio开发Python

    Python优秀的集成开发环境有PyCharm,Visual Studio Code等,当然你仍然可以使用Visual Studio进行开发.如果你熟悉Visual Studio,使用Visual S ...

  9. Visual Studio开发首选！DevExtreme v19.1.6全新来袭

    DevExtreme Complete Subscription是性能最优的 HTML5,CSS 和 JavaScript 移动.Web开发框架,可以直接在Visual Studio集成开发环境,构建 ...

随机推荐

  1. 不写1行代码，在Mac上体验ASP.NET 5的最简单方法

    昨天微软发布了ASP.NET 5 beta2(详见ASP.NET 5 Beta2 发布),对ASP.NET 5的好奇心又被激发了. 今天下午在Mac OS X上体验了一下ASP.NET 5,而且借助Y ...

  2. 我的ORM之示例项目

    我的ORM索引 示例项目 code.taobao.org/svn/MyMvcApp/ 1. 编译 MyTool ,DbEnt, WebApp, 安装JRE. 2. 配置 Web.config 数据库字 ...

  3. mongodb（回滚）

    事实上mongodb是不支持事务的,个人理解原因如下:1.避免大量对document加锁,从而影响性能,2.非关系型的数据库,从设计上就应能尽可能的比较关联复杂的多document,一个数据应能记录在 ...

  4. reactor & proactor 笔记

    1. 基本概念 1.1 同步/异步,针对应用程序和内核交互而言. 同步:进程触发IO操作等待或轮询查看IO操作是否完成: 异步:进程触发IO操作后仅需自身的处理,IO操作完成后会得到通知(异步的特点) ...

  5. MySQL1：MySQL函数汇总

    前言 MySQL提供了众多功能强大.方便易用的函数,使用这些函数,可以极大地提高用户对于数据库的管理效率,从而更加灵活地满足不同用户的需求.本文将MySQL的函数分类并汇总,以便以后用到的时候可以随时 ...

  6. 作业二：Github注册账户过程

    Github注册账户过程如下: Github的注册及使用说明: [1]http://www.aehyok.com/Blog/Detail/73.html [2] http://www.cnblogs. ...

  7. .net程序单元测试介绍

    什么是单元测试?为什么要进行单元测试?如需要进一步了解,请移步维基百科. 关于.net程序单元测试的文章,网上已经有很多,但我相信我写的这篇文章的内容是独特的,因为我在网上找了很久,都没找到关于Str ...

  8. appserv中php升级问题

    当前版本为2.1,要升级到2.3.4 那么,首先到http://windows.php.net/downloads/releases/archives/ 找到2.3.4,需要注意的是,一般我们是非nt ...

  9. Spring-Context之四:Spring容器及bean的定义

    Spring框架的核心功能之一就是控制反转(Inversion of Control, IoC),也叫做依赖注入(dependency injection, DI).关于依赖注入的具体内容可以参见Ma ...

  10. Java连接Oracle数据库开发银行管理系统【二、设计篇】

    一.总体分析     此系统的实现并不难,但是如何更好的设计出实现方式还是需要更深入的分析,例如:如果再增加其他功能,是不是需要变动的 代码很少,只是直接再增加一点功能就可以了呢?如果使用的不是Ora ...