如何将JS模块(.mjs)导入QML

问题描述 投票:0回答:1

我按照docs中提供的示例进行操作:

// main.qml
import QtQuick 2.0
import "script.mjs" as MyScript
Item {
  width: 100; height: 100
  MouseArea {
    anchors.fill: parent
    onClicked: {
      MyScript.showCalculations(10)
      console.log("Call factorial() from QML:",
        MyScript.factorial(10))
    }
  }
}
  

// script.mjs
import { factorial } from "factorial.mjs"
function showCalculations(value) {
  console.log(
   "Call factorial() from script.js:",
   factorial(value));
}
 

// factorial.mjs
export function factorial(a) {
  a = parseInt(a);
  if (a <= 0)
    return 1;
  else
    return a * factorial(a - 1);
}

在 main.qml 上运行 qmlscene 并在窗口上单击鼠标会触发以下错误:  

main.qml:12: TypeError: Property 'showCalculations' of object TypeError: Type error is not a function

预期输出:必须计算阶乘两次并打印到控制台

如果我通过导出

script.mjs
函数来修复
showCalculations
,如下所示:

export function showCalculations(value) {

我只计算了一次阶乘,但预期计算了两次。输出如下:

qml: Call factorial() from script.js: 3628800
main.qml:13: TypeError: Property 'factorial' of object TypeError: Type error is not a function

我还尝试将

script.mjs
重命名为
script.js
,但这会破坏 import Factorial.js,因此没有帮助。

还有一个问题是,文档指出“有时需要在导入上下文中提供函数,而无需对其进行限定。在这种情况下,ECMAScript 模块和 JavaScript 导入语句应在没有

as
限定符的情况下使用。 ”

我尝试过:

import "script.mjs"

但是我收到错误:

main.qml:4 Script import requires a qualifier

预期:导入必须没有问题,并且可以在没有限定符的情况下调用

showCalculations()
factorial()

我为它创建了一个bug,但是可能需要很长时间才能让人们看到它。也许这里有人知道如何获得文档中描述的确切行为。我需要导入 ECMAScript 模块,而不仅仅是 JS 文件。

javascript qt qml qt5 qtquick2
1个回答
0
投票

有点晚了(但总比没有好!),但问题的解决方案非常简单。

您需要在

export
中重新
factorial
script.mjs

如果您想在

js
文件上使用正常的
script
扩展名,那么您需要以旧方式进行导入:

.import "factorial.mjs" as F

var factorial = F.factorial
© www.soinside.com 2019 - 2024. All rights reserved.