Qt html 界面混合编程

Qt部分

Qt += webenginewidgets webchannel

#include <QtWebEngineWidgets>
QWebEngineView *m_view;

QWebChannel *channel = new QWebChannel(this);
channel->registerObject("form", this);
m_view->page()->setWebChannel(channel);

m_view->page()->runJavaScript(s);

网页部分

<script type="text/javascript" src="qwebchannel.js"></script>
var form;
new QWebChannel(qt.webChannelTransport,
function(channel) {
form = channel.objects.form;
form.call("异次元世界的呼喊 -->");  //到这里,就可以调用QObject对象
}
);

<link rel="stylesheet" href="bootstrap.min.css">

<div id="#app">
<button class="btn btn-default" id="calc" @click="callQtMethod">{{btn_calc_caption}}</button>
</div>
<script type="text/javascript" src="vue.min.js"></script>
new Vue({
el: "#app",
data:{
btn_calc_caption: "计算"
}
methods: {
callQtMethod: function(event) {
var s = 'form.on_' + event.target.id + '()';
eval(s);
//alert(event.target.id);
}
}
});