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