Cordova+Asp.net Mvc+GIS跨平台移动应用开发实战1-系统初步搭建（附演示,apk,全部源码）

1.前言

身处在移动互联网的今天，移动应用开发炙手可热，身为程序猿的我们怎么能错过开发一款我们自己的APP.本人算是一个基于.net的GIS开发入门者（马上就大四啦），暑假在学校参加GIS比赛有大把的时间，利用最近这两天自己写了一个跨平台移动APP。功能比较简单，以后我会慢慢完善的。为什么要跨平台呢？大学期间主要学.net，而微软不太给力啦，WP开发基本上已近死啦 .而重新学习Android开发比较吃力费时。由于对HTML、JavaScript与CSS 等 Web 技术开发有所了解，最终选择使用Cordova来做跨平台移动应用。本次使用的技术主要有Cordova，Asp.net Mvc+EF，jquery mobile,bootstorap,百度地图Javascript API等。功能

2.功能

目前主要是实现基于位置的拍照，存储，地图的可视化显示等，使用户更好的管理自己的照片以及照片背后的空间地理位置和故事。大家可以下载apk试用一下啊。

1.登录

2.注册

3.主页

a.定位

b.照片位置点的地图显示，以及属性窗口

c.拍照上传

d.照片详情展示

3.演示

安装包获取权限获取安装完成

GISAPP安装完成启动屏登录

注册主页 GPS获权

位置显示查看已有照片信息拍照页

启动摄像头提交照片信息提交的信息反馈

照片详情照片详情待实现功能

4.实现

1.Cordova简介

Cordova是贡献给Apache后的开源项目，是从PhoneGap中抽出的核心代码，是驱动PhoneGap的核心引擎。

Cordova提供了一组设备相关的API，通过这组API，移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。

Cordova还提供了一组统一的JavaScript类库，以及为这些类库所用的设备相关的原生后台代码。

Cordova支持如下移动操作系统：iOS, Android,ubuntu phone os, Blackberry, Windows Phone, Palm WebOS, Bada 和 Symbian。

具体介绍可以参考官网：http://cordova.apache.org/

2.Cordova平台环境配置

需要安装的东西如下（android为例）

1.配置JDK环境
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
安装jdk-8u5-windows-x64.exe，
配置环境变量
JAVA_HOME = C:\Program Files\Java\jdk1.8.0_05
Path += %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;
CLASSPATH += %JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
2.配置android-sdk环境
http://developer.android.com/design/downloads/index.html
解压android-sdk.rar到D:\Android\
配置环境变量
ASDK_HOME = D:\Android\sdk
Path += %ASDK_HOME%\platform-tools;%ASDK_HOME%\tools;

3.配置Node环境
http://nodejs.org/download/
安装node-v0.10.29-x64.msi
配置环境变量
NODE_HOME = C:\Program Files\Nodejs\
Path += %NODE_HOME%;

4.配置Cordova环境

在cmd中运行npm install -g cordova（在线安装）

3.数据库设计

一个用户表，一个照片表。

值得注意的是字段Location（位置）我使用的是Geometry类型存储的，这是.net 4.5后新支持的字段类型，对应sqlserver中的geometry类型，以后我们专门写博客讲这个东西的。

4.页面构建以及服务端通信

登录注册使用bootstorap做得响应式布局以及后台验证实现

a.页面搭建（登录为例）

View Code

b.Ajax表单提交

我们知道在传统PC 浏览器端中，ajax请求受限于XMLHttpRequest无法进行跨域请求，我们可能需要借助JSONP一类的帮手帮我们解决，而在Cordova生成的Hybird App中不需要考虑这个问题。在上面的代码中，get请求访问的是一个位于远端服务器中的一个服务（可以是ashx一般处理程序，也可以是一个MVC应用的action）。

View Code

注意：登录成功后回调函数中通过设置url进行登录信息保存与传递。window.location.href = "APP.html?username=" + data.UserName + "&id=" + data.Id;

c.后台验证

View Code

主页jquery mobile+百度地图Javascript API

View Code

5.调用手机硬件进行拍照

摄像头的调用（只能使用手机调试，web端不能调试）

a.页面

View Code

其中cordova.js就是cordova进行手机底层硬件访问的js

destinationType: Camera.DestinationType.DATA_URL ：这段是设置照片的返回类型为dataurl，为下面图片上传做准备