Linux + Qt ：探讨QT直接调用JS方法传参的问题

Posted 2021-10-30 cpp_learner

紧接着上一篇博客，这里分享QT调用JS方法如何传参！只是一些简单的、取巧的用法，具体高级的用法我就不得而知了！

上一篇博客链接：
Linux + Qt ： QWebEngineView + QWebChannel 与 JS 交互传递信息

---

实现效果如下：

就是界面上有一个按钮，当我们点击这个按钮的时候，就会触发这个按钮的槽函数，槽函数中，将调用JS的方法，并传入参数；最后在web端显示消息弹窗，显示信息为传入的参数的内容！

---

一、QT直接调用JS方法传参

JS方法如下：

// 有两个参数
function showAlert(str, count) {
    var text = "str = " + str + "\\ncount = " + count;
    alert(text);
}

按钮槽函数实现如下：

void Widget::on_btnClick_clicked() {
    QString str = "test transfer parameter!";
    int count = 100;
    QString func = QString("showAlert(\\"%1\\", %2)").arg(str).arg(count);
    // 相当于："showAlert("test transfer parameter!", 100)"



    // QT调用JS的showAlert()函数
    view->page()->runjavascript(func);
    // 相当于： view->page()->runJavaScript(showAlert("test transfer parameter!", 100));
}

解释：
runJavaScript这个函数，他有很多个重载，

我只会用第一个，参数就是将需要调用JS的方法名字写入就行，其它三个重载的参数我不知道要传入什么，可能就是用他们进行传参的高级操作的吧。
但是今天这篇博客讲的是使用第一个方法进行传参操作！

正常来讲，如果调用没有带参的JS方法，那么我们这样调用就行：

view->page()->runJavaScript("showAlert()");

但是，恰巧你调用的这个JS方法是需要传入参数的，那么这样写，也不报错，只不过两个参数都是NULL值而已，如下图：

如果需要传参，只能先将方法名和需要传入的参数组合成一个新的字符串，再给runJavaScript这个函数去调用JS方法，这样就可以完美解决了！
如上面槽函数代码，我就是使用了这种方式去组合：

QString func = QString("showAlert(\\"%1\\", %2)").arg(str).arg(count);
// 相当于："showAlert("test transfer parameter!", 100)"

组合出来之后，参数1就是一个字符串，参数2就是一个整形数100.

再使用view->page()->runJavaScript()这个方法，将刚刚组合出来的字符串作为runJavaScript的参数就行！

view->page()->runJavaScript(func);
// 相当于： view->page()->runJavaScript(showAlert("test transfer parameter!", 100));

---

二、QT通过信号调用JS固定方法传参

另外，也可以像上篇博客那样，使用信号调用JS方法进行传参：

QT代码中发射信号，带参传过去

emit signalToWeb(100, "hello world");

然后在JS中代码中：

new QWebChannel(qt.webChannelTransport, function(channel) {
	window.doc = channel.objects.doc

	// cpp通过signalToWeb信号给web传值:response
	doc.signalToWeb.connect(function (size, str) {
		window.alert(size);
		window.alert(str);
	})
})

当调用运行后，web端就会出现弹窗显示参数中的值

---

三、JS调用QT槽函数传参

就是在JS中有一个QT传入的对象，通过该对象，可以调用对象自身定义的槽函数进行传参。

JS方法：

function fromWebToQT() {
	// web调用cpp的 on_sendTextToQT 方法，并带上参数
	doc.on_sendTextToQT(999, "哗啦哗啦");
	// doc就是我项目中传入的QT对象
}

QT对象的槽函数：
拿到数据后，你也可以像我这样再将数据通过信号发射出去，然后再另外的槽函数中进行处理。

public slots:
    // 接收html传过来的数据
    void on_sendTextToQT(const int &count, const QString &test);


// JS调用此函数传参，带数据给QT
void Document::on_sendTextToQT(const int &count, const QString &test) {    
    // 发射信号，将数据传给主窗体
    emit receiveTextFromWeb(count, test);
}

然后打印出来就是这样：

---

四、其它特殊类型参数如何传参

可能会有聪明的“金针菇”要问，如果我想传入一个数组呢？我想传入一个指针呢？我想传入一个结构体呢？我想传入一个对象呢？

这可就是要把我难倒了！

1. 我想传入一个数组；
   我想到的是，将数组的所有元素读取出来，组合成一个字符串，然后作为一个字符串参数传入，在JS方法中，对这个字符串进行拆分即可！
2. 我想传入一个指针；
   难搞哦！JS貌似没有指针吧，所以应该也无法传入指针吧！（个人理解，猜测、猜测）
3. 我想传入一个结构体；
   这也是跟数组的处理方式一样，将结构体的每个成员数据都读取出来组合成一个字符串，然后作为一个字符串参数传入，在JS方法中，对这个字符串进行拆分即可！
4. 我想传入一个对象。
   啊，这… 越来越过分了你们！

---

总结：
总的来说，使用void runJavaScript(const QString& scriptSource);第一个重载方法就可以解决很多传参的问题；(通过信号传参也是可以的啦！)
如果确实是需要传入一些奇葩的类型，那么就请去研究剩下的那三个重载方法吧，也许会有收获！(研究出成果后，再来告诉我，我也学习学习！(´▽`ʃ♡ƪ))