QT与HTML交互的一个坑

真香饱饱鸭

已于 2023-07-12 15:54:51 修改

阅读量145

点赞数

CC 4.0 BY-SA版权

文章标签： qt html

于 2023-05-17 12:17:49 首次发布

本文链接：https://blog.youkuaiyun.com/mvmmvm/article/details/130723030

在传输JSON数据到HTML时，需要将数据进行百分比编码，以防止解析异常。前端接收到数据后，使用decodeURIComponent进行解码，然后利用JSON.parse转换为JavaScript对象。QT端可以借助QString和QUrl::toPercentEncoding方法进行编码操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

传json给html时，要转成百分比编码，html再解码，否则解析json异常。

                前端解析:  data = JSON.parse(decodeURIComponent(data))





                QT端编码:  QString(QUrl::toPercentEncoding(json))

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

真香饱饱鸭

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Qt加载Html实现与Js交互

阿龙的思考

01-14

1322

该js文件需要通过Qt注入的形式加载到Html中，否则会无法识别，由于Js需要使用的Html元素有可能在还没有加载完成，所有最好是在等待页面加载完成后进行写入，通过绑定加载完成信号来完成。对于熟悉Web的人都知道Web实现的界面更加炫酷，css样式以及js的强大功能，能够让界面发挥最大的视觉效果，下面就来说一下在Qt中如何加载Html并且实现与Js的交互。QWebChannel是Qt与Js通信的通道，通过注册Js上下文实现响应Js调用Qt槽函数，创建一个类文件，定义槽函数用于接收Js的调用。

qt android 地图交互

weixin_45247650的博客

05-27

605

3.与web的js交互：这个困扰了2天，开始搜了一下，说是可以用websocket，网上找的例子桌面版的可以实现，结果到了android就不行，排查了一天，开始以为js文件没有引用成功，结果发现webview不支持websocket问题，又学习怎么解决webview不支持websocket问题，结果已失败告终。此路不通，那就换条路，qml几乎没学过，qt可以与qml进行交互，那是不是可以先将数据发给qml，qml在执行，web再响应，百度了一下，qml文件，安卓目录为assets下。

参与评论您还未登录，请先登录后发表或查看评论

实现QT与HTML页面通信

hou_jiangzhen的博客

06-26

5477

1.前言最近，C++和WEB本地混合应用开发模式逐渐流行起来，个人也认为标记语言描述的界面是界面开发的一个发展趋势。WPF、JavaFX，当然也少不了Html。基于Html的界面在开发效率，可移植性上都十分有优势，所以也被很多目前QT官方的文档中对如何从原来的WebKit迁移至QtWebEngine没有提供足够丰富的文档和指导。本文记录一些从WebKit迁移至QtWebEngi

用Qt,QWebChannel 和 QWebEngineView 和 html 交互

qq_45396538的博客

05-13

1355

Qt & html

Qt 之 c++/Qml与html交互

一个老菜鸟的学习分享

04-11

4884

项目背景项目中，遇到在嵌入式下展示html内容，并与之交互，Qt允许使用所谓的混合GUI创建应用程序——在这种GUI中，可以将本机部件与基于html的内容混合在一起。通过WebChannel和WebSockets提供交互，这种混合甚至支持这些本地部分和html端之间的交互。有三种方式: QWebkit QWebEngine QWebView QWebkit 在Qt5.6之后已经不再支持，本文只针对QWebEngine和 QWebView。如何显示HTML内容使用webEngineView；使用w

Qt连接GPS模块实现调用高德地图交互显示经纬度信息的功能

daviddou2022的博客

07-28

2561

本项目主要实现了电脑和L76K模块连接，模块连接天线把接收到gps数据从串口传给电脑，设计qt界面实现串口数据的接收和解析，并调用高德地图的api进行地图的3D显示。

qt 嵌入web页面_Qt嵌入浏览器（二）——QWebChannel实现与页面的通信

weixin_39640883的博客

12-19

1568

