Qt+vue开发桌面应用程序（二）Vue部分介绍

上一章介绍了Qt+vue开发桌面应用程序（一）Qt部分介绍，本文介绍Vue部分

一、原理介绍

主要是引入Qt5里面qwebchannel.js文件，再定义交互类和Qt5交互

二、代码实现

1. 在Vue项目中的public目录，创建js目录，把qwebchannel.js文件复制到该目录，如图：
   
2. 修改qwebchannel.js文件，导出QWebChannel

export var QWebChannel = function(transport, initCallback) {
	if (typeof transport !== "object" || typeof transport.send !== "function") {
		console.error("The QWebChannel expects a transport object with a send function and onmessage callback property." +
			" Given is: transport: " + typeof(transport) + ", transport.send: " + typeof(transport.send));
		return;
	}

在"var QWebChannel"前面增加export，导出QWebChannel。Qt5里面自带的没有导出。

3. 在main.js中导入qwebchannel.js

import {
	QWebChannel
} from '../public/js/qwebchannel.js'

export var qtWebChannel = null;  //导出qtWebChannel，供其他页面调用
new QWebChannel(qt.webChannelTransport, (channel) => {
	// all published objects are available in channel.objects under
	// the identifier set in their attached WebChannel.id property
	qtWebChannel = channel.objects.core;
});

注意：channel.objects.core中的core是在Qt代码中注册的，

QWebChannel *channel = new QWebChannel(this);
channel->registerObject(QStringLiteral("core"), &mCore);

4. 页面中使用qtWebChannel

<script>
	import {
		qtWebChannel
	} from '../main.js'

	export default {
		name: 'login',
		props: {
			msg: String
		},
		components: {

		},
		data() {
			return {
				form: {
					username: '',
					password: '',
					record: false
				}
			}
		},
		mounted: function() {
			this.form.record = localStorage.getItem('record') == 'true' ? true : false;
			if (this.form.record) {
				this.form.username = localStorage.getItem('username');
			}
			this.autoLogin();

			// 测试连接信息，接受命令处理结果
			setTimeout(()=>{
				qtWebChannel.operateResult.connect((response) => {
					// alert("response: " + response);
					let result = JSON.parse(response);
					if (result.code == "0") {
						if (result.func == 'checkLogin') {
							localStorage.setItem('record', this.form.record);
							localStorage.setItem('username', this.form.username);
							this.$store.commit('setData', {
								'access_token': this.form.username,
								'userInfo': this.form.username,
								'groups': {
									"首页": [],
									"业务菜单": ["3D模型", "画图展示", "业务3"],
									"系统设置": ["用户管理", "系统日志"]
								},
								'roles': {
									"首页": ["读"],
									"3D模型": ["读", "写"],
									"业务2": ["读", "写"],
									"业务3": ["读", "写"],
									"用户管理": ["读", "写"],
									"系统日志": ["读", "写"]
								}
							});
							this.$router.push('/home');
							this.form.password = '';
						}
					} else {
						this.$message({
							message: result.msg,
							type: 'warning'
						});
					}
				});
			}, 1000);
		},
		methods: {
			async login() {
				if (this.form.username == "" || this.form.password == "") {
					this.$message({
						message: '请输入用户名和密码',
						type: 'warning'
					});
				} else {
					let argc = {
						'username': this.form.username,
						'password': this.form.password
					};

					//qt+vue
					qtWebChannel.handleCmd('checkLogin', ['username', 'password'],
						[this.form.username, this.form.password]);

				}
			},
			selectFile() {
				qtWebChannel.handleCmd('selectFile', [], []);
			},
			selectDir() {
				qtWebChannel.handleCmd('selectDir', [], []);
			}
		}
	}
</script>

说明：

• 在mounted里面接收Qt5处理结果，qtWebChannel.operateResult.connect((response) => {})，operateResult是在Qt里面定义的信号，用于发送处理结果
• 要等main.js里面new QWebChannel完成后，才在mounted
  里面绑定信号，否则提示qtWebChannel里面找不到operateResult，所以这里用setTimeout，一秒延迟绑定
• 通过qtWebChannel.handleCmd与Qt5交互，handleCmd是Qt5里面定义的函数

三、源码文件

源码地址：https://download.csdn.net/download/yyt593891927/12838793
默认用户名：admin
默认密码：admin

四、后记

Qt+vue开发桌面应用程序Qt部分和Vue部分都介绍完了，下一章介绍《Qt+vue开发桌面应用程序（三）程序打包》