作者：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. .Net平台下，分布式文件存储的实现

    遇到的问题 对于Web程序,使用一台服务器的时候,客户端上传的文件一般也都是存储在这台服务器上.但在集群环境中就行不通了,如果每个服务器都存储自己接受到的文件,就乱套了,数据库中明明有这个附件的记录, ...

  2. Redis 系列 (一) StackExchange.Redis的使用

    一.DLL安装 用NuGet搜索StackExchange.Redis,然后下载就可以. ConnectionMultiplexer对象是StackExchange.Redis最中枢的对象.这个类的实 ...

  3. .NET跨平台实践：用C#开发Linux守护进程（转）

    Linux守护进程(Daemon)是Linux的后台服务进程,它脱离了与控制终端的关联,直接由Linux init进程管理其生命周期,即使你关闭了控制台,daemon也能在后台正常工作. 一句话,为L ...

  4. Actor的原理

    先从著名的c10k问题谈起.有一个叫Dan Kegel的人在网上(http://www.kegel.com/c10k.html)提出:现在的硬件应该能够让一台机器支持10000个并发的client.然 ...

  5. Oracle存在修改，不存在插入记录

    接触编程以来,在数据存储方面一直用的MS SQL.Oracle这名字对我来说是如此的熟悉,但是对其内容却很陌生,最近公司的一个项目用起了Oracle,所以也开始高调的用起了Oracle.在没有接触Or ...

  6. ASP.NET MVC 随想录——探索ASP.NET Identity 身份验证和基于角色的授权，中级篇

    在前一篇文章中,我介绍了ASP.NET Identity 基本API的运用并创建了若干用户账号.那么在本篇文章中,我将继续ASP.NET Identity 之旅,向您展示如何运用ASP.NET Ide ...

  7. 《30天自制操作系统》笔记(01)——hello bitzhuwei’s OS!

    <30天自制操作系统>笔记(01)——hello bitzhuwei's OS! 最初的OS代码 ; hello-os ; TAB=4 ORG 0x7c00 ; 指明程序的装载地址 ; 以 ...

  8. EF架构~扩展一个分页处理大数据的方法

    回到目录 最近总遇到大数据的问题,一次性处理几千万数据不实际,所以,我们需要对大数据进行分块处理,或者叫分页处理,我在EF架构里曾经写过类似的,那是在进行BulkInsert时,对大数据批量插入时候用 ...

  9. Excel批量插入多行

    在一个表中插入10行空行,你是不是这样做的:选取要插入的位置 - 右键插入行.重复插入10次.如下图所示: 其实插入多行是可以一次完成的,方法是:你需要插入多少行,就向下选取多少行再插入.如下图所示:

  10. Atitit Atitit 图像处理之  Oilpaint油画滤镜 水彩画 源码实现

    Atitit Atitit 图像处理之 Oilpaint油画滤镜 水彩画 源码实现 1.1. 具体原理参考1 2. 水彩画滤镜算法如下:1 2.1. 这个其实就是灰度层次降低维度的过程.2 2.2. ...