在Qt编程中QML和JS交互

QML 是一种用于创建高度动态应用程序的多范式语言。使用 QML，可以声明应用程序构建块（如 UI 组件），并设置各种属性来定义应用程序行为。应用程序行为可以通过 JavaScript 进一步编写脚本，JavaScript 是该语言的一个子集。此外，QML 大量使用 Qt，它允许直接从 QML 应用程序访问类型和其他 Qt 功能。——https://doc.qt.io/qt-6/qmlreference.html

QML 语言使用类似 JSON 的语法，并允许将各种表达式和方法定义为 JavaScript 函数。它还允许用户导入 JavaScript 文件并使用这些导入提供的功能。——https://doc.qt.io/qt-6/qtqml-javascript-topic.html

下面是QML和JS交互在Qt编写Sailfish应用程序的一个实际例子，用QML写界面，并导入JS模块实现计算逻辑。

先将JS的部分写好，这个函数用于计算两个日期之间的日数差。

function daysBetween(endyear ,endmonth, endday) {
    var date = new Date();
    var currentyear = date.getFullYear()
    var currentmonth = date.getMonth()
    var currentday = date.getDate()
    var currentdate = new Date(currentyear,currentmonth,currentday)
    var enddate = new Date(endyear,endmonth-1,endday);
    var daysbetween = parseInt((enddate-currentdate)/1000/60/60/24);
    return daysbetween;
}

接下来把QML的部分写好，用一个ListItem作为容器，一个Sailfish Silica的Label组件显示计算好的日期差。

Label {
    id: daystext1
    anchors.left: nametext.right
    anchors.bottom: datetexttext.bottom
    text: daysbetween > 1 ? daysbetween : (daysbetween === 0 ? qsTr("today") : (daysbetween ===1 ? qsTr("tmr") : -daysbetween) )
    font.pixelSize: daysbetween < 0 || daysbetween > 1 ? Theme.fontSizeHuge * 1.5 : Theme.fontSizeHuge
    color: listItem.highlighted ?
       Theme.highlightColor :
        (daysbetween >= 0 ? Theme.highlightColor : Theme.primaryColor)
}

在QML文件开头导入JS文件，可以使用as设置别名方便引用，然后在QML中使用JS语法定义一个函数，调用导入的JS文件中的函数。

import "compute.js" as Compute

......

function refreshdays(year,month,day) {
    var days = Compute.daysBetween(year,month,day)
    return days
}

......

ListItem {
    id: listItem
    property int daysbetween: refreshdays(year,month,day)

    function refreshdays(year,month,day) {
         var days = Compute.daysBetween(year,month,day)
         return days
    }

    Label {
        id: daystext1
        ......
    }
}

这样就可以实现在QML中和JS交互，实现简单的计算逻辑，而不用动用到C++实现逻辑，比较简单地实现逻辑。