本篇简介本篇的小目标：借助QWebChannel，实现浏览器与页面的通信交互上一节中我们实现了浏览器的基本功能和一个简易的调试界面。>>点这里回顾上节内容本节将尝试在此基础上实现浏览器与所加载页面的相互通信。既然是相互通信，自然包含两个方向：页面向浏览器发送消息浏览器向页面发送消息页面向浏览器发送消息为了实现页面向浏览器发送消息，需要在一定程度上实现在页面中访问Qt对象。Qt官方的推荐...

qt5-入门

陆沙的博客

01-29

1435

qt5入门，自用

Qt多进程开发

qq_31286321的博客

07-15

2630

包含所需库，定义发送的自定义类型、接收消息的窗体标题。自定义类型可以处理消息过多情况下，对消息的区分，如果不需要也可以去掉。comment。

Qt+QtWebApp开发笔记（三）：http服务器动态html连接跳转基础交互

最新发布

02-22

<think>好的，用户之前已经询问过关于使用C++、阿里云和微信小程序开发在线点餐系统的问题，现在他们又提出了新的问题。用户提到自己接触过C语言、C++和QT，但没有大量编码经验，现在想依托微信小程序开发一个两人用的在线实时点餐系统，需要建议。首先，我需要明确用户当前的技术背景和目标。用户有C/C++和QT的基础，但缺乏丰富的编码经验，这可能意味着他们在实际项目开发、调试、系统设计等方面经验不足。目标是一个两个人的在线实时点餐系统，使用微信小程序作为客户端，可能用于小型餐厅或朋友之间的点餐需求。接下来，我需要分析用户可能的需求和潜在的问题。由于用户没有大量编码经验，他们可能需要更简化的开发流程，避免复杂的架构和技术栈。同时，系统是两人使用，用户量不大，所以性能和扩展性可能不是首要考虑的因素，而是更关注快速实现基本功能和易用性。用户之前的技术方案建议使用C++作为主要开发语言，但考虑到用户的实际经验，可能需要调整。使用C++开发后端服务对于新手来说可能较为复杂，尤其是在处理网络请求、数据库交互和实时通信方面。此外，微信小程序的前端开发需要JavaScript，用户可能需要学习新的语言和技术。可能的建议包括简化技术栈，采用更易上手的技术。例如，使用Node.js或Python作为后端，因为它们有丰富的框架和库，可以快速搭建RESTful API，减少开发时间。同时，利用微信小程序的云开发功能，可以避免自行搭建服务器，降低运维复杂度。另外，实时功能可以通过WebSocket或现有的实时数据库实现，减少自行开发实时通信模块的工作量。还需要考虑用户的学习曲线。如果用户更熟悉C++，可能倾向于继续使用，但需要权衡开发效率和项目需求。或许可以将部分核心模块用C++实现，而整体架构使用更高效的工具。同时，推荐用户利用现有的教程、模板和社区资源，加快开发进程。另外，数据库的选择也很重要。对于小型应用，使用SQLite或Firebase等轻量级数据库可能更合适，而非复杂的MySQL或MongoDB。这可以简化数据存储和查询的操作，减少配置和维护的工作。最后，测试和部署也是需要考虑的环节。用户可能需要指导如何在小范围内测试系统，以及如何部署到阿里云服务器。使用Docker容器化部署或直接使用云服务商提供的简易部署工具可能更适合新手。总结来说，用户需要的是一个简单、易实现、适合新手的技术方案，同时兼顾实时点餐的基本功能。建议调整技术栈，采用更高效的工具和框架，分步骤实现功能，并充分利用现有资源和文档来弥补编码经验的不足。</think>针对你的技术背景和需求（两人用的在线实时点餐系统），结合C++/QT基础和微信小程序开发，以下是优化后的建议方案： --- ### **一、技术选型调整（简化版）** #### **1. 后端服务** - **推荐语言**：改用 **Node.js + Express**（替代C++） - **原因**：C++开发HTTP服务对新手门槛高（多线程、网络库调试复杂），而Node.js更简单，生态完善，适合快速搭建API。 - **妥协方案**：若坚持C++，可尝试 **C++ REST SDK**（如Casablanca），但需额外学习时间。 - **数据库**：使用 **SQLite**（本地文件数据库，无需安装服务）或 **阿里云轻量级MySQL**（可视化操作更友好）。 #### **2. 微信小程序** - **必学内容**：WXML/WXSS基础、JavaScript异步请求（`wx.request`）、微信支付API（可选）。 - **模板推荐**：复用微信官方“云开发”模板（免费配额，无需自建服务器）。 --- ### **二、分阶段开发建议** #### **阶段1：最小可行原型（1周）** 1. **核心功能**：菜单展示、下单、简单订单状态同步。 2. **技术实现**： - **后端**（Node.js示例）： ```javascript const express = require('express'); const app = express(); app.use(express.json()); let orders = []; // 临时存储订单（后续替换为数据库） app.post('/api/order', (req, res) => { const newOrder = { id: Date.now(), dishes: req.body.dishes }; orders.push(newOrder); res.json({ success: true, orderId: newOrder.id }); }); app.listen(3000); ``` - **小程序前端**： ```javascript // 提交订单 wx.request({ url: 'http://你的服务器IP:3000/api/order', method: 'POST', data: { dishes: selectedDishes }, success: (res) => { console.log('订单ID:', res.data.orderId); } }); ``` #### **阶段2：增强功能（2周）** 1. **新增需求**： - 用户喜好记录（如存储“常点菜品”到SQLite） - 实时订单状态（用WebSocket或定时轮询） 2. **技术实现**： - **实时通信**：使用Socket.IO（Node.js库）替代C++ WebSocket开发。 - **数据库**：SQLite增删改查（避免复杂SQL）： ```javascript const sqlite3 = require('sqlite3').verbose(); const db = new sqlite3.Database('orders.db'); db.run('CREATE TABLE IF NOT EXISTS orders (id INT, dishes TEXT)'); ``` #### **阶段3：部署与优化（1周）** - **部署**：将Node.js服务部署到阿里云ECS（安装PM2进程守护）。 - **安全**：添加HTTPS（使用阿里云免费SSL证书），限制API访问频率。 --- ### **三、针对C++/QT经验的复用建议** 1. **可选C++场景**： - 若需高性能计算（如推荐算法），可用C++编写核心模块，通过Node.js子进程调用。 - 使用QT开发本地管理工具（如餐馆后台的数据统计界面）。 2. **代码复用示例**（C++与Node.js交互）： ```cpp // C++计算用户喜好（编译为可执行文件） #include <iostream> int main() { int userId; std::cin >> userId; // 从数据库读取数据并分析... std::cout << "{ \"favorites\": [1, 5, 3] }"; // 输出JSON } ``` ```javascript // Node.js调用C++程序 const { exec } = require('child_process'); exec('./preference_analyzer 1001', (err, stdout) => { const result = JSON.parse(stdout); console.log('用户喜好:', result.favorites); }); ``` --- ### **四、关键避坑指南** 1. **避免过度设计**： - 两人使用无需高并发，初期不用考虑微服务、Redis缓存等。 - 数据表字段尽量简单（如订单表直接存储菜品JSON，不拆分为多表关联）。 2. **学习优先级**： - 先掌握微信小程序数据绑定（`setData`）和API调用。 - 再学Node.js基础（路由、中间件、数据库连接）。 3. **调试工具**： - 后端：Postman测试API，VS Code + Chrome DevTools。 - 小程序：微信开发者工具的“真机调试”和“云真机”。 --- ### **五、资源推荐** 1. **教程**： - 微信小程序：[官方文档 - 起步](https://developers.weixin.qq.com/miniprogram/dev/framework/) - Node.js：[Express入门指南](https://expressjs.com/en/starter/hello-world.html) 2. **工具**： - 数据库管理：DBeaver（支持SQLite/MySQL） - 代码生成：Quicktype（JSON转C++/JS模型类） --- 通过此方案，你可依托现有C++基础逐步扩展，同时降低初期学习成本，2-3周内即可完成一个可运行的小型系统。