作者：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. HTTP基本认证

    众所周知,Web使人们可以很方便的访问分布在世界各个角落里信息.但是仅仅是方便还是不够的,并不是所有的信息都适合在互联网上公开访问,我们需要保证只有特定的人才能看到我们的敏感信息并且执行特定的操作. ...

  2. 两种include方式及filter中的dispatcher解析

    两种include方式 我自己写了一个original.jsp,另外有一个includedPage.jsp,我想在original.jsp中把includedPage.jsp引进来有两种方式: 1.& ...

  3. Java中类继承、接口实现的一些细节（长期更新）

    前言 在Java中,子类继承父类,类实现接口是属于常识性的内容了,作为一个Java程序员应该也比较熟悉.不过子类继承父类,类实现接口中还是有一些小细节值得注意一下,本文就从个人工作.学习中入手,总结一 ...

  4. 实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  5. 为 Exchange 服务器编写自定义的反垃圾插件

    Exchange 2010 的 Edge Transport 包含了一些 Anti-spam 的 Feature,如图: 都开启了,但是呢,还是会有漏网之鱼,而且把这些邮件自己列为 Junk 也起不了 ...

  6. osgi dm

    看了http://developer.51cto.com/art/200909/154863.htm 真心感到,最强大最有组织的技术网站还是 51cto,牛人应该也是最多的. 以前逛51cto的比较少 ...

  7. Java-条件语句、循环语句练习

    题目一:一张纸的厚度大约是0.08mm,对折多少次之后能达到珠穆朗玛峰的高度(8848.13米)? double height=0.08; for(int i=1;i>0;i++) { heig ...

  8. Atitit Server Side Include  ssi服务端包含规范 csi  esi

    Atitit Server Side Include  ssi服务端包含规范 csi  esi 一.CSI (Client Side Includes)  1 1.1. 客户端包含1 1.2. Ang ...

  9. WPF入门教程系列八——布局之Grid与UniformGrid（三）

    五. Grid Grid顾名思义就是“网格”,它的子控件被放在一个一个实现定义好的小格子里面,整齐配列. Grid和其他各个Panel比较起来,功能最多也最为复杂.要使用Grid,首先要向RowDef ...

  10. ios app 打包上传 app store（Application Loader）

    背景:使用Xcode 上传APP, 这个 有时候很慢,构建版本需要等很长时间,所以我推荐使用Application Loader 1.使用xocd 打包,导出.ipa文件 2. OK ,跟着上面做, ...