Visual Studio开发Cordova应用示例
作者：Grey
原文地址：http://www.cnblogs.com/greyzeng/p/5455728.html
本文的GIF动画均使用ScreenToGif进行录制。
Cordova是什么？
http://cordova.apache.org/docs/en/latest/guide/overview/index.html
实例说明
- HelloWorld
- 拍照
开发环境
- Visual Studio Community 2015
- Java SE Development Kit 8u91
- Android SDK
- Visual Studio Emulator for Android (微软的Android模拟器，良好的Visual Studio支持，非必需，可以用真机代替)
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）：
Visual Studio开发Cordova应用示例的更多相关文章
- SharePoint 2013 工作流之Visual Studio开发示例篇
SharePoint 2013引用了WF4.0 Foundation,支持使用Designer和Visio进行设计,但是功能受限,而Visual Studio可以开发功能更加丰富的工作流,下面我们简单 ...
- 微软为Visual Studio开发助手拓展C++支持
近日,微软宣布了一项 Visual Studio“开发助手”(Developer Assistant)插件的重大更新,其现已支持“基于 C++ 的情境感知 web 解决方案”.开发助手能够嵌入 Vis ...
- visual studio 开发linux程序
VisualGDB支持Linux的原理是,通过ssh连接到Linux系统上通过ssh给linux下达命令 . (类似visualgdb的有windgb ,这2个都是商业软件.) Visual GDB ...
- 解决无法连接到visual studio开发服务器的问题
今天vs抽风,调试网站出现下图那样: 然后我开始百度搜索 "无法连接到visual studio开发服务器" 出现很多文章: 打开一篇问题,看了里面的内容, 那个解决办法也不是最好 ...
- Visual Studio 开发（二）：VS 2017配置FFmpeg开发环境
在上篇文章Visual Studio 开发(一):安装配置Visual Studio Code 中,我们讲了一下如何配置VS CODE,来编写和调试C的代码.如果你已经使用VS Code回顾和复习好C ...
- visual studio开发工具的C#主流控件属性一览表
visual studio开发工具的C#主流控件属性一览表 详细的介绍了各控制属性的详细中文介绍 C#控件及常用设计整理 1.窗体 1.常用属性 (1)Name属性:用来获取或设置窗体的名称,在应用程 ...
- 使用Visual Studio开发跨平台的iOS应用程序
[原文发表地址]Developing cross-platform iOS application using Visual Studio [原文发表时间]2015/6/4 C ++是一种流行的高级编 ...
- 使用Visual Studio开发Python
Python优秀的集成开发环境有PyCharm,Visual Studio Code等,当然你仍然可以使用Visual Studio进行开发.如果你熟悉Visual Studio,使用Visual S ...
- Visual Studio开发首选！DevExtreme v19.1.6全新来袭
DevExtreme Complete Subscription是性能最优的 HTML5,CSS 和 JavaScript 移动.Web开发框架,可以直接在Visual Studio集成开发环境,构建 ...
随机推荐
- Web Essentials之通用功能
返回Web Essentials功能目录 本篇目录 功能 快捷方式 WEIgnore 功能 通用功能应用于很多方面. 设置 所有的设置都可以在VS选择工具 -> 选项 -> Web Ess ...
- 海量用户-高并发SAAS产品测试上线流程
海量用户高并发SAAS产品测试上线流程 SAAS产品测试上线流程-以Web插件产品为例子 1 概述 在互联网产品中,IT公司之间更加注重产品功能之间的协作,SAAS形态的产品扮演着越来越重要的作用 ...
- Asp.net下使用HttpModule模拟Filter，实现权限控制
在asp.net中,我们为了防止用户直接从Url中访问指定的页面而绕过登录验证,需要给每个页面加上验证,或者是在模板页中加上验证.如果说项目比较大的话,添加验证是一件令人抓狂的事情,本次,我就跟大家分 ...
- Ubuntu环境搭建系列—JavaEE篇
恩,其实我是一时兴起,所以就写了目前这几篇环境的博文,希望能给自己做一个笔记,同时也能够给一些新手带来一些帮助,不会在配置方面那么迷茫.本篇文章主要就是针对Java web开发进行环境搭建. 一.To ...
- MVVM架构~Knockoutjs系列之对象与对象组合
返回目录 在面向对象的程序设计里,对象是核心,一切皆为对象,对象与对象之间的关系可以表现为继承和组合,而在Knockoutjs或者JS里,也存在着对象的概念,今天主要说一下JS里的对象及对象的组合. ...
- Python的闭包
Python的闭包 闭包概念都是一样的,实现机制一样,看看下面的代码是不是和javascript很像 def generate_counter(): cnt = [0] def count_one() ...
- WP、Win10开发或者WPF开发时绘制自定义窗体~例如：一个手机
WP and Win10 效果:(数字是参考值,和UI无关) <Page x:Class="_05.AllControls._BorderUsePage" xmlns=&qu ...
- Open Cascade DataExchange IGES
Open Cascade DataExchange IGES eryar@163.com 摘要Abstract:本文结合OpenCascade和Initial Graphics Exchange Sp ...
- Render OpenCascade Geometry Curves in OpenSceneGraph
在OpenSceneGraph中绘制OpenCascade的曲线 Render OpenCascade Geometry Curves in OpenSceneGraph eryar@163.com ...
- OpenCascade BRep Format Description (2)
OpenCascade BRep Format Description eryar@163.com 摘要Abstract:本文结合OpenCascade的BRep格式描述文档和源程序,对BRep格式进 ...