尝试编译QCefView来将浏览器嵌入到应用程序中



  • 以前我曾经看到过一些软件可以将浏览器嵌入进来,那时我就感到很神奇。现在技术层出不穷,浏览器web技术的发展,让很多产品可以通过浏览器的形式来呈现,所以浏览器结合原生框架制作的软件变得流行起来。

    Qt 除了WebKit、WebEngine外,其实还可以直接整合第三方CEF来实现对于浏览器的整合。我这一天打算尝试一下,因为这不是Qt维护的解决方案,所以效果不能和WebEngine以及WebKit相比。但是也提供了一个解决方案吧。

    Qt直接和CEF结合参见一个第三方开发者的库:QtCefView,它的项目地址是:https://tishion.github.io/QCefView/
    作者提供了一个较为简单的英文介绍。我们这篇博客有一部分就是对原有介绍的翻译。

    要构建QCefView,有这几步:

    1、下载CEF项目

    CEF项目的地址是:http://opensource.spotify.com/cefbuilds/index.html
    选择适合自己的平台进行构建,我们呢,下载的是cef_binary_3.3359.1772.gd1df190_windows32_minimal这个安装包,也就是在Windows下进行构建的。
    0_1526555374575_a9ad5d3d-f6d0-448d-97e7-5ac56f25871f-image.png

    2、解压

    将CEF项目的压缩包解压出来,放在一个目录下,我放在的目录是D:\SDK\cef_binary_3.3359.1772.gd1df190_windows32_minimal。然后可能需要安装cmake。参见cmake的安装方法本站有很多篇文章,这里选取几篇比较重要的吧:
    https://qtdream.com/topic/436 CMake编译+Mingw32安装+QT使用
    或者可以从这个位置下载cmake:https://cmake.org/download/
    0_1526555428553_a9e79186-8049-4804-99aa-cc1c2bb1aa57-image.png

    选择最新的版本即可。同样等待系统安装cmake到合适的位置即可。

    3、cmake生成CEF的的sln文件

    因为CEF目前适合MSVC编译器,所以用cmake生成的时候,最好前提安装了较新版本的Visual Studio。推荐Visual Studio 2015。我这里呢,由于已经安装了Visual Studio 2013,没办法,只能这么用了。打开cmake-gui,在我的系统中的位置是C:\Program Files\CMake\bin\cmake-gui.exe。双击进入,然后configure、generate以及open project。很快就生成sln文件了。使用open project命令可以使用Visual Studio打开sln文件进行后续的编辑。
    0_1526555527262_8a4e205c-b4ef-483a-a1b0-391e634f0d7d-image.png

    4、构建CEF
    打开Visual Studio后,开始构建CEF。注意生成应用的方式是/MD还是/MT。因为这会和我们编译的库文件不匹配。配置的内容是:
    0_1526556742292_77d8cf0d-0133-410d-960f-b0eab2788feb-image.png
    0_1526556818459_c52dde05-6a2e-4f45-976f-59bd0144902f-image.png
    除了这些,还需要安装Qt for Visual Studio Add-in,下载地址是:http://download.qt.io/official_releases/vsaddin/

    最后编译,成功。
    0_1526558519856_770bd296-335d-4512-bf65-80e3ad4153c3-image.png

    不过想运行一个程序,遇到报错~
    0_1526558642524_1f55d10b-7298-423d-a7c7-5dd06cf4b2bb-image.png

    难道这篇文章又会变成“从新手到放弃”系列吗?


Log in to reply
 

走马观花

