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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM