当html+js在服务端时,app直接访问服务端网页显示,是可行的,但是,会遇到部分问题,如上传控件无法调用,拍照等通过navigator调用的是可以的,但是,上传需要用到var options = new FileUploadOptions();会找不到. 注,需要嵌入网页显示,需要在config.xml中增加如下配置
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
完整的即为
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="http://*/*" />
<allow-navigation href="https://*/*" />
<allow-navigation href="data:*" />
<access origin="*" />
<access origin="http://*/*" />
<access origin="https://*/*" />
不加的话会跳转到手机浏览器显示.
若html+js都在APP中,那么不会遇到以上问题,但是,会考虑到跨域问题(上面方法不会出现跨域问题).
因此,采用两者兼容的方式,手机页面(父页面)通过iframe嵌入web页面(子页面),在父页面中写调用控件的方法,子页面向父页面发送消息.告知父页面需要调用哪个硬件,父页面调用硬件完成后返回的数据会返回给父页面,父页面再将返回的数据发送给子页面. 父页面与子页面也面临着跨域问题,通过html5提供的postmessage解决此问题,postmessage不能发送方法,只能发送json,字符串等简单的内容; 例如:子页面发送"TakePicture"给父页面,父页面接收到后调用相机功能,随后上传图片至服务器,服务器返回一个json字符串,父页面再将获取到的json字符串发送给子页面,子页面获取到数据后进行处理.
….以上,是本人目前研究出的如何调用cordova硬件的方法
贴上代码 父页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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">
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/index2.js"></script>
</head>
<body>
<iframe id="iframe" src ="嵌入的页面" frameborder="0" style="position: absolute;top: 150px;left: 0;bottom: 0;width: 100%;height: 100%;border: 1px solid red"></iframe>
</body>
</html>
父页面用到的index2.js
(function($) {
$.fn.extend({
"find11.page" : function() {
var self = this;
function uploadFile(file,params) {
var IP=document.getElementById("ip").value;
var PORT=document.getElementById("port").value;
var uri = "http://"+IP+":"+PORT+"/SLPAPPWeb/UploadAction";
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = file.substring(file.lastIndexOf(\\\'/\\\')+1);
options.mimeType = "text/plain";
if(params!=undefined){
params.filename=options.fileName;
options.params=params;
}
// var headers = {\\\'headerParam\\\':\\\'headerValue\\\'};
// options.headers = headers;
var ft = new FileTransfer();
ft.upload(file, uri, onSuccess, onError, options);
function onSuccess(r) {
window.frames[0].postMessage(r.response, \\\'*\\\');
}
function onError(error) {
window.frames[0].postMessage(\\\'上传失败\\\', \\\'*\\\');
}
}
function TakePicture(params){
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
});
function onSuccess(imageURL) {
uploadFile(imageURL,params);
}
function onFail(message) {
alert(\\\'错误原因: \\\' + message);
}
}
self.init=function(){
window.addEventListener(\\\'message\\\', function(ev) {
if(ev.data.type==\\\'TakePicture\\\'){
TakePicture(ev.data);
}else if(ev.data.type==\\\'upload\\\'){
uploadFile(ev.data.path);
}
}, false);
}
return self;
}
})
$(document).ready(function() {
var page=$(document)["find11.page"]();
page.init();
});
})(jQuery);
嵌入的页面
<%@ page language="java" pageEncoding="UTF-8" %>
<%@taglib tagdir="/WEB-INF/tags" prefix="LIG" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style>
</style>
</head>
<body>
<div style="width: 100%;">
<button id="picture">拍照</button>
<input type="text" id="text"/>
<img id="img" style="width: 100px;height: 100px" >
</div>
</body>
</html>
嵌入的页面中用到的js
(function ($) {
$.fn.extend({
"tourplan.page": function () {
var self = this;
var imgupload;
function bindEvent(){
self.find("#picture").bind("click",getpicture);
}
function getpictureAfter(json){
var j=$.parseJSON(json);
self.find("#text").val(j.id);
alert(_xtres_path+\\\'/\\\'+j.path)
self.find("#img").attr(\\\'src\\\',_xtres_path+\\\'/\\\'+j.path);
}
function getpicture() {
var e={\\\'src_bi_id\\\':\\\'RESC0002\\\'};
$.LIGcall(\\\'TakePicture\\\',e,getpictureAfter);
}
self.init = function () {
alert($.url("#id"))
bindEvent();
};
return self;
}
});
$(mycontent).ready(function () {
var page = $(mycontent)["tourplan.page"]();
page.init();
});
})(jQuery);
(function($) {
/**
* call硬件
*/
$.extend({
LIGcall:function(type,param,returnfun)
{
//通过jquery绑定message方法,需要注意返回的参数通过ev.originalEvent.data接收,不能通过ev.data接收
$(window).off(\\\'message\\\').on(\\\'message\\\',function(ev){
if(returnfun!=undefined){
returnfun(ev.originalEvent.data);
}
});
if(param==undefined){
param={};
}
param.type=type;
if(type==\\\'TakePicture\\\'){
param.person_info_Id=_xt_person_info_id;
}
parent.postMessage(param,\\\'*\\\');
}
})
})(jQuery);