作者：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领域驱动设计实战系列]专题四：前期准备之工作单元模式(Unit Of Work)

    一.前言 在前一专题中介绍了规约模式的实现,然后在仓储实现中,经常会涉及工作单元模式的实现.然而,在我的网上书店案例中也将引入工作单元模式,所以本专题将详细介绍下该模式,为后面案例的实现做一个铺垫. ...

  2. Linux3：more、which、find、chmod、tar、diff、grep、ps、netstat、uname

    more 类似cat,不过more不是将整个文件内容从上到下显示在屏幕上的,而是以一页一页的显示方便使用者逐页阅读.more最基本的指令就是space即往下翻一页,b即往回翻一页显示,而且还有搜索字符 ...

  3. Asp.net下使用HttpModule模拟Filter，实现权限控制

    在asp.net中,我们为了防止用户直接从Url中访问指定的页面而绕过登录验证,需要给每个页面加上验证,或者是在模板页中加上验证.如果说项目比较大的话,添加验证是一件令人抓狂的事情,本次,我就跟大家分 ...

  4. DDD领域驱动设计之聚合、实体、值对象

    关于具体需求,请看前面的博文:DDD领域驱动设计实践篇之如何提取模型,下面是具体的实体.聚合.值对象的代码,不想多说什么是实体.聚合等概念,相信理论的东西大家已经知晓了.本人对DDD表示好奇,没有在真 ...

  5. [每日电路图] 8、三轴加速度计LIS3DH电路图及功耗等指标

    看TI的官网资料:http://www.st.com/web/en/catalog/sense_power/FM89/SC444/PF250725 一.初次接触关注的信息: 1.1.概述中的关键信息 ...

  6. Yii CModel中rules验证规则[转]

    array( array(‘username’, ‘required’), array(‘username’, ‘length’, ‘min’=>3, ‘max’=>12), array( ...

  7. 自动更新Chromium

    Chromium 其实就是开发版本的Chrome, 即Chrome dev 版本.一般他的版本要比正式版的Chrome高两个及以上.比如正式版本现在是29,开发者版本已经是32了. 这表示很多新功能你 ...

  8. 使用Vue.js时，对Chrome控制台的一点小心得

    之前对Chrome控制台的console.log()输出没太放心上,其实仔细研究后,对工作效率有显著的提示.看下面的五段代码: console.log(''); console.log(typeof ...

  9. 基础才是重中之重~Data层如何调用BLL层的方法,如果觉得奇怪请看本文章

    回到目录 看似不伦不类 这个题目有点不伦不类,或者说有点伪模式了,不错,确实是这样,我们正确的开发思维是WEB层->BLL层->DATA层,每个层有对它下层的引用,下层不能引用上层,因为这 ...

  10. asp.net的简易的参数化查询

    protected void btnInsert_Click(object sender, EventArgs e) { string sql = "insert into contactg ...