当前位置: 首页 > news >正文

qml加载html以及交互

qml加载html,采用webchannel进行通信,需绑定对象

1、main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QWebChannel>
#include <QQmlContext>int main(int argc, char *argv[]) {QGuiApplication::setAttribute(Qt::AA_EnableHighDpiScaling);QGuiApplication app(argc, argv);QQmlApplicationEngine engine;engine.load(QUrl(QStringLiteral("qrc:/main.qml")));return app.exec();
}

2、main.qml

import QtQuick 2.15
import QtWebEngine 1.10
import QtWebChannel 1.0
import QtQuick.Window 2.15
import QtQuick.Controls 2.15Window {width: 800height: 600visible: trueQtObject {id: bridgeproperty string currentTime: new Date().toTimeString()WebChannel.id: "qmlBridge"  // JS object// signal for js listensignal callJs(string strData);// html -> QMLfunction showMessage(msg) {console.log("Js invoke: ", msg)}// QML -> htmlfunction callJavaScript(message) {console.log("Invoke js func " )callJs(message)currentTime = new Date().toTimeString()// invoke js functionwebview.runJavaScript("getResult(5, 10);", function(result) {console.log("JS returns: ", result)})}}WebChannel {id: webChannelregisteredObjects: [bridge]}WebEngineView {id: webviewanchors.fill: parentwebChannel: webChannelurl: "qrc:/html/index.html"Component.onCompleted: {}}Button {text: "Invoke js"anchors.bottom: parent.bottomonClicked: {bridge.callJavaScript(new Date().toLocaleTimeString());}}
}

3、html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="qrc:/html/qwebchannel.js"></script><script>// global functionfunction getResult(a, b) {return a + b;}// functionfunction handleQMLmsg(message) {alert(message)document.getElementById("time").innerText = message;}window.onload = function() {// init QWebChannelnew QWebChannel(qt.webChannelTransport, function(channel) {const bridge = channel.objects.qmlBridge;// invoke QMLdocument.getElementById("btn").onclick = function() {bridge.showMessage("HTML invoke QML");};// bind qml signalbridge.callJs.connect(handleQMLmsg);// bind qml properitybridge.currentTimeChanged.connect(function() {//alert(bridge.currentTime)//document.getElementById("time").innerText = bridge.currentTime;});});};</script>
</head>
<body><h2>Qml interactive with html</h2><p>QML invoke js: <span id="time"></span></p><button id="btn">Invoke QML</button>
</body>
</html>
http://www.lryc.cn/news/583158.html

相关文章:

  • HarmonyOS中各种动画的使用介绍
  • C语言extern的用法(非常详细,通俗易懂)
  • 〔从零搭建〕数据湖平台部署指南
  • 17.Spring Boot的Bean详解(新手版)
  • OpenCV颜色矩哈希算法------cv::img_hash::ColorMomentHash
  • STM32-待机唤醒实验
  • [Leetcode] 预处理 | 多叉树bfs | 格雷编码 | static_cast | 矩阵对角线
  • User手机上如何抓取界面的布局uiautomatorviewer
  • 【机器人】Aether 多任务世界模型 | 4D动态重建 | 视频预测 | 视觉规划
  • 速卖通跨境运营破局:亚矩阵云手机如何用“本地化黑科技”撬动俄罗斯市场25%客单价增长
  • React 编译器与性能优化:告别手动 Memoization
  • 开始读 PostgreSQL 16 Administration Cookbook
  • 苍穹外卖项目日记(day04)
  • 【Netty+WebSocket详解】WebSocket全双工通信与Netty的高效结合与实战
  • 冷冻电镜重构的GPU加速破局:从Relion到CryoSPARC的并行重构算法
  • 《重构项目》基于Apollo架构设计的项目重构方案(多种地图、多阶段、多任务、状态机管理)
  • 仓颉语言 1.0.0 升级指南:工具链适配、collection 操作重构与 Map 遍历删除避坑
  • IT系统安全刚需:绝缘故障定位系统
  • Tailwind CSS纵向滚动条设置
  • PiscTrace深蹲计数功能实现:基于 YOLO-Pose 和人体关键点分析
  • 基于Java+Maven+Testng+Selenium+Log4j+Allure+Jenkins搭建一个WebUI自动化框架(4)集成Allure报表
  • JavaScript数组方法——梳理和考点
  • SpringBoot实现动态Job实战
  • DRT-Net: Dual-Branch Rectangular Transformer with Contrastive Learning
  • 离线二维码生成器,无需网络快速制作
  • springBoot使用XWPFDocument 和 LoopRowTableRenderPolicy 两种方式填充数据到word模版中
  • Android-重学kotlin(协程源码第一阶段)新学习总结
  • npm init vue@latestnpm error code ETIMEDOUT
  • 网络请求与现实生活:用办理业务类比理解HTTP通信
  • kotlin学习,val使用get()的问题