Qt html 界面混合编程

Qt部分

• 项目文件.pro

Qt += webenginewidgets webchannel

• 创建WebEngineView

#include <QtWebEngineWidgets>
QWebEngineView *m_view;

• 创建WebChannel

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

• 执行js

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

网页部分

-创建QWebChannel

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

• 美化界面 bootstrap

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

• 数据驱动界面vue.js

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