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.页面搭建(登录为例)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
b.Ajax表单提交
我们知道在传统PC 浏览器端中,ajax请求受限于XMLHttpRequest无法进行跨域请求,我们可能需要借助JSONP一类的帮手帮我们解决,而在Cordova生成的Hybird App中不需要考虑这个问题。在上面的代码中,get请求访问的是一个位于远端服务器中的一个服务(可以是ashx一般处理程序,也可以是一个MVC应用的action)。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
注意:登录成功后回调函数中通过设置url进行登录信息保存与传递。window.location.href = "APP.html?username=" + data.UserName + "&id=" + data.Id;
c.后台验证
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
主页jquery mobile+百度地图Javascript API
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
5.调用手机硬件进行拍照
摄像头的调用(只能使用手机调试,web端不能调试)
a.页面
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
其中cordova.js就是cordova进行手机底层硬件访问的js
destinationType: Camera.DestinationType.DATA_URL :这段是设置照片的返回类型为dataurl,为下面图片上传做准备
b.后台提交
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
图片的上传
1.我们知道对与form表单的提交,pc之间提交照片要使用<input type=”file”/>进行提交,但是我们想在手机上提交照片怎么办呢?下面有两种方式。
a.将图片通过base64编码生成dataurl进行传输,然后在后台解码生成图片
b.cordova插件cordova-plugin-file-transfer 进行异步提交
为了简单我直接通过base64编码生成dataurl进行传输,这种方法,
其他功能实现请查看我的源码,这里就不过多介绍啦。
5.Cordova项目构建与打包示例
1.创建项目
在要建立项目的文件加下shift+右键,点击在此处打开命令窗口,在控制台中输入
2.创建android平台
3.添加访问硬件的插件
4.项目导入到根目录www文件夹里面
将我们开发的web网页以及依赖的资源(图片、css、js等)拷贝到此目录下
5.配置根目录下的config.xml
设置APP图标和启动屏
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
6.编译
6.注意事项
1.你一但选择使用cordova插件来进行操作的话,你在电脑上就不可以调试啦,必须手机操作。
2.手机调试时一定要将手机通过电脑发出的WiFi进行测试,保证手机与后台服务通畅。我自己是使用的一台阿里云服务器,不需要考虑上述通信问题.
3.你在web开发时url可以不注意大小写,但是cordova打包是区分大小写的,例如index.html写成Index.html就会出现异常。
4.手机的真机测试比较慢,所以尽量将逻辑处理测试通过再打打包.节约时间。
7.总结
本次主要实现了登录注册以及基于GIS的照片管理,实现的功能比较简单。你可下载一下APP试用一下,目前只有android版本,其他平台有兴趣的话可以自己打包。全部源码链接在下面,如果有问题的可以互相交流,不懂得地方可以私信我。后面我还会添加一些新的功能,如果喜欢可以关注一下我。
这个系列未完,待续。。。。。。。。。。。。。。。。。。。。。,期待您的关注
全部源码:http://pan.baidu.com/s/1c2x9Q7Y
测试APP for android下载:http://pan.baidu.com/s/1c2wTSbe
作者:ATtuing
出处:http://www.cnblogs.com/ATtuing
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接。