qt 浏览器的winid_浏览器上的Qt Quick

你想不想在浏览器上运行你的Qt Quick程序呢？在Qt 5.12之前，唯一的方法是使用Qt WebGL Streaming技术把界面镜像到浏览器上。但该方法有不少缺陷，下文会说。前不久随着Qt 5.12的推出，有一个模块正式进入Qt大家庭，那就是Qt for WebAssembly。简单地讲，就是使用WebAssembly技术，将Qt库编译为wasm字节码，然后直接在浏览器上运行。听着是不是很黑科技？本文将向大家展示如何使用Qt for WebAssembly(以下简称QtWasm)来开发程序，同时也针对目前该模块的几个问题提出自己的解决方法。

The English version of this post is:Qt Quick on the Browser​jimmychen.space

为啥要在浏览器上运行Qt程序？

在讲具体技术前，我们首先讨论下该技术的目的，或者优势。没有实用价值的黑科技不是好科技。

首先得讲一下WebAssembly技术的优势。Wasm官网提了几个好处，大家可以去详细了解下，在我看来其中毫无疑问最大的优势就是速度。wasm是一种新的字节码技术，可以在浏览器本地获得近乎二进制机器码的运行速度，比js要快多了。对于那些对性能有极高要求的Web应用，例如Web游戏、图形图像处理应用，恨不得榨干整个机器的资源，wasm这类技术方向无疑是必走的。而wasm目前已经获得了Chrome、Firefox、Edge以及Safari这四大浏览器的支持，所以wasm未来可期。

再来讲讲QtWasm。Qt是一套成熟的C++框架，从基本逻辑到界面、网络都可以帮我们快速开发应用。通过将Qt搬到WebAssembly平台，我们可以在浏览器上运行我们的Qt程序。WebAssembly的高性能使得像Qt这么复杂的C++框架也能够顺畅运行。Qt之前的口号是：Write once, compile & run everywhere。而QtWasm使得该口号可以变为：Compile once, run everywhere。是不是很熟悉？对，那正是Java的口号啊！QtWasm解决了Qt程序二进制的跨平台问题，而Web的模式解决了应用的分发、升级问题，所以QtWasm同样未来可期。

所以总结起来，我们为啥要在浏览器上跑Qt 程序？借由Qt和WebAssembly技术，快速构建高效、丰富的Web应用，非常适合Qt程序员向Web端拓展；

解决了传统桌面Qt程序分发、安装、升级问题，而且是一次编译各平台各浏览器都能运行。

现有的浏览器跑Qt Quick程序的方法

目前