采用Qt + QML + Vue构建应用程序（附源码）

使用了Qt多年，从widget到qml，尽管qml相比widget的确是方便了不少，但是目前仍然缺乏成熟组件库，稍复杂或美观的界面都需要自己造轮子，相对于HTML这边就丰富了很多，其发展已经多年，社区很活跃，有很多成熟的方法和技术可以选择，如vue和react，它们都有其成熟的UI组件库，可拿来即用，要方便很多。

本文将介绍一种基于qml加载vue的方法来构建跨平台应用程序，利用qml作为UI框架的优势，结合vue实现更加灵活和便捷的开发。这种组合将为开发者提供更多的选择和方便。

目录

1 建立qt qml工程

2 qml加载vue

2.1 先准备vue工程

2.2 将vue编译成html

2.3 加载编译后的html到qml

3 qml和vue之间接口的相互调用

3.1 建立通信

3.1.1 qml中添加webchannel

3.1.2 vue中添加webchannel

3.2 vue调用qml接口

3.3 qml调用vue接口

４ 源代码

---

运行效果如下图：

下面介绍构建过程

1 建立qt qml工程

本文用Qt5.15.2版本

编译工具的时候不能选MingGW，这里我选VS2019 64bit编译工具

 建完之后的工程

在资源中加入一个简单的login_test.html登陆作为测试页

    
    
    


    

        
Login
        用户名:
        

        密码:
        

        登陆
    

 修改main.qml，加入webengineView，url设置为资源文件中的html页

编译并运行测试

qml已成功拉起了html

接下来我们利用vue工程生成一个html单页应用，然后替换这个测试的html页

2 qml加载vue

2.1 先准备vue工程

运行以下命令创建新的Vue项目：

npm install -g @vue/cli
vue create ui-prj

然后按照提示进行配置，选择需要的特性，其中vue router必须，其他可选。

创建之后，在src/views目录新建两个页

• userInfoReg.vue：用户注册
• dataMgr.vue：数据管理

我们用vue的组件库element-ui来构造页面。然后将这两个页挂载到vue router中：

import Vue from 'vue'
import Router from 'vue-router'
import userInfoReg from '@/views/userInfoReg'
import datamgr from '@/views/dataMgr'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/userInfoReg',
      name: 'userInfoReg',
      component: userInfoReg
    },
    {
      path: '/dataMgr',
      name: 'dataMgr',
      component: dataMgr
    }
  ]
})

其中userInfoReg.vue界面部分如下：

详细的代码可在本文底部下载链接中获取。在编写前端之后，用webpack去编译，将vue转化成html

2.2 将vue编译成html

运行如下命令

npm run install
npm run build

这将使用Webpack等构建工具将Vue应用程序转换为HTML、CSS和JavaScript文件，并将这些文件放置在一个名为“dist”的目录中。

2.3 加载编译后的html到qml

将dist目录中的文件全部拷贝至qt qml工程中的html目录下，替换之前的html文件，并将这些文件加入qt资源文件中。

3 qml和vue之间接口的相互调用

现在qml和vue之间还是相互独立的，qml无法调用vue的接口，vue也无法调用qml中的函数。为了实现互调功能，需要实现两点，一，建立qml和vue之间的通信；二，约定调用的接口规则。

通讯通道可以有一条，也可以是多条，我们这里只建立一条共享通道，供vue页面和qml之间共享使用。所有接口消息都走共享通道，用消息路由做分离，区分何种消息路由到何处做处理，我们这里用hash表做消息分离，用接口名做key，查找到对应接口处理函数即转发调用。

3.1 建立通信

建立通信的方案有一些，比如有：1）websocket、2）webchannel，这里我们采用qt自己提供的webchannel。

我们只建一个webchannel通道，让所有vue页面和qml共享，提高复用减少开销。

3.1.1 qml中添加webchannel

添加webchannel，并让webengine引用

import "webChFunc.js" as WebChFunc

    QtObject {
        id: qtJS
        WebChannel.id: "QTJS"
        
        //供qml调用vue的共享接口
        signal callhtml(string func, string args)

        //vue->qml共享处理，将对应接口消息路由到qml对应接口
        function callqml(func, args) {
            //用nameToFunc哈希表做消息分离
            WebChFunc.nameToFunc[func](args);
        }
    }

    WebChannel {
        id:webch
        registeredObjects: [qtJS]
    }

    WebEngineView {
        id:webview
        z:100
        anchors.fill: parent
        webChannel: webch

        url:"qrc:/html/index.html"
    }

3.1.2 vue中添加webchannel

在qt自带的webchannel html例子下找到qwebchannel.js，本文用例是在C:\Qt\Examples\Qt-5.15.2\webchannel\shared\qwebchannel.js，将此文件拷贝至qml vue工程src/目录，并更名qt5.15webchannel.js（因为各版本的webchannel略有不同，如果你换了qt版本比如qt5.12，需要取这个版本中的js文件），直接使用会报错：

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#