作者：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. 【MVC】bootstrap-paginator 分页插件笔记

    bootstrap-paginator基于bootstrap框架,使用起来非常简单.github地址:https://github.com/lyonlai/bootstrap-paginator 在b ...

  2. Java提高篇（二七）-----TreeMap

    TreeMap的实现是红黑树算法的实现,所以要了解TreeMap就必须对红黑树有一定的了解,其实这篇博文的名字叫做:根据红黑树的算法来分析TreeMap的实现,但是为了与Java提高篇系列博文保持一致 ...

  3. Android移动APP开发笔记——Cordova（PhoneGap）通过CordovaPlugin插件调用 Activity 实例

    引言 Cordova(PhoneGap)采用的是HTML5+JavaScript混合模式来开发移动手机APP,因此当页面需要获取手机内部某些信息时(例如:联系人信息,坐标定位,短信等),程序就需要调用 ...

  4. IOS 基础-define、const、extern、全局变量

    这里介绍一下define.const.extern的用法.优劣以及要注意的地方. 1.define 宏define是定义一个变量,没有类型信息.define定义的常量在内存中有若干个拷贝. defin ...

  5. WebViewJavascriptBridge的暂时理解

    直接从项目里复制了一份关于WebViewJavascriptBridge使用的代码,注释部分是自己暂时的理解.孟哥说,callHandler类似于jq里的trigger, registerHandle ...

  6. table下属标签与标签中间不能加其他任何标签

    今天设计网页,很想在table下面的caption下面加hr标签,不能正常解析,后来发现hr标签可以显示,但是用浏览器查看解析,发现hr在table上面进行了解析,不会再caption下面显示, 又连 ...

  7. 启发式算法（Heuristic Algorithm）

    背景: 李航的<统计学习方法>一书中提到:决策树算法通常采用启发式算法,故了解之 问题解答: 时间有限,这里也只是将算法和启发式算法的区别和简单发展摘录如下: 一.算法和启发式方法之间的差 ...

  8. Redis学习笔记~Redis并发锁机制

    回到目录 redis客户端驱动有很多,如ServiceStack.Redis,StackExchange.Redis等等,下面我使用ServiceStack.Redis为例,介绍一下在redis驱动中 ...

  9. SSH框架详解

    1.什么是ssh? SSH对应 struts spring hibernate struts 采用MVC模式,主要是作用于用户交互 spring 采用IOC和AOP~作用比较抽象,是用于项目的松耦合 ...

  10. iOS-策略模式

    在实际开发过程中,app需求都是由产品那边给出,往往是他给出第一版功能,我们写好代码后,会相应的给出第二版.第三版功能,而这些功能是在实际使用中,根据用户需求而不断增加的.如果在编码之初,我们并未认识 ...