最近的回复

  • C

    Qt for MCU需要商业授权的

    read more
  • Qt for MCUs

    搭建Qt for MCUs PC端开发环境。qt for mcus提供了一个完整的图形框架和工具包,包含了在MCUs上设计、开发和部署gui所需的一切。它允许您在裸机或实时操作系统上运行应用程序。

    先决条件

    开发主机环境支持仅限于Windows 10

    MSVC compiler v19.16 (Visual Studio 2017 15.9.9 or newer) x64

    CMake v3.13 or newer (you can install it using the Qt Online installer) x64

    使用Qt联机安装程序安装Qt for MCUs,该安装程序可通过Qt帐户下载

    安装Qt 5.14和Qt Creator 4.11 or higher

    安装链接

    › Qt: https://account.qt.io/downloads
    › CMake: https://cmake.org/download/
    › Python 2.7 32-bit: https://www.python.org/downloads/release/python-2716/
    › Arm GCC: https://developer.arm.com/tools-and-software/open-source-software/developer-tools/gnutoolchain/gnu-rm/downloads
    › J-Link Software Pack: https://www.segger.com/downloads/jlink/JLink_Windows.exe
    › J-Link OpenSDA Firmware: https://www.segger.com/downloads/jlink/OpenSDA_MIMXRT1050-EVKHyperflash
    › STM32CubeProgrammer: https://www.st.com/en/development-tools/stm32cubeprog.html
    › STM32 ST-LINK Utility: https://www.st.com/en/development-tools/stsw-link004.html​​​​​​​

    Qt Creator设置 启用Qt Creator插件 选择“帮助>关于插件”,然后从列表中选择“MCU支持(实验性)”插件,重新启动Qt Creator以应用更改
    替代文字 为MCU创建Qt工具包

    选择工具>选项>设备>MCU

    选择Qt for MCUs-Desktop 32bpp作为目标

    如果尚未设置,请提供Qt for MCUs安装目录的路径。

    单击Apply应用。

    替代文字

    替代文字
    替代文字

    注意:

    编译器要选X64,Qt版本要选64bit,CMake Tool选x64

    打开恒温器项目demo

    选择文件>打开文件或项目。。。

    打开CMakefiles.txt文件来自thermo文件夹的文件。

    选择Qt作为MCU-桌面32bpp套件。

    单击“配置项目”以完成。

    替代文字

    问题

    开发主机环境支持仅限于Windows 10

    C++编译失败,文本大字体.pixelSize.

    文本类型无法正确呈现需要复杂文本布局的unicode序列。对复杂文本使用StaticText

    read more
  • H

    hi 有问题请教你,方便加个联系方式吗

    read more
  • boost.asio是一个很棒的网络库,这回儿我也开始系统地学习起来了。想想当年接触boost,也有八年多了。这次开始接触boost,觉得既熟悉又陌生。熟悉的是小写字母+下划线的命名方式、晦涩的模板、很慢的编译速度以及较大的程序体积,陌生的是asio的各种概念:io服务、接收器、套接字等等:我之前对网络编程不是非常了解。

    于是根据我的理解,参考《Boost.Asio C++网络编程》实现了这样一个简单的客户端和服务端通信的例子,例子非常简单,还不完善,但是幸运的是,可以在本机上互通了。
    下面是客户端的代码:

    #include <iostream> #include <boost/asio.hpp> #include <boost/proto/detail/ignore_unused.hpp> using namespace std; using namespace boost::asio; using namespace boost::system; using namespace boost::proto::detail;// 提供ignore_unused方法 void writeHandler( const boost::system::error_code& ec, size_t bytesTransferred ) { if ( ec ) { cout << "Write data error, code: " << ec.value( ) << "transferred: " << bytesTransferred << endl; } else { cout << "OK! " << bytesTransferred << "bytes written. " << endl; } } int main(int argc, char *argv[]) { ignore_unused( argc ); ignore_unused( argv ); io_service service; ip::tcp::socket sock( service ); ip::tcp::endpoint ep( ip::address::from_string( "127.0.0.1" ), 6545 ); boost::system::error_code ec; sock.connect( ep, ec ); if ( ec ) { cout << "Connect error, code: " << ec.value( ) << ", We will exit." << endl; return ec.value( ); } else { char buf[1024] = "Hello world!"; sock.async_write_some( buffer( buf ), writeHandler ); sock.close( ); } return service.run( ); }

    下面是服务端的代码:

    #include <iostream> #include <boost/asio.hpp> #include <boost/proto/detail/ignore_unused.hpp> using namespace std; using namespace boost::asio; using namespace boost::system; using namespace boost::proto::detail;// 提供ignore_unused方法 void acceptHandle( const boost::system::error_code& code ) { cout << "Accepted." << endl; } int main(int argc, char *argv[]) { ignore_unused( argc ); ignore_unused( argv ); io_service service; ip::tcp::endpoint ep( ip::address::from_string( "127.0.0.1" ), 6545 ); boost::system::error_code ec; ip::tcp::socket sock( service ); ip::tcp::acceptor acceptor( service, ep ); acceptor.async_accept( sock, acceptHandle ); if ( ec ) { cout << "There is an error in server. code: " << ec.value( ) << endl; } return service.run( );// 阻塞运行 }

    运行结果是这样的:
    78448d7b-b3ae-42fc-9e2e-4dd2fbdac2c2-image.png

    我对boost.asio中几个概念的理解:

    io_service,这就是一个类似事件循环的东西,它为io设备提供服务,故名。不管是套接字、文件还是串口设备,都要使用它的服务。它的run()函数相当于启动了一个事件循环。一旦有消息了,即进行响应。这也是实现异步编程的重要基础。 socket,这个类则是套接字,可以处理TCP或者是UDP请求。有同步以及异步的处理方式,也有带异常以及不带异常的处理方式。 acceptor,接收器,仅仅是服务端使用。相当于其余框架中的listener,作接收用的。

    比较浅显,如果有不当之处,敬请指正。

    read more

关注我们

微博
QQ群