前言
最近在为单位做一个简单的手机App,基于Qt技术栈的选择了QtQuick来开发。不得不说QtQucik开发的确舒服,很多东西都不用写就可以只用,UI定义起来也比较自由。但是本人想通过cookie来作为登陆验证时就发现,QtQuick实现起来相当麻烦。(主要是没有文档,资料只找到一篇qyvlik写的。我也不想直接用WebEngine)
不带cookie
可以使用XMLHttpRequest,比较坑的是官方竟然没有任何案例,不过Api都是与js的XmlHttpRequest一样的,以下是qyvlik封装的一套分辨操作函数:
//通过Json对象输出url的query字符串 function urlQuery(jsonObject) { var query = ""; var i = 0; for(var iter in jsonObject) { if(i > 0) { query += "&"; } query += iter +"=" + encodeURI(jsonObject[iter]); i++; } // console.log("url query:", query); return query; } //设置头 function setHeader(xhr, headers) { //"Content-Type":"application/x-www-form-urlencoded" for(var iter in headers) { xhr.setRequestHeader(iter, headers[iter]); } } //这里我修改了一下函数的形参,从使用的角度来看,回调函数一般都会有,但是headers不一定要设置,所以调换了一下位置 function ajax(method, url, callable,headers,data) { headers = headers || {}; callable = callable || function(xhr) { console.log("没有设置callable,使用默认log函数") console.log(xhr.status); console.log(xhr.responseText); } var xhr = new XMLHttpRequest; xhr.onreadystatechange = function() { if(xhr.readyState == xhr.DONE) { callable(xhr); } } xhr.open(method, url); setHeader(xhr, headers); if("GET" === method) { xhr.send(); } else { xhr.send(data); } }
为了能够重复利用,本人将这些代码都放入一个js文件中,之后使用导入的方式重复利用。(注意:导入的命名控件首字母需要大写)
import "xmlhttprequest.js" as XmlHttpRequest
使用:
var jsonObject={user:"admin",password:Qt.md5("123")};XmlHttpRequest.ajax("GET","http://192.168.3.108:3000/landing"+"?"+XmlHttpRequest.urlQuery(jsonObject),function(xhr){ console.log(xhr.status); console.log(xhr.responseText); if(JSON.parse(xhr.responseText).message==="ok") { stack.push("qrc:/resource/qml/listview.qml",{stack:stack,uifont:uifont}); }else{ message.show("用户名或者密码错误!",2000); }});
带cookie
因为XmlHttpRequest是不能带有cookie的,所以只能通过c++导出QNetworkAccessManager、QNetworkRequest、QNetworkReply,具体的代码可以参考https://github.com/qyvlik/QmlNetwork。qyvlik封装了一套QML对象,我直接拿来用了,很可惜他的使用说明写的不太详细,有一些操作需要直接看他写的微信案例才能搞定。
NetworkAccessManager { id: manager }NetworkResponse { id: response }NetworkRequest { id: request }Buffer { id: buffer }function initWebWeiXinInfo() { var url = "http://192.168.3.108:3000/landing"; var data = { user:"admin", password:"123" }; if(buffer.isOpen()) { buffer.close(); } buffer.data = JSON.stringify(data); if(!buffer.open(IODevice.ReadOnly)) { console.log(buffer.errorString()); } request.clear(); request.url = url;// request.setHeader("Cookie", cookie); request.setHeader("Content-Type", "application/json") request.ioDevice = buffer; connectSignalOnce(response.finished,function() { console.log("data:", buffer.data) var headers = response.getAllResponseHeaders(); for(var iter in headers) { console.log(headers[iter]); } console.log(response.responseContent); }); manager.post(request, response);}
结语
感觉qyvlik封装的东西比较多,需求上本人也就用用Get与Post以及cookie,以后有时间会重新封装一个简单版本。