经验:cordova html+js部署在服务端如何调用手机硬件

最新推荐文章于 2024-06-16 23:29:54 发布

ICE_GOD~!

最新推荐文章于 2024-06-16 23:29:54 发布

阅读量454

点赞数 1

本文链接：https://blog.csdn.net/qq_34252875/article/details/100094776

版权

当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);

ICE_GOD~!

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
经验:cordova html+js部署在服务端如何调用手机硬件

当html+js在服务端时,app直接访问服务端网页显示,是可行的,但是,会遇到部分问题,如上传控件无法调用,拍照等通过navigator调用的是可以的,但是,上传需要用到var options = new FileUploadOptions();会找不到.注,需要嵌入网页显示,需要在config.xml中增加如下配置 <allow-navigation href="http://...
复制链接

扫一